如何保存html表单并通过ajax发送到php

时间:2017-07-19 13:10:50

标签: javascript php jquery html ajax

每次单击按钮保存时,如何在数组中保存具有不同值的表单。在那之后,当我完成订单时,我点击按钮发送整个数组,存储的信息通过ajax发送到php。

它应该看起来像var order = [fname: .... , lname: ..., 1.order:{product:p1, color:c3}, 2.order:{product:p3, color:c2}, 3.order... and so one] 这样做甚至可以做到这一点还是有更好的解决方案?我没有机会连接到mysql

这是我在jsfiddle的例子:https://jsfiddle.net/4acj5wab/ 我的问题是暂时的,我推动新的价值,它会覆盖旧价值。

<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...');
    }
  });
});

1 个答案:

答案 0 :(得分:0)

尝试类似的东西保持它作为单独的形式和序列化并发送它们我没有检查代码请验证

HTML

if(!empty($whatsalesprsn)){
 $whatsalesprsn = $_POST['Name'];
    if ($whatsalesprsn == "Joe") { $region = "East"; }
    if ($whatsalesprsn == "Jack") { $region = "West"; }
    if ($whatsalesprsn == "Jerry") { $region = "North"; }
    if ($whatsalesprsn == "Jimmy") { $region = "South"; }
    if (isset($region)) {
        $query = "Select * from salesdata where salesregion = '$region'";
        $db->setQuery($query);
        $rows = $db->loadColumn();
        $output = array();
        for ($i = 0; $i <= 3; $i++) {
        $column = $db->loadColumn($i);
        array_push($output, $column);
    }
    $data = json_encode($output[0]);
}

的javascript

<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>