1

我有一个包含多个元素的 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的原因。

那么，我该怎么做才能让它发挥作用呢？有什么建议么？

4

2 回答 2

0

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

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

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

于 2013-10-11T17:43:56.063 回答
0

好吧，毕竟在提交表单时进行 AJAX 调用对我来说并没有锻炼，但我确实成功地以某种方式从服务器端的 HTML 表中获取数据！现在对我有用的解决方案是向表单添加隐藏字段。基本上，当用户输入值并按下“添加”按钮时，我正在向<input>表单添加隐藏字段，所以它在“添加”按钮的 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!");  
}}

在这里，请注意我在 JS 文件中将counter1定义为 globel 变量。测试人员被分配给具有属性display:none<div>的标签。更多的是，我动态分配标签的名称属性（例如，这里是dTable10、dTable11等），所以在服务器端访问它会更容易！最后，在提交表单之前，我将counter1变量传递给隐藏字段，就像我在上面所做的那样，<input>

$("#tester").append("<input type='text' name='counter1' value='"+counter1+"'>"); form.submit();

服务器端： 

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

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

这里基本上我将这个值附加到一个字符串变量中。它会遍历每个项目，并附加到变量中。
所以，这对我来说是现在的解决方案！但是，如果 AJAX 调用在提交表单时起作用（我之前试图做的），我会更满意！

于 2013-10-16T17:50:51.957 回答