想要通过“提交”按钮从“选择标记”获取价值

时间:2014-01-20 22:25:33

标签: javascript php html ajax dom

 <html>
    <head>
    <script>
    function showUser()
    {
    //var s=document.getElementById('uni');     //this also not working
    //var str=s.options[s.selectedIndex].value;
    var str=document.form.formList.value;
    if (str=="")
      {
      document.getElementById("txtHint").innerHTML="";
      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("txtHint").innerHTML=xmlhttp.responseText;
        }
      }
    xmlhttp.open("GET","getuser.php?q="+str,true);
    xmlhttp.send();
    }
    </script>
    </head>
    <body>
    <form  name="form">
    <select name="formList" id="uni" >
    <option value="">Select a person:</option>
    <option value="1">University 1</option>
    <option value="2">University 2</option>
    <option value="3">University 3</option>
    <option value="4">University 4</option>
    </select>
    <input  type="submit" value="Search" onsubmit="showUser()" >
    </form>
    <br>
    <div id="txtHint"><b>Person info will be listed here.</b></div>
    </body>
    </html>

 Want to get value from Select Tag by Submit button.....  

通过使用javascript然后发送到AJAX将该数据转发到userget.php文件以从SQL DATABASE获取数据 然后在网上显示。 拜托,我被困在这里有人告诉我,我做错了什么...... ??? 我想通过提交按钮来存储下拉列表中的值......

/////////////////服务器端代码///////////////////////////

<?php
$q = intval($_GET['q']);

$con = mysqli_connect('localhost','root','','degree');
if (!$con)
  {
  die('Could not connect: ' . mysqli_error($con));
  }

mysqli_select_db($con,"ajax_demo");
$sql="SELECT * FROM uni WHERE id = '".$q."'";

$result = mysqli_query($con,$sql);

echo "<table border='1'>
<tr>
<th>Id</th>
<th>Univeristy</th>
<th>Degree</th>
<th>Location</th>
<th>Rank</th>
<th>Fees</th>
</tr>";

while($row = mysqli_fetch_array($result))
  {
  echo "<tr>";               
  echo "<td>" . $row['Id'] . "</td>";
  echo "<td>" . $row['Univeristy'] . "</td>";
  echo "<td>" . $row['Degree'] . "</td>";
  echo "<td>" . $row['Location'] . "</td>";
  echo "<td>" . $row['Rank'] . "</td>";
  echo "<td>" . $row['Fees'] . "</td>";
  echo "</tr>";
  }
echo "</table>";

mysqli_close($con);
?>

3 个答案:

答案 0 :(得分:0)

如果您使用JQuery,您可能会执行以下操作:

$(document).ready(function(){
    $('#searchButton').click(function(){
        if ($('#uni').val()) {
            $.post(
                'getuser.php',
                {
                    q: $('#uni').val()        
                },
                function(personInfo){
                    if (personInfo) {
                        $('#txtHint').text(personInfo)
                    }
                }
            );
        } else {
            alert('Please select an option first.');
        }     
    });
});

只需将表单中的输入类型从提交更改为按钮,然后将ID添加为“searchButton”。

在服务器端脚本中,使用POST而不是GET:

$q = intval($_POST['q']);

答案 1 :(得分:0)

首先获得xmlhttp

的更可靠方法
function getXmlHttp(){ 
  var xmlhttp;
  try {
    xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
  } catch (e) {
    try {
      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (E) {
      xmlhttp = false;
    }
  }
  if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
    xmlhttp = new XMLHttpRequest();
  }
  return xmlhttp;
}

其次,正确的形式是做你想做的事情:

<form  name="form" onsubmit="showUser(); return false;">
  <select name="formList" id="uni" >
    <option value="">Select a person:</option>
    <option value="1">University 1</option>
    <option value="2">University 2</option>
    <option value="3">University 3</option>
    <option value="4">University 4</option>
  </select>
  <input  type="submit" value="Search" />
</form>

和showUser函数一样:

function showUser()
{
  //var s=document.getElementById('uni');     //this also not working
  //var str=s.options[s.selectedIndex].value;
  var str=document.form.formList.value;

  if (str=="")
  {
    document.getElementById("txtHint").innerHTML = "";
    return;
  }

  var xmlhttp = getXmlHttp();

  xmlhttp.onreadystatechange = function()
  {
    if (xmlhttp.readyState==4)
    {
      if(xmlhttp.status == 200) {
        document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
      } else {
        // add error handler here
      }
    }
  };
  xmlhttp.open("GET","/getuser.php?q="+str,true);
  xmlhttp.send();
}

答案 2 :(得分:0)

根本不需要打扰submit。这样就可以了:)

<input type="button" onclick="showUser();" value="Search" />