Clear Rails remote form after submitting

Question

I'm using Rails 3 with jQuery, and have a simple form with a single text input and a submit button. I have the form submitting with :remote => true, and would like to clear the input after the form is submitted. I tried this jQuery code:

$('#new_message').submit(function() {
  $('#message_content').val('');
});

However, this clears the input before the form is submitted, so I end up submitting a blank form.

After searching around a bit, I also tried the following version:

$('#new_message').submit(function(e) {
  e.preventDefault();
  this.submit();
  $('#message_content').val('');
});

...but this seems to override the :remote => true magic, and the form gets submitted with a full page reload. Any ideas?

score 24 · Accepted Answer · edited May 06 '20 at 20:43

24

When submit button is pressed for a form marked remote => true, javascript code in rails.js does the submit(). You need not override the functionality.

Try this instead in $(document).ready -

(Edit: Using bind instead of live. Thanks Darren Hicks.)

$("#new_message").bind("ajax:complete", function(event,xhr,status){
  $('#message_content').val('');
}

This adds an event handler for the ajax:complete event. This event is fired when your the ajax-submit-form is completed. More here.

Edit:

Don't forget closing ) on the bind method.

$("#new_message").bind("ajax:complete", function(event,xhr,status){
   $('#message_content').val('');
 })

edited May 06 '20 at 20:43

Sami Birnbaum

773
8
20

answered May 19 '11 at 09:48

abhishek

998
6
9

Nice! I used your code but changed the event to `ajax:beforeSend`, which clears the input immediately upon submission (instead of waiting for the request to actually go through), but still sends the data correctly. My thanks for digging this up! – DigitalCora May 19 '11 at 16:40
How can you do this in Coffeescript? – tibbon Apr 12 '12 at 21:44
2

.live() is deprecated for jQuery. You want to use .bind() instead in the answer above! http://stackoverflow.com/questions/14526033/object-has-no-method-live-jquery – Darren Hicks Feb 22 '13 at 04:23
1

@tibbon coffeescript: `$("body").on 'ajax:complete', '#new_message', (event,xhr,status) -> $('#message_content').val('')` – Daniel Jun 05 '13 at 10:48
2

You could always respond_to :js and clear the form in your create.js.erb file: `$('form#new_message').find("input[type=text], textarea").val("")` – dennismonsewicz Aug 02 '13 at 13:50

Nick · Answer 2 · 2011-05-19T09:06:27.570

1

In your action.js.erb file

$('#message_content').attr('value','');

Where action is the method name (which you don't state in your question) in your controller

edited May 19 '11 at 09:06

answered May 19 '11 at 08:51

Nick

1,315
9
16

I thought of this, but it would mean waiting for the entire request/response to go through before the input is cleared, which feels rather laggy (and might result in multiple form submissions if the user gets impatient). abhishek's event binding solution, using `ajax:beforeSend`, clears the input immediately. – DigitalCora May 19 '11 at 16:46
fair enough, your user might be annoyed if the ajax call fails for any reason and you've cleared their input box. Do they get any other visual clue that the request has succeeded? – Nick May 19 '11 at 16:54
The interface in question is a basic chatroom, so when the request returns, the user's message appears in the chat. I think in this scenario responsiveness is more important than being able to resubmit your message without retyping it, though I guess I could also save the submitted message client-side and display it back to the user (allowing them to copy-paste it) if the ajax fails. – DigitalCora May 19 '11 at 17:42

score 0 · Answer 3 · answered Sep 14 '12 at 22:46

0

You can trigger a Rails AJAX submit like this:

$(this).trigger('submit.rails');

answered Sep 14 '12 at 22:46

user1032752

751
1
11
28

score 0 · Answer 4 · answered Feb 17 '16 at 12:52

0

In your model.js file

               $('#element_id').val(' ');

It work's for me, you can try this.

answered Feb 17 '16 at 12:52

pbms

586
1
10
32

score 0 · Answer 5 · answered May 19 '11 at 02:17

0

In your jquery function, do the submitting yourself via get(). You set the text field to blank right after calling get(). Or, you can do this in the success callback that you provide to get(), which will let you get some info back from your controller, like whether the submitted text field value was acceptable.

answered May 19 '11 at 02:17

CharlieMezak

5,999
1
38
54

Hmm... I don't doubt that this works, but it would seem to defeat the point of using `:remote => true` in the first place, since you're pretty much reimplementing all of its functionality. I might do this as a last resort, but I'd be surprised (and a bit disappointed) if this is the only way to do it. – DigitalCora May 19 '11 at 06:40

Clear Rails remote form after submitting

5 Answers5

Linked