0

嘿伙计们，我需要我的 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 包含这样的表单：（注意加载 AJAX 结果的 DIV，在 FORM 标记内）

<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 包含一个查询数据库然后将结果作为隐藏输入字段返回的脚本，以及一个提交按钮：

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 上的“郊区”文本输入中的文本匹配的“郊区”作为显示郊区/州/邮政编码的按钮加载。当您单击它时，它应该在 myphp.php 上提交整个表单，包括 AJAX 结果中隐藏的 INPUT。

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

4

3 回答 3

1

答案是肯定的！

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

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

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

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

更多详情...

当用户在郊区字段中输入内容时， 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 返回一堆提交按钮。从那以后，我发现了很多不同的方法，但这就是我最终完成它的方式，这样它既实用又美观。

于 2014-10-24T12:16:34.603 回答
0

问题是你要回来

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

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

于 2012-07-10T13:47:33.740 回答
0

你为什么不只通过 ajax 提交这个表单。这应该可以解决您的刷新问题

于 2012-07-10T12:50:38.943 回答