javascript - 通过一个独立的按钮提交两个表单的数据并插入数据到DB

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>

现在我想请教各位 friend ，如何在“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); 来查看是否收到了所有正确的值。