Ajax的表单提交与提交按钮 [英] Ajax Form Submit with submit button

问题描述

这时候提交的（使用AJAX）

我有形式返回了一堆客户的详细资料。表单字段收集用户的ID，提交并返回结果。我想用一个提交按钮，而不是在文本框一个onchange但我无法提交文本框的值，并在东西回来了。

这似乎应该是简单，但我又是在需要一些帮助。

谢谢， @rrfive

表格：

 ＆LT;形式GT;
＆LT;强＆GT;客户编号：LT; / STRONG＆GT;
＆LT;输入名称=用户类型=文字级=textBox中最大长度=10/＆GT;
＆LT;输入类型=提交的onclick =showUser（this.form）;返回false;＆GT;
＆LT; /形式GT;
 

记者：

 ＆LT;脚本类型=文/ JavaScript的＆GT;
功能showUser（STR）
{
如果（STR ==）{
  的document.getElementById（txtHint）的innerHTML =。
  返回;
  }
如果（window.XMLHtt prequest）{
  XMLHTTP =新XMLHtt prequest（）;
  }
其他 {
  XMLHTTP =新的ActiveXObject（Microsoft.XMLHTTP）;
  }
    xmlhttp.onreadystatechange =功能（）
  {
  如果（xmlhttp.readyState == 4和＆安培; xmlhttp.status == 200）
    {
    的document.getElementById（txtHint）的innerHTML = xmlhttp.responseText。
    }
  }
xmlhttp.open（GET，包括/ fetchUser.php用户ID =？+ STR，真正的）;
xmlhttp.send（）;
}
＆LT; / SCRIPT＆GT;
 

PHP：

 ＆LT; PHP
定义（INCLUDE_CHECK，真正的）;
包括config.php文件;

$用户ID = $ _ GET [用户ID];
$ SQL =SELECT * FROM用户WHERE ID ='$用户ID。';
$结果= mysql_query（$ SQL）;

$ returned_rows = mysql_num_rows（$结果）;

    如果（$ returned_rows == 0）{
        回声 - 没有找到结果 - ';
    }
    其他 {
        而（$行= mysql_fetch_array（$结果））{
        回声＆LT; D​​IV CLASS ='列'＆gt;中;
        回声'＆LT;标签＆gt;名称：LT; /标签＆gt; 。 $行['lastName的']。 
        回声'＆LT; / DIV＆GT;';
        }
     }

则mysql_close（$ CON）;
？＆GT;
 

解决方案

您不必传递整个表单，就在用户输入。

表格：

 ＆LT;表格名称=MyForm的＆GT;
＆LT;强＆GT;客户编号：LT; / STRONG＆GT;
＆LT;输入名称=用户类型=文字级=textBox中最大长度=10/＆GT;
＆LT;输入类型=提交的onclick =showUser（document.myform.user.value）;返回false;＆GT;
＆LT; /形式GT;
 

在你的PHP，请记住你需要在数据库中查询使用前消毒的投入。阅读上 mysql_real_escape_string 或的 prepared声明

I've got form which when submitted (using AJAX) returns a bunch of client details. The form field collects the user's ID, submits and returns the results. I'd like to use a submit button rather than an onchange on the textbox but am unable to submit the textbox value and have the anything returned.

This seems like it should be simple but I'm again in need of some help.

Thanks, @rrfive

Form:

<form>
<strong>Client ID:</strong>
<input name="user" type="text" class="textBox" maxlength="10" />
<input type="submit" onclick="showUser(this.form); return false;"> 
</form>

JS:

<script type="text/javascript">
function showUser(str)
{
if (str=="") {
  document.getElementById("txtHint").innerHTML="";
  return;
  }
if (window.XMLHttpRequest) {
  xmlhttp=new XMLHttpRequest();
  }
else {
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
    xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","includes/fetchUser.php?userID="+str,true);
xmlhttp.send();
}
</script>

PHP:

<?php
define('INCLUDE_CHECK',true);
include 'config.php';

$userID=$_GET["userID"];
$sql="SELECT * FROM users WHERE ID = '".$userID."'";
$result = mysql_query($sql);

$returned_rows = mysql_num_rows ($result);

    if ($returned_rows == 0){
        echo '-- No results found --';
    }
    else {
        while($row = mysql_fetch_array($result)) {
        echo "<div class='column'>";
        echo '<label>Name:</label>' . $row['lastName'] . '
        echo '</div>';
        }
     }

mysql_close($con);
?> 

解决方案

You don't need to pass in the whole form, just the "user" input.

Form:

<form name="myform">
<strong>Client ID:</strong>
<input name="user" type="text" class="textBox" maxlength="10" />
<input type="submit" onclick="showUser(document.myform.user.value); return false;"> 
</form>

In your PHP, please remember you need to sanitise the input before using it in a database query. Read up on mysql_real_escape_string or prepared statements

这篇关于Ajax的表单提交与提交按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！