Question

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

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

现在我想问你的朋友，如何在下面制作一个独立的提交按钮＆＃34; FORM 2＆＃34; （在表单标记之外）一次从两个表单的所有字段提交值并将其插入到DB。我尝试了一些在stackoverflow上找到的建议，但它们对我不起作用。我非常熟悉PHP和Java，AJAX我非常敏感地知道。所以，对于一些建议或一步一步的教程，我将非常感激。非常感谢您的帮助;）。

Answer 1

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

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

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

Answer 2

这就像我可以接近：

在表格末尾添加一个按钮：

<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);查看是否已收到所有正确的值。

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

2 个答案: