我可以使用AJAX将SUBMIT按钮或隐藏的INPUT添加到PHP表单中吗？

Question

大家好，我需要我的AJAX结果将字段添加到表单中，或者添加“提交”按钮以完成表单。

我的AJAX结果显示在标准HTML表单（来自PHP文件）中的DIV中。 当返回到FORM标签中时，AJAX结果（例如隐藏的输入）是否可以包含在FORM POST中？

我正在使用标准JavaScript（从发布的“ livesearch”改编而成）从AJAXresults.php获取AJAX结果，效果很好-我的AJAX结果确实返回OK，只是我的表单不起作用！ JavaScript是：

function showResult(str)
{
if (str.length<4)
  {
  document.getElementById("suburbmatch").innerHTML="Type more than 4 letters...";
  return;
  }
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  } 
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("suburbmatch").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","AJAXresults.php?suburbtext="+str,true);
xmlhttp.send();
}

myphp.php包含如下形式：（请注意在FORM标签内加载AJAX结果的DIV）

<form action="myphp.php" method="POST">

 <input type="text" name="addressline1">
 <input type="text" name="addressline2">
 <input type="text" name="suburb" onkeyup="showResult(this.value)">

  <div id=suburbmatch></div>  // AJAX results display here

</form>

AJAXresults.php包括一个脚本，该脚本查询数据库，然后将结果作为隐藏的输入字段返回，以及一个SUBMIT按钮：

echo ('<input type="hidden" name="suburbID" value="'.$row['ID'].'">');
echo ('<input type="submit" name="submit" value="');
echo ($row['suburb'].' '.$row['state'].' '.$row['zipcode']);
echo ('"><br>');

该代码在WHILE循环中，因此匹配在myphp.php上输入的“ suburb”文本中键入的文本的“ suburbs”将作为显示郊区/州/邮政编码的按钮加载。 当您单击它时，它应该在myphp.php上提交整个表单，包括AJAX结果中隐藏的INPUT。

我可以以文本形式返回结果，并使用$ _GET将数据超链接，例如：（a href = myphp.php？result = x），但随后它将刷新页面并重置其他表单值：P

Answer 1

答案是肯定的！

使用AJAX ，JavaScript可以获取HTML表单元素 （例如SUBMIT按钮或隐藏的INPUT），甚至更好的结构化数据（例如对象，如JSON字符串），然后创建表单元素并将其添加到HTML / PHP中形成。

仅作记录，这就是我解决问题的方式：

首先，我切换到jQuery以使用$.get()而不是XMLHttpRequest处理AJAX函数。 这使我能够处理错误以及其他优点，例如更好的跨浏览器兼容性。

关于将元素添加到表单中，我实际上真正需要的是用户输入，以便在发送表单之前选择匹配的地址 （无论表单如何发送-稍后我的确也将使用AJAX来执行此功能，使用$.post() ）。 一旦用户从匹配地址列表中选择了正确的地址，便会创建一个隐藏的输入 （具有匹配的地址ID号），并出现一个SUBMIT按钮，以便用户可以提交表单。

更多详情...

当用户在郊区字段中键入时，JavaScript函数showResult()在onKeyUp上触发，并返回匹配地址的列表：

// AJAXresults.php code in the WHILE loop:
echo '<li onclick="chooseThisAddress('.$row['ID'].')">'.$row['street'].', '.
$row['suburb'].' '.$row['state'].' '.$row['zipcode'].'</li>';

// which will output, in this example:
<li onclick="chooseThisAddress(64412)">1 Market St, Sydenham NSW 2044</li>
<li onclick="chooseThisAddress(64373)">1 Market St, Sydney NSW 2000</li>

用户单击正确的地址，并触发一个新函数chooseThisAddress() （将地址ID号传递给它），该函数仅隐藏地址匹配列表，然后创建隐藏的输入 （例如： <input type="hidden" name="addressID" value="64412"> ）和一个SUBMIT按钮，都使用jQuery的.append()方法（将新的表单元素附加到表单）。

那么最初的问题是什么呢？

简而言之，从用户的角度来看，我在思考表单的工作方式，这使我想到让AJAX返回一堆提交按钮。 从那以后，我发现了许多以不同的方式进行此操作的方法，但这就是我最终完成该操作的方法，以使其既实用又美观。

Answer 2

您为什么不只通过ajax来提交此表格。 这应该解决您的刷新问题

Answer 3

问题是你要回来

echo ('<input type="hidden" name="suburbID" value="'.$row['ID'].'">');

在WHILE循环中。 这意味着您将拥有多个具有相同name="suburbID"和不同值的html元素。 提交表单时，您将始终获得最后一个表单的值，该值将覆盖其他表单的值。