11

I have a form that for the most part just submits as a normal form, so I don't want to set in the form_tag the :remote => true option.

However, under certain circumstances I'd like to be able have a javascript function post the form as if it had been posted by :remote => true. What would I need to do in javascript to accomplish this?

5 Answers 5

33

I'm sorta new to this but here goes...

rails.js (the jquery one at least) defines the following function to catch and submit forms:

$('form').live('submit.rails', function(e) { ... });

If you use the following it should trigger the same function (and if :remote => true, then it wont cause a page reload):

$("#<yourformid>").trigger("submit.rails");

So, if you wanted to submit your form on a select change for example, you could set the above trigger call to the select's :onchange I would imagine.

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

4 Comments

This is the answer I was looking on "How to trigger a rails remote form submission with javascript"
I did this exactly, but it still is requesting HTML from the controller, not js, and as a result my respond_to do |format| format.js; end is giving an error.
I tried this and my form is still submitting traditionally, not remotely. Is that because I'm using Rails 5? Any framework updates here?
Yes, Rails 5.1 replaced jquery-ujs with a new rails-ujs library. See my new answer for Rails 5.1+ :)
5

I just tried this which definitely works, if the form has remote => true, just remove the data-remote attribute to submit normally w/ javascript ie

$('input').click(function(){ $('#form').removeAttr('data-remote') });

I'm guessing the opposite would probably work ie if the form doesn't have remote => true just do

$('input').click(function(){ $('#form').attr('data-remote',true)});

Comments

3

maybe u could try this:

$('#form').submit();

1 Comment

That will submit the form normally, without triggering format.js.
2

If you're using jQuery you could do something like this to have the form auto-post on keyup events, or simplify it to trigger manually:

  $(function() {    
    $("#live_search input").keyup(function() {
        q = $('#search_text').val();
      $.ajax({
          beforeSend      : function(request) { request.setRequestHeader("Accept", "text/javascript"); },
                           // Included so Rails responds via "format.js"
          data          : 'query=' + q,
          success       : function(data, textStatus, XMLHttpRequest) {
                                // alert(textStatus);
                                $("#live_search #results").html(data);
                                },
          error         : function(XMLHttpRequest, textStatus, errorThrown) {
                                // alert(errorThrown);
                                $('#annotation_dialog').html(XMLHttpRequest.responseText);
                                },
          type            : 'POST',
          url                 : '/search/live'
      });
      return false;
    });
});

Comments

1

In Rails 5 (which replaces jquery-ujs with rails-ujs), this is how you trigger the handler rails attaches to a form's submit event:

var elem = document.getElementById('myform') // or $('#myform')[0] with jQuery
Rails.fire(elem, 'submit');

(Holy cow did it take me forever to figure that out!)

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.