CODEWITHSUNDEEP
javascriptruby-on-railsrubyruby-on-rails-3forms
meritonch
meritonch

Reputation: 43

Submitting two forms with javascript, one submits one not. Cant figure out why?

I have this as Javascript code for my Ticket Model. 

$(document).ready(function() {
 $('#submitForm').click(function(e) {
   $('#form1').submit();
   $('#form2').submit();
 });
});

On my ticket edit view, i have both ticket and its comments to update. Ticket form its named form1 and comment form is named form2. If I only have form1 on my javascript code, it updates perfectly, when I add form2 only form2 updates, so only the comment gets added, the Ticket Atributes (from form1) are not being updated.

Here is my Ticket View code (its actually a partial i'm loading on the edit view")

<%= form_for @ticket, :html => { :class => 'form-horizontal', :id => 'form1' } do |f| %>
  <div class="control-group">
    <%= f.label :subject, :class => 'control-label' %>
    <div class="controls">
      <%= f.text_field :subject, :class => 'text_field' %>
    </div>
  </div>
  <div class="control-group">
    <%= f.label :content, :class => 'control-label' %>
    <div class="controls">
      <%= f.text_area :content, :class => 'text_area' ,:style => 'height:190px; width:655px', disabled: true %>
    </div>
  </div>
  <div class="control-group">
    <%= f.label "Assigne", :class => 'control-label' %>
    <div class="controls">
      <%= f.collection_select(:user_id,  User.all, :id, :email) %>
    </div>
  </div>
  <div class="control-group">
    <%= f.label :department_id, :class => 'control-label' %>
    <div class="controls">
      <%= f.collection_select(:department_id,  Department.all, :id, :name) %>
  </div>
  </div>
  <div class="control-group">
    <%= f.label :status, :class => 'control-label' %>
    <div class="controls">
      <%= f.select :status, options_for_select(["Open", "In Progress", "Waiting-for-Info", "Closed"]), :class => 'from-control' %>
    </div>
  </div>
  <div class="control-group">
    <%= f.label :priority, :class => 'control-label' %>
    <div class="controls">
      <%= f.select :priority, options_for_select([ "Normal", "High", "Immediate", "Low"]), :class => 'from-control' %>
    </div>
  </div>
  <div class="control-group">
    <%= f.label :due_date, :class => 'control-label' %>
    <div class="controls">
      <%= f.date_select :due_date, :class => 'date_select' %>
    </div>
  </div>
<% end %>
<h4>Comments</h4>
  <div id="comments">
    <%= render :partial => @ticket.comments %>
  </div>
    <%= form_for [@ticket, Comment.new], :html => { :class => 'form-horizontal', :id => 'form2' }  do |f| %>
    <p>
      <%= f.text_area :content, :class => 'text_area' ,:style => 'height:75px; width:600px' %></p></br>

    <% end %>
<%= submit_tag nil, :class => 'btn btn-primary', :id => 'submitForm' %>

Am I doing something wrong?

Upvotes: 0

Views: 83

Answers (1)

Cereal
Cereal

Reputation: 3849

When you call $('#form1').submit();, the page performs an http request. What this means is the page stops executing its javascript and begins performing the actions associated with said http request. (Usually this would be an http post to the form's target, where the data from the form is sent to the server.)

To bypass this, you need to look into ajax calls. An ajax call is an "Asynchronous JavaScript and XML" call, whereby you can perform http requests through your javascript code without interrupting anything else.

Ajax is a bit much to cover in an answer, so I will point you towards some ajax documentation, and the jQuery ajax documentation. You might also want to glance at the HTTP page on wikipedia just to get a better understanding of how the web works.

Upvotes: 6

Related Questions