why after returning from link_to :remote => true the entire form is submitted?

Question

I have an action in a form that 1) selects a product from a listbox 2) calls a remote controller action that returns how many items of that product are available in different warehouses

This is done using link_to with :remote => true

  <div id="products"></div>
  <%= link_to 'Search product', "#", class: 'get_product', :remote => true %>

Then there is a javascript

$('form').on('click', '.get_product', function(event) {
    var url;
    url='/recipes/get_product_list';
    url += '/' + $('#recipe_product_id').val();
    $.get(url, $(this).serialize(), null, "script");
    return event.preventDefault();
});

I have the .js.erb templates and the correct values are returned in the .html.erb partial.

The problem is that after returning the partial, the page gets fully reloaded, and I do not want this.

Why is this happening? I also tried to figure out how to invoke link_to with the entire url instead of using "#" and jquery, but in this case I do not know how to pass the value in the select field in the link_to helper.

Answer 1

In your form tag, put this

<form onsubmit="return false;">

Without seeing your form HTML, it's hard to say why this is happening, but I think that the get_product button is submitting the form AND calling the on click handler function.