onsubmit表单值到php sql请求

时间:2013-06-17 22:09:01

标签: php javascript html ajax web

我有一个表单中的许多输入值,我想使用ajax代码将它们推送到PHP代码。这是我正在尝试做的一个例子。我有test1和test2,当用户按下搜索按钮时我想跟踪。

现在它只获取test1“getResults(this.test1.value)”的值。我想知道如何使用相同的方法获取test2值。

<form name="input" action="" method="" onsubmit="getResults(this.test1.value); return false;">

  <input type="text" name="test1">

<select id="test2" name="test2">
  <option value="">Make a choice ...</option>
  <option value="c1">choice 1</option>
  <option value="c2">choice 2</option>
  <option value="c3">choice 3</option>
</select>    


<input type="submit" value="Search">

</form>

<div id="here"><b></b></div> 

getresults方法,现在它只支持一个字符串,如何添加更多参数?

 function getResults(str)
 {
 if (str=="")
   {
   document.getElementById("here").innerHTML="";
   return;
   } 
 else (window.XMLHttpRequest)
   {
   xmlhttp=new XMLHttpRequest();
   }
 xmlhttp.onreadystatechange=function()
   {
   if (xmlhttp.readyState==4 && xmlhttp.status==200)
     {
     document.getElementById("here").innerHTML=xmlhttp.responseText;
     }
   }
 xmlhttp.open("GET","info.php?q="+str,true);
 xmlhttp.send();
 }

最后,更重要的是我如何从info.php中检索值?非常感谢

<?php
$test1 = $_GET['test1'];
echo "$test1";

$test2 = $_POST["test2"];
echo "$test2";
?> 

2 个答案:

答案 0 :(得分:0)

它不同时拉两个值的原因是因为1)您需要向表单添加方法。您可以发布或获取,而不是两者.2)在您的php中,您从get数组定义测试1,从post数组定义变量2。如果从get数组中生成$ test2,它应该可以工作。

答案 1 :(得分:0)

您不需要将参数传递给函数。我们可以在那里获取表单字段值。

<html>
    <head>
    <script type="text/javascript">
        function getResults()
        {
            var xmlhttp;
            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("here").innerHTML=xmlhttp.responseText;
                }
            }

            var data = "test1="+document.getElementById("test1").value+"&test2="+document.getElementById("test2").value;

            xmlhttp.open("POST","info.php",true);
            xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            xmlhttp.send(data);
        }
    </script>
    </head>
    <body>
        <form name="input" action="" method="" onsubmit="getResults(); return false;">

        <input type="text" name="test1" id="test1">

        <select id="test2" name="test2">
            <option value="">Make a choice ...</option>
            <option value="c1">choice 1</option>
            <option value="c2">choice 2</option>
            <option value="c3">choice 3</option>
        </select>    

        <input type="submit" value="Search">

        </form>

        <div id="here"><b></b></div>
    </body>
</html>

info.php文件中执行此操作以获取通过Ajax发送的变量,

<?php
    $test1 = $_POST["test1"];
    $test2 = $_POST["test2"];

    echo "Test1: ".$test1."<br/>Test2: ".$test2."";
?>