如何保存HTML表单并通过Ajax发送到php

Question

how can i save a form with different values in an array every time when i click the button save. After that when i'm finished with the orders I click the button send a the whole array with the stored information is sending via ajax to php.

it should look like this var order = [fname: .... , lname: ..., 1.order:{product:p1, color:c3}, 2.order:{product:p3, color:c2}, 3.order... and so one] is this even possible to do it this way or is there a better solution for that ? I don't have the possibility to connect to mysql

here is my example in jsfiddle: https://jsfiddle.net/4acj5wab/ my problem is evertime i'm pushing the new value it overrides me the old one.

<form action="">
  fname:<input type="text" name="fname" id="fname"><br>
  lname:<input type="text" name="lname" id="lname"><br><br>
  <select name="selectProduct"><br>
    <option value="p1">product1</option>
    <option value="p2">product2</option>
    <option value="p3">product3</option>
  </select><br>
  <select name="selectColor"><br>
    <option value="c1">color1</option>
    <option value="c2">color2</option>
    <option value="c3">color3</option>
  </select><br><br>
  <button type="button" id="saveAndOrder" name="saveAndOrder" >Save</button>
  <button type="button" id="sendOrder" name="sendOrder" >Send</button>
</form>
<div id="result"></div>

javascript:

var order = []
$('#saveAndOrder').on('click', function(){
    var myData = $('form').serializeArray();
  order.push(myData);
});

$('#sendOrder').on('click', function(){
    $.ajax({
    url: 'myphp.php',
    method: 'POST',
    data: order,
    success: function(data) {
    $('#result').html('Thank you...');
    }
  });
});

Answer 1

try something like thing keep it as seperate forms and serialize and send them i didnt check on code please verify

html

<form action="" id="form1">
  fname:<input type="text" name="fname" id="fname"><br>
  lname:<input type="text" name="lname" id="lname"><br><br>
  </form>
<form action="" id="form2">  
  <select name="selectProduct"><br>
    <option value="p1">product1</option>
    <option value="p2">product2</option>
    <option value="p3">product3</option>
  </select><br>
  <select name="selectColor"><br>
    <option value="c1">color1</option>
    <option value="c2">color2</option>
    <option value="c3">color3</option>
  </select><br><br>
  <button type="button" id="saveAndOrder" name="saveAndOrder" >Save</button>
  <button type="button" id="sendOrder" name="sendOrder" >Send</button>
  </form>
<div id="result"></div>

javascript

var order = []
$('#saveAndOrder').on('click', function(){
alert("save");
    var myData = $('form2').serializeArray();
  order.push(myData);
});

$('#sendOrder').on('click', function(){
var myData = $('form1').serializeArray();
var data = []
data.push(myData);
data.push(order);
alert(data);
    $.ajax({
    url: 'myphp.php',
    method: 'POST',
    data: data,
    success: function(data) {
    $('#result').html('Thank you...');
    }
  });
});