How can I submit an AJAX form in rails by using a button?

My Code:

Controller:

def list
  @events = ExternalEvent.all
  if !params[:city_id].nil?
    @events = @events.where(city_id: params[:city_id])
  end
  respond_to do |format|
    format.js
    format.html
  end
end

list.js.erb:

$('#events').html("<%= j render 'events' %>");

list.erb:

<%= javascript_include_tag "jquery" %>
<%= javascript_include_tag "application" %>
<div id='events'>
  <%= render 'events' %>
</div>

_events.erb:

<%= form_tag('/list', remote: true) do %>
  <input name='city_id' value='2'>
  <input type='Submit'>
<% end %>
<table>
  <% for event in @events %>
    <tr>
      <td>
        <%= event.name %>
      </td>
    </tr>
  <% end %>
</table>

On clicking submit the AJAX form is submitted successfully.

But how do I submit the form from outside the form. Using

<input type='button' onclick="document.getElementById('get_event').onsubmit()" value="Change City">

returns a JavaScript error

Uncaught TypeError: object is not a function
  onclick

How do I submit this form externally?

How can I submit an AJAX form in rails by using a button?

My Code:

Controller:

def list
  @events = ExternalEvent.all
  if !params[:city_id].nil?
    @events = @events.where(city_id: params[:city_id])
  end
  respond_to do |format|
    format.js
    format.html
  end
end

list.js.erb:

$('#events').html("<%= j render 'events' %>");

list.erb:

<%= javascript_include_tag "jquery" %>
<%= javascript_include_tag "application" %>
<div id='events'>
  <%= render 'events' %>
</div>

_events.erb:

<%= form_tag('/list', remote: true) do %>
  <input name='city_id' value='2'>
  <input type='Submit'>
<% end %>
<table>
  <% for event in @events %>
    <tr>
      <td>
        <%= event.name %>
      </td>
    </tr>
  <% end %>
</table>

On clicking submit the AJAX form is submitted successfully.

But how do I submit the form from outside the form. Using

<input type='button' onclick="document.getElementById('get_event').onsubmit()" value="Change City">

returns a JavaScript error

Uncaught TypeError: object is not a function
  onclick

How do I submit this form externally?

• javascript
• jquery
• ruby-on-rails
• ajax
• forms

2 Answers 2

Use following way

<form id="get_event">
<input type='button' onclick="document.getElementById('get_event').submit();" value="Change City">
    </form>

issubmit() is not a function , but submit() is.

For AJAX use Ajax call to submit form without page reload :

<form id="get_event">
<input type='button' onclick="submitFrmAjax();" value="Change City">
</form>

<script>
    function submitFrmAjax(){
       $.ajax({
    //Your ajax code here to submit from via AJAX. refer jquery site . I gave sample eg.
             url : "Your URL or file name on server",
             data : $("form").serialize()
        });
    }
</script>

Demo for Regular Submit

Demo : Sample ajax submit , see network tab in firebug

I think your problem arise here

<%= form_tag('/list', remote: true) do %>

change this with

<%= form_tag(:list, :url => '/list', remote: true) do %>

If list model are accessible.