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?

Sami Birnbaum · Accepted Answer · 2020-05-06 20:43:38Z

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 6, 2020 at 20:43

Sami Birnbaum

86110 silver badges22 bronze badges

answered May 19, 2011 at 9:48

abhishek

1,0087 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

DigitalCora Over a year ago

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!

tibbon Over a year ago

How can you do this in Coffeescript?

Darren Hicks Over a year ago

.live() is deprecated for jQuery. You want to use .bind() instead in the answer above! stackoverflow.com/questions/14526033/…

Daniel Over a year ago

@tibbon coffeescript: $("body").on 'ajax:complete', '#new_message', (event,xhr,status) -> $('#message_content').val('')

dennismonsewicz Over a year ago

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("")

Nick · Accepted Answer · 2011-05-19 09:06:27Z

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, 2011 at 9:06

answered May 19, 2011 at 8:51

Nick

1,3259 silver badges16 bronze badges

3 Comments

DigitalCora Over a year ago

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.

Nick Over a year ago

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?

DigitalCora Over a year ago

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.

CharlieMezak · Accepted Answer · 2011-05-19 02:17:29Z

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, 2011 at 2:17

CharlieMezak

5,9891 gold badge41 silver badges54 bronze badges

1 Comment

DigitalCora Over a year ago

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.

user1032752 · Accepted Answer · 2012-09-14 22:46:30Z

0

You can trigger a Rails AJAX submit like this:

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

answered Sep 14, 2012 at 22:46

user1032752

8911 gold badge14 silver badges31 bronze badges

Comments

pbms · Accepted Answer · 2016-02-17 12:52:58Z

0

In your model.js file

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

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

answered Feb 17, 2016 at 12:52

pbms

6531 gold badge11 silver badges34 bronze badges

Collectives™ on Stack Overflow

Clear Rails remote form after submitting

5 Answers 5

5 Comments

3 Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

5 Comments

3 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related