通过一个独立的按钮从两个表单提交数据并将数据插入数据库

Question

我正在开发基于 Wordpress 构建的项目（由于友好的权限和权限系统，我正在使用 WP），基本上它是由我自己用 PHP 编写的，在我自己的单页上带有一些 javascript 元素。现在我需要你的帮助。我通过我的 PHP 脚本生成了两个表单。每个表单的模板都在 MySQL DB 表中。这是因为对于我的电脑不太熟练的同事，在没有我帮助的情况下需要编辑表格的每个表格中的每个特定行都可以进行友好的编辑和管理。所以我有一些表单管理页面，同事做了一些更改，保存它，脚本将生成编辑后的表单。它完美地工作。脚本生成类似下面的东西（不要看乱七八糟的代码，它只是没有 css 等的测试版）

<form id="f1" method="POST" class="form-product-item" style="display: block;">
<fieldset form="f1" name="f1_f">
    <legend> &nbsp; FORM 1 &nbsp; </legend>
    <table style="width: 320px; max-width: 320px; float: left; margin: 5px">
        <tr class="optional f1r1" name="f1r1_v" style="display: block;" >
            <td style="width: 120px; min-width: 120px; max-width: 120px; height: 48px; max-height: 48px;">
                <div class="optional f1r1" name="f1r1_v" style="display: block;" class="hidden-txt">Row 1 Form 1: </div>
            </td>
            <td style="width: 140px; min-width: 140px; max-width: 140px">
                <input type="text" class="optional f1r1" name="f1r1_v" style="display: block;" class="hidden-txt" placeholder="Row 1 Form 1" size="15" />
            </td>
            <td style="width: 60px; max-width: 60px; max-width: 60px">suffix</td>
        </tr>
    </table>

    <div style="clear: both"></div>
</fieldset>

<form id="f2" method="POST" class="form-product-item" style="display: block;">
<fieldset form="f2" name="f2_f">
<legend> &nbsp; FORM 2 &nbsp; </legend>
<table style="width: 320px; max-width: 320px; float: left; margin: 5px">
    <tr class="optional f2r1" name="f2r1_v" style="display: block;" >
        <td style="width: 120px; min-width: 120px; max-width: 120px; height: 48px; max-height: 48px;">
            <div class="optional f2r1" name="f2r1_v" style="display: block;" class="hidden-txt">Row 1 Form 2: </div>
        </td>
        <td style="width: 140px; min-width: 140px; max-width: 140px">
            <select id="f2r1_dm" name="f2r1_v" style="width: 120px">
                <option selected>- Choose -</option>
                <option>Option 1</option>
                <option>Option 2</option>
            </select>
        </td>
        <td style="width: 60px; max-width: 60px; max-width: 60px">suffix</td>
    </tr>
    <tr class="optional f2r2" name="f2r2_v" style="display: block;" >
        <td style="width: 120px; min-width: 120px; max-width: 120px; height: 48px; max-height: 48px;">
            <div class="optional f2r2" name="f2r2_v" style="display: block;" class="hidden-txt">Row 2 Form 2: </div>
        </td>
        <td style="width: 140px; min-width: 140px; max-width: 140px">
        <input type="text" class="optional f2r2" name="f2r2_v" style="display: block;" class="hidden-txt" placeholder="Row 2 Form 2" size="15" />
        </td>
        <td style="width: 60px; max-width: 60px; max-width: 60px">suffix</td>
    </tr>

    <div style="clear: both"></div>
</table>
</fieldset>

现在我想请教各位朋友，如何在“FORM 2”下方（表单标签之外）制作一个独立的提交按钮，该按钮一次提交来自两个表单的所有字段的值并将其插入数据库。我尝试了一些我在 stackoverflow 上找到的建议，但它们对我不起作用。 我对 PHP 和 Java、AJAX 非常了解，我非常粗略地了解。因此，对于一些建议或分步教程，我将不胜感激。 非常感谢您的帮助；）。

Answer 1

这是我能到达的最接近的地方：

在最后的表单外添加一个按钮：

<input type="button" name="submit" id="submit" value="submit">

你需要添加这个库：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

然后我们要做的是，当用户单击提交时，我们会将所有其他表单元素及其值克隆到您的第一个表单并提交。这样，在提交时，您的所有表单值都将从第一个表单传递。

<script type="text/javascript">
jQuery("#submit").click(function(e){
                $first_form = $("form").attr('id');
                $("form").each(function() {
                    $('#'+this.id + ' :input').not('#'+$first_form).clone(true).appendTo('#'+$first_form);
                        //getting all the selected options
                    var selects = $('#'+this.id).find("select");
                    $(selects).each(function(i) {
                        var select = this;
                        $('#'+$first_form).find("select").eq(i).val($(select).val());
                    });
                    //getting all the textarea values
                    var textareas = $('#'+this.id).find('textarea');
                    $(textareas).each(function(i) {
                        var textarea = this;
                        $('#'+$first_form).find("textarea").eq(i).val($(textarea).val());
                    });
                });
                $('#'+$first_form).submit(); 
            });
</script>

在表单被提交到的 PHP 上，您可以通过var_dump($_POST); 来查看您是否收到了正确的所有值。

Answer 2

在表单外添加一个按钮，并在其 onclick 中调用一个函数，例如 submitAll

window.onload = init;
function init() {
  document.forms[0].addEventListener('onsubmit',
        function{document.forms[1].submit();});
}

function submitAll(){document.forms[0].submit();}