Question

We have three forms which are currently their own page but would work better as dropdowns I think. They each have only two fields and a submit button. I’d like it so the page doesn’t reload after they click submit, they just keep using the site as they were.

One sample form:

<%= form_for(@app) do |f| %>
  <% if @app.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(@app.errors.count, "error") %> prohibited this app from being saved:</h2>
      <ul>
      <% @app.errors.full_messages.each do |msg| %>
        <li><%= msg %></li>
      <% end %>
      </ul>
    </div>
  <% end %>
  <div>
    <%= f.text_field :url, :class => 'span4', :placeholder => "Paste the URL"  %>
  </div>
  <div>
    <%= f.text_field :description, :class => 'span4', :rows =>1, :placeholder 
      => "Give it a title" %>
  </div>
  <div style="text-align:left">
      <%= f.submit "Submit" %>
  </div>
<% end %>

I’d like to know the JavaScript code to place that code into on the page. I’m hoping there is a jquery plugin or similar for this – but I couldn’t find anything searching jquery.com.

Thanks for any help!

Answer 1

I’m not going to write the code for you, but here are the steps:

1. Intercept the form’s submit event. $('#someForm').submit(function(e){});

2. Cancel the default behavior. e.preventDefault();

3. Use AJAX to post the data to the form via JavaScript rather than a reload.