Submit Rails form using jQuery

Question

I am trying to submit a Rails form using jQuery and Ajax however it is not working and I am not sure why. I realize there is the remote: true to do things using AJAX but this is not enough in my case as I want to perform other jQuery actions when the submit buttons is clicked and give good feedback on the status of the action i.e success and failure. This is code I currently have the form:

<%= form_for @mail, id: "mail-form", url: subscription_mail_create_recipients_path(@mail) do |f| %>

    <strong>Choose the users you want to target..</strong><br/>

    <%= f.check_box :target_users %> Users                          

    <div class="actions">
    <a id="save-config" class="btn btn-primary purple-button">Save configuration</a>
    </div>
<% end %>

The jQuery:

    $('#save-config').click(function(){
        $('#mail-form').submit(function() {
            var valuesToSubmit = $(this).serialize();
            console.log(valueToSubmit);
                            $.ajax({
                                url: $(this).attr('action'), //sumbits it to the given url of the form
                                data: valuesToSubmit,
                                dataType: "JSON" // you want a difference between normal and ajax-calls, and json is standard
                            }).success(function(json){
                                //act on result.
                            });
            alert("method failed");
                            return false; // prevents normal behaviour
        });
    });

I am trying to work off the example here Submit form in rails 3 in an ajax way (with jQuery)

I have no submit button, is that the reason it is not working? Any help would be appreciated thanks.

Well the click of the button works however nothing happens after that. I don't think the submit is working. It doesn't log anything even when i comment out the submits content code. — Hugs
– Hugs, Commented Nov 29, 2012 at 15:35
Bad rails code on my part :/ the id of the form wasn't being set. required html: {id: "mail-form"} — Hugs
– Hugs, Commented Nov 29, 2012 at 18:58

krichard · Accepted Answer · 2012-11-29 15:46:39Z

1

Your code does define function to be executed when the form is submitted. it does this for every click on your button. But what you want is to submit the contents of the form for every click. So try the following:

$('#save-config').click(function(){
  var valuesToSubmit = $('#mail-form').serialize();
  console.log(valueToSubmit);
  $.ajax({
    url: $('#mail-form').attr('action'), //sumbits it to the given url of the form
    data: valuesToSubmit,
    dataType: "JSON" // you want a difference between normal and ajax-calls, and json is standard
  }).success(function(json){
    //act on result.
  });
  return false; // prevents normal behaviour
});

answered Nov 29, 2012 at 15:46

krichard

3,70427 silver badges35 bronze badges

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

3 Comments

Hugs Over a year ago

thanks for the answer, the console logs nothing though. and it's not the typo error in my code of valueToSubmit and valuesToSubmit.

Hugs Over a year ago

I get this warning in the console list: [Exception: ReferenceError: list is not defined]

krichard Over a year ago

than your code probably fails above your click event binding part

Collectives™ on Stack Overflow

Submit Rails form using jQuery

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related