Remote form with A tag submit in Rails 3

Question

Hi guys!

I have a remote form with hand-made buttons using tags. I'm using data-remote=true in the form tag, but I don't know how to use the link tag to post the form data in a form submit. When I use data-remote with data-method, it creates a remote call with empty parameters, so I doesn't call the submit() function to my form.

My form is:

<form accept-charset="UTF-8" action="/tasks" data-remote="true" method="post">

and my link tag under the form tags are:

it creates a remote call with empty POST parameters:

<a class='minibutton' data-remote='create' href='/tasks/create' data-method='post'>

it doesn't send any POST information, only the header:

<a class='minibutton' data-remote='create' href='/tasks/create'>

How can I call elegant the submit() method of the form? I guess I don't need to create javascript hacks to make it work. Do I?

Answer 1

I guess there're 2 ways you can solve it:

1. I see you're using a class called 'minibutton' on your link, which suggests you want it to look like a button anyway. So instead of the link (or <input type="submit"> tag), use the button tag inside your form:

<button type="submit" value="Submit">

and style it to your liking using CSS. You can even use icons on them. Check out this blog post for details and a ready to use chunk of CSS code.

2. If you still want to use the link, you can set "id" attributes on the link and on the form, and add a click event observer to submit the form. Assuming you're using Prototype, put something like this into the head part of the page:

<%= javascript_tag do %>
    $('YOUR-LINK-ID').observe(
        'click', 
        function(el, value) {
          $('YOUR-FORM-ID').request({
            onSuccess: function(response) {eval(response)}
          })
        }
    );
<% end %>

This is assuming your response content type is text/javascript. If it's not, you'd have to update the onSuccess and/or onComplete callbacks to replace a piece of your page with the response contents.

See documentation on Form.request and Event.observe for details on observing and submitting a form.

This question may also be helpful.