javascript - 在表单提交时将客户端 HTML 表数据提取到服务器端 PHP 脚本

Question

我有一个包含多个元素的 html 表单。现在，我特别希望您注意的是两个保管箱，旁边还有一个“添加”按钮。因此，一旦用户从下拉列表中进行选择并按下“添加”按钮，它就会将数据添加到表中，并且该表格将显示在这些下拉框的正下方。因此，基本上用户可以通过下拉列表添加多个数据并在表格中查看它。现在，当我想在提交表单时从该表中检索数据时，问题就出现了。我不确定 $_PHP[''] 是否能够从我创建的表中获取数据。

因此，作为替代方案，我尝试在提交表单时使用 AJAX 传递数据!
HTML:

<form name="input" id="formToSubmit" action="process-host.php" method="post" enctype="multipart/form-data">
    /* Form data goes here*/
<input type="button" class="submit" value="Submit Request" onclick="valField(this.form); "/> 

valField() 方法验证 并提交表格。
JS:

function valField(form)     //field validation for the form before submit

{
   /*Validation code goes here*/

      //if(validated){
     $("#formToSubmit").submit(function(e) {       //this.submit(function(e)){
             e.preventDefault();

        var  tableForNew = new Array();   //to store the infoDisplayTable data

        $('#infoDisplayTable1l tr').each(function() {
        tableForNew.push($(this).find("td:first").html());
        tableForNew.push($(this).find("td:second").html());
        });



        // Get all INPUT form data and organize as array
        var formData = $(this).serializeArray();

        // Encode with JSON
        var tableForNew1 = JSON.stringify(tableForNew);


        // Add to formData array
        formData.push({name: 'tableForNew', value: tableForNew1});




        // Submit with AJAX
        $.ajax({
            url: "./process-host.php",
            data: formData,
            type: 'post',
            success: function() {
              alert("BOOM! IT WORKED;");  
            }
        });



    });

在服务器端，在process-host.php中，
$tableForNew = json_decode($_POST['tableForNew']);

这显然行不通，所以当我使用 Firebug 进行调试时，我可以看到它没有进入提交函数。它只是提交表单，而不通过内部代码!这就是为什么它不将任何表数据发布到服务器并给出错误通知 Undefined index: tableForNew 。

那么，我可以在这里做什么来让它工作呢？有什么建议吗？

Answer 1

当您使用内联 onclick 处理程序时，您需要返回 false，否则将触发默认操作(提交表单)。

但是，您现在进行此设置的方式 valField 函数将仅定义提交处理程序并返回 - 这意味着即使您返回 false，您也必须再次单击该按钮才能触发提交事件，这还将触发 valField 函数并重新定义提交处理程序(起始!)。

您应该删除按钮元素上的 onclick 处理程序，将提交处理程序移出 valField 函数，并且仅在表单有效时才执行 ajax 调用。