user749798
user749798

Reputation: 5380

form is submitting twice

I'm using the simpleImageCheck plugin and for some reason, the form submits twice.

Below is my javascript:

<script type="text/javascript" language="javascript">
$(function() {
$('#pin_candle').simpleImageCheck({
    image: '/images/candle.png',
    imageChecked: '/images/one.png'
  })
$('#pin_rose').simpleImageCheck({
    image: '/images/rose.png',
    imageChecked: '/images/one.png'
  })
});
</script>

Here is my rails form:

<%= form_for([@posts, @pin], :remote => true, :html => { :id => 'pinform' }) do |f| %>

  <%= f.check_box :candle, :onChange => "this.form.submit_button.click();" %>

  <%= f.check_box :rose, :onChange => "this.form.submit_button.click();" %>

  <%= f.submit :id => 'submit_button', :style => 'display: none;' %>
<% end %>

I need to use this.form.submit_button.click(); because when I just use the standard this.form.submit(); it submits in html, not js, so rails won't let me do an ajax call.

The other problem is if I disable the form after submitting, I have other checkboxes then the other checkbox doesn't work.

Any ideas?

Is there a way to stop the double-submitting?

Thank you.

Upvotes: 0

Views: 403

Answers (2)

pdpMathi
pdpMathi

Reputation: 775

If your form is not submitted in js format, use :format => :js along with form_tag and try by changing the onclick event to this.form.submit()

Upvotes: 0

saihgala
saihgala

Reputation: 5774

Change your view to -

<%= form_for([@posts, @pin], :remote => true, :html => { :id => 'pinform' }) do |f| %>
  <%= f.check_box :candle %>
  <%= f.check_box :rose %>
  <%= f.submit :id => 'submit_button'%>
<% end %>

and in the script block

 $("#pinform_candle").change(function () {
           submit_candle_or_rose("candle");
 });

 $("#pinform_rose").change(function () {
           submit_candle_or_rose("rose");
 });


 function submit_candle_or_rose(candle_or_rose)
 {
        $.ajax({
                        url: "/posts/pin?format=js&candle_or_rose="+ candle_or_rose,
                        beforeSend: function() {
                               //do something
                        },
                        success: function() {
                               alert("saved successfully");
                        },
                        error: function() {
                               alert("something failed");
                        }
         });
  }

Upvotes: 0

Related Questions