Submit data of current form along with other form as well

Question

I have two forms

first_form is for ajax request to load new input data which is displayed in second_form as input fields(this is already done)
second_form is to submit all data of its own and first_form as well(this is not achieved)

first_form is using form-inline to display inputs horizontally while the other form is a normal form so i cannot combine both the forms.

So when user clicks submit button of the second_form i want to send all its data along with the data of the first_form as well.

Example:

<form id="first_form" class="form-inline">
<input type="text" />
<input type="text" />
<button type="submit" class="btn btn-primary">Load</button> // This loads fields for second form

</form>

<form id="second_form">
<div class="loaded_data"> // this div is loaded with ajax
<input type="text" />
<input type="text" />
<button type="submit" class="btn btn-primary">Save</button> // This must send all fields of first and second form
</div>
</form>

I do not want to use ajax for second form. The form will be submitted and store method of Laravel controller will be called for further processing

We are always glad to help and support new coders but ***you need to help yourself first. :-)*** After [**doing more research**](https://meta.stackoverflow.com/q/261592/1011527) if you have a problem **post what you've tried** with a **clear explanation of what isn't working** and provide [a Minimal, Complete, and Verifiable example](http://stackoverflow.com/help/mcve). Read [How to Ask](http://stackoverflow.com/help/how-to-ask) a good question. Be sure to [take the tour](http://stackoverflow.com/tour) and read [this](https://meta.stackoverflow.com/q/347937/1011527). — Jay Blanchard, Jan 05 '18 at 13:26
@Raj here is the link please try with this https://stackoverflow.com/questions/7843355/submit-two-forms-with-one-button — Sanjay Kumar Singh, Jan 05 '18 at 13:27
@JayBlanchard Im using laravel which will call the store method when second form is submitted. so i want it to be a normal form submmission not ajax — Raj, Jan 05 '18 at 13:35
do you not believe in giving the form elements a name attribute? — Professor Abronsius, Jan 05 '18 at 13:45

Sébastien · Answer 1 · 2018-01-05T13:39:15.510

With jQuery you have access to the serialize method. You can grab all the data from form 1 and add it to the data of form 2 in a $.ajax call.

var form1Data = $('#first_form').serialize();

You can then send form1Data along with your second form:

$.ajax({
    method: 'POST',
    url: 'server/form.php',
    data: {
        form1: form1Data,
        form2: $('#second_form').serialize();
    }
})
.done(function( msg ) {
    console.log('all done:', msg);
});

Vladimir · Answer 2 · 2018-01-05T13:39:06.967

You can use jquery to get values from second_form to first_form when second form is submit:

$('#second_form').submit(function({
   $('#in_1_1').val($('#in_2_1').val());
   $('#in_1_2').val($('#in_2_2').val());
});

In HMTL add ids to inputs:

<form id="first_form" class="form-inline">
<input type="text"  id="in_1_1"/>
<input type="text"  id="in_1_2"/>
<button type="submit" class="btn btn-primary">Load</button> // This loads fields for second form
</form>

<form id="second_form">
  <div class="loaded_data"> // this div is loaded with ajax
  <input type="text" id="in_2_1" />
  <input type="text" id="in_2_2" />
  <button type="submit" class="btn btn-primary">Save</button> // This must send all fields of first and second form
  </div>
</form>

Do or do not, there is no "try". A ***good answer*** will always have an explanation of what was done and why it was done in such a manner, not only for the OP but for future visitors to SO. — Jay Blanchard, Jan 05 '18 at 13:36

Submit data of current form along with other form as well

2 Answers2