php - 将充满数据的 div 从一个简单的表单附加到包含所有分组并准备发布的 div 的表单

Question

所以这是交易:

我有一个订单页面，我使用两种形式。

第一个表单包含一个订单项的输入数据，当我按确定时，我将通过 onsubmit=send_item_data(this) 将表单的输入数据传递给 javascript，最后我将 return false; 在 send_item_data 函数中，因此它不会被发布。

在第二个中，我想在 div 组中追加/减去以前的数据(这样我可以轻松添加或删除它们)但我想不出(或找不到)将来自的数据分组的解决方案一个 div 中的第一个表单并将该子 div 附加到第二个表单。

最后，按一下按钮，第二个表单将发布所有 div 的数据，我将使用 PHP 后端代码处理它。

代码体:

<form action="" id="first_form" method="post" onsubmit="return send_item_data(this)"> 

    <div id="Select_list">
        <select blah blah>
            ---bunch of options---
        </select>
    </div>

    <div id="extras">
                ---Some extras that you can choose by a checkbox input (I generate it via PHP)---
                example:
                <input name="checkbox[<?php echo $row['column_data_from_query']?>]" type="checkbox" value="checked">
    </div>

            --->Possibly two more input fields here<---

    <input type="button" value="clear" onclick="clear_form()">
    <input type="submit" value="OK">
</form>

<form action="" id="finalize_order_form" method="post"> 
   --->This is the second form<---
   --->In here I want to put the data from the first form so i can handle them by group<---

    if I click OK three times in the first form there should be three groups here that contain each form's data
    <input type="submit" class="button" value="Finallize order"/>
</form>

我主要使用 PHP Mysql 和 Javascript(包括 AJAX，不是 jQuery)。

Answer 1

因此，您希望在第二个表单中列出订单商品，就像结帐前的购物车一样。如果为此使用 div，它们将不会与 POST 数据一起提交到服务器 - 它们将仅显示。因此，您需要遵循罗伯特的建议，并在每次添加/删除项目时将第一种形式的数据保存到数据库中(除了他的其他原因，例如不丢失客户的 session 信息)。这样，当他们单击“确认订单”时，数据库就已经是最新的了。或者，您需要将“确认订单”按钮连接到一个 JS 函数，该函数将 div 转换回 JSON 并将其发布到服务器以存储在数据库中。

就从第一个表单的数据创建仅显示的 div 而言，您的 send_item_data 函数需要遍历所有表单的输入，获取它们的值，然后将它们添加到 div，但您希望它们显示。然后你可以将 div 插入第二种形式。由于您将“this”传递给函数，它是表单对象本身，您可以通过类似的方式获取输入:

var inputs = this.getElementsByTagName("input");
for(var i = 0; i < inputs.length; i++) {
    if(inputs[i].type == 'submit') continue; //ignore the Submit button
    var name = inputs[i].name, value = inputs[i].value;
    ---use the name and value of this input to construct a span or something to insert inside your div---
}
---now you can insert the div into the 2nd form---