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

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

所以，作为一种替代方法，我尝试在表单提交时使用AJAX传递数据
HTML:

在服务器端，在process-host.php中，

$tableForNew=json_decode（$\u POST['tableForNew']）

这显然是行不通的，所以当我调试Firebug时，我可以看到它没有进入submit函数。它只需提交表单，而无需通过内部代码！这就是为什么它不向服务器发布任何表数据，并发出错误通知未定义索引：tableForNew

那么，我能在这里做些什么来让它工作呢？有什么建议吗？
当您使用内联onclick处理程序时，需要返回false，否则将触发默认操作（提交表单）

但是，按照目前的设置方式，valField函数将只定义提交处理程序并返回-这意味着即使返回false，您也必须再次单击按钮以触发提交事件，这也将触发valField函数并重新定义提交处理程序（inception！）

您应该删除button元素上的onclick处理程序，将submit处理程序移出valField函数，并且仅在表单有效时执行ajax调用
 好吧，提交表单时调用AJAX对我来说毕竟不太合适，但我确实成功地从服务器端的HTML表中获取了数据！现在对我有效的解决方案是在表单中添加隐藏字段。基本上，当用户输入值并按下“添加”按钮时，我在表单中添加隐藏的
字段，所以它位于“添加”按钮的onClick事件处理程序中！下面是这个函数的样子

function addData1(){

if($("#consumerDropDown").val() != "" && $("#authenticationTypeDropDown").val() != "")
{
    $("#infoDisplayTable1").show();
    $("#infoDisplayTable1").attr("disabled", false);

    $("#infoDisplayTable1").append("<tr><td >"+$("#consumerDropDown").val()+"</td><td>"+
            $("#authenticationTypeDropDown").val()+"</td></tr>");
            $("#tester").append("<input type='text' value='" +$("#consumerDropDown").val() + "----->"+$("#authenticationTypeDropDown").val() + "' name='dTable1"+ counter1+ "'>");

        counter1++;
}
else
{
    alert("Please make a valid selection from a drop-down before adding it to the list!");  
}}

函数addData1（）{
if（$（“#consumerDropDown”）.val（）！=”&&（$（“#authenticationTypeDropDown”）.val（）！=”）
{
$（“#infoDisplayTable1”）.show（）；
$（“#infoDisplayTable1”）.attr（“disabled”，false）；
$（“#infoDisplayTable1”）.append（“+$（“#consumerDropDown”）.val（）+”+
$（“#authenticationTypeDropDown”）.val（）+”；
$（“#测试仪”）。追加（“”）；
计数器1++；
}
其他的
{
警报（“请在将其添加到列表之前从下拉列表中进行有效选择！”）；
}}

这里，请注意，我已经在JS文件中将计数器1定义为globel变量。测试员的id被分配给属性为display:none的
标记。更详细地说，我正在动态地分配
标记的名称属性（例如，这里是dTable10、dTable11等），以便在服务器端更容易访问它
最后，在提交表单之前，我将把counter1变量传递到隐藏字段，就像我在上面所做的那样，
$（“#tester”）。追加（“”）；表单提交（）

服务器端：

    $counterA = intval($_POST['counter1']);

                for($i=0;$i<$counterA;$i++)
                {
                $createReq['comment'] .=  $_POST["dTable1"."{$i}"]."\n";
                } 

$counterA=intval（$_POST['counter1']）；
对于（$i=0；$i），您不需要为此使用AJAX。如果向表单中添加字段，则在提交表单时会发送字段。就浏览器而言，初始源中的元素与使用Javascript添加的元素之间没有区别。那么，我如何访问表中的数据呢？因为$\u POST['infoDisplayTable1l']将数据放在表单的隐藏输入字段中。如果你没有得到它，用户可以在表中插入无限多个条目，因此表不是静态的，而是动态的！因此，我不知道需要多少隐藏输入字段！如果键入$（“#formToSubmit”）进入firebug javascript控制台并按enter键返回元素还是空数组？嘿，所以我试着按照你说的做，得到了
$（'form'）.submit（function（））
函数方法，并为submit按钮返回false，这样它在按下表单时就不会提交表单。但是，仍然存在相同的问题，我可以在调试Firebug时看到代码没有经过submit（）的内部AJAX调用函数（）方法，它只调用方法，然后执行jqui文件中的几行，然后退出submit（）方法。我不明白为什么它没有经过内部函数，因为从技术上讲，这里的一切似乎都是正确的！对此有什么想法吗？ajax方法是异步的，所以它只设置了一个函数，以便在成功时调用。试着添加一个错误：函数处理程序。另外，您是否查看了firebug（net选项卡）中的网络活动要查看ajax请求是否被触发？好的，我放置了一个错误函数，但是正如您所说，当我检查firebug中的net选项卡时，我没有看到这个ajax请求被触发！只是没有执行submit（）函数中的代码！
function addData1(){

if($("#consumerDropDown").val() != "" && $("#authenticationTypeDropDown").val() != "")
{
    $("#infoDisplayTable1").show();
    $("#infoDisplayTable1").attr("disabled", false);

    $("#infoDisplayTable1").append("<tr><td >"+$("#consumerDropDown").val()+"</td><td>"+
            $("#authenticationTypeDropDown").val()+"</td></tr>");
            $("#tester").append("<input type='text' value='" +$("#consumerDropDown").val() + "----->"+$("#authenticationTypeDropDown").val() + "' name='dTable1"+ counter1+ "'>");

        counter1++;
}
else
{
    alert("Please make a valid selection from a drop-down before adding it to the list!");  
}}

    $counterA = intval($_POST['counter1']);

                for($i=0;$i<$counterA;$i++)
                {
                $createReq['comment'] .=  $_POST["dTable1"."{$i}"]."\n";
                }