提交表单提交客户端HTML表格数据到服务器端PHP脚本

我有一个带有多个元素的html表单。现在，特别是我希望您关注的是两个Dropbox，除此之外还有一个“添加”按钮。因此，一旦用户从下拉列表中选择并按下“添加”按钮，它就会将数据添加到表格中，然后该表将显示在这些下拉框下方。因此，基本上用户可以通过下拉列表添加多个数据并在表格中查看它。现在，当表单提交时，我想从该表中检索数据时出现问题。我不确定$ _PHP ['']是否可以从我创建的表中获取数据。提交表单提交客户端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;"); 
      } 
     }); 



    });

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

这显然是不工作了，所以当我使用Firebug的调试，我可以看到它不在提交函数中。它只是提交表单，而不需要通过内部代码！这就是为什么它不发布任何表数据到服务器，并给出错误通知未定义的索引：tableForNew。

那么，我能在这里做些什么来使它工作？有什么建议么？

来源

2013-10-11 D4RK_PA5SENGER

你不需要为此使用AJAX。如果您将字段添加到表单中，则在您提交表单时将会发送这些字段。就浏览器而言，初始源代码中的元素与使用Javascript添加的元素没有区别。 – Barmar

那么，我将如何访问表中的数据？导致$ _POST ['infoDisplayTable1l']不会锻炼！ –

将数据放在窗体的隐藏输入字段中。 – Barmar

好吧，在提交表单的时候进行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!"); 
}}

这里，我定义C1的在JS文件globel变量注释。 测试仪被分配到<div>标识，其属性为display：none。更多的，我正在分配名称属性<input>动态标记（例如，这里是dTable10，dTable11等），所以它会更容易在服务器端访问它！
最后只提交我传递的形式之前C1的变量来隐藏字段，就像我做到了上面，
$("#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-16 17:50:51

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

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

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

来源

2013-10-11 17:43:56 markle976

嘿，所以我试着按照你所说的做，并且从** valField（）**方法中获得'$（'form'）。submit（function（））'函数，并且为提交按钮返回false ，以便它在按下时不会提交表单。 –

但是，仍然存在相同的问题，我可以在调试时看到Firebug中代码不通过submit（）方法的内部** AJAX调用函数（）**。它只是来到方法调用，然后从** jq-ui **文件执行几行，然后退出submit（）方法。我不明白为什么它没有通过内部函数，因为在技术上，一切似乎都是正确的！有关于此的任何想法？ –

ajax方法是异步的，所以它只设置一个函数来成功调用。尝试添加一个错误：函数处理程序。另外，你看看萤火虫（网络标签）中的网络活动，看看ajax请求是否正在解雇？ – markle976

提交表单提交客户端HTML表格数据到服务器端PHP脚本

回答

相关问题