Php 当AJAX用于基于下拉菜单选择显示数据时，按钮不起作用_Php_Html_Mysql

Php 当AJAX用于基于下拉菜单选择显示数据时，按钮不起作用

php html mysql

Php 当AJAX用于基于下拉菜单选择显示数据时，按钮不起作用,php,html,mysql,Php,Html,Mysql,我有一个we页面（index.html），用户可以从下拉菜单中选择选项。根据选择，数据将从数据库中提取，并使用AJAX显示在同一页面上（第二个文件称为getParameter.php）。一切正常。现在，我尝试添加一个按钮，以便打开一个新页面，用户可以编辑并向数据库发送新值。但是按下按钮什么也不做。我尝试了其他html文件。它在其他任何地方都有效。需要帮忙吗 Index.html //AJAX <script> function showParameterData(

我有一个we页面（index.html），用户可以从下拉菜单中选择选项。根据选择，数据将从数据库中提取，并使用AJAX显示在同一页面上（第二个文件称为getParameter.php）。一切正常。现在，我尝试添加一个按钮，以便打开一个新页面，用户可以编辑并向数据库发送新值。但是按下按钮什么也不做。我尝试了其他html文件。它在其他任何地方都有效。需要帮忙吗

Index.html

//AJAX
 <script>

        function showParameterData(str) {
            if (str == "") {
                document.getElementById("txtHint").innerHTML = "";
                return;
            } else {
                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 (this.readyState == 4 && this.status == 200) {
                        document.getElementById("txtHint").innerHTML = this.responseText;
                    }
                };
                xmlhttp.open("GET","getParameterData.php?q="+str,true);
                xmlhttp.send();
            }
        }
</script>



//drop down option selection

<body>

//showParameterData() is the function
<form>
            <select name="Device" onchange="showParameterData(this.value)">
              <option value="">Select</option>
              <option value="1">Device A </option>
              <option value="2">Device B </option>
              <option value="3">Device C </option>
              <option value="4">Device D </option>
              <option value="5">Device E </option>
              <option value="6">Device F </option>
            </select>
            </form>





//bitton to edit and  send data

<div class="edit_button_class" style= "float:right;">
  <form action="edit.html" method="get" target="_blank">
    <input type="submit" name="submit" id ="mybutton1" value="Click to Edit" />
  </form>
</div>


<div id="txtHint"></div>

</body>

//AJAX
函数showParameterData（str）{
如果（str==“”）{
document.getElementById（“txtHint”）.innerHTML=“”；
返回；
}否则{
if（window.XMLHttpRequest）{
//IE7+、Firefox、Chrome、Opera、Safari的代码
xmlhttp=新的XMLHttpRequest（）；
}否则{
//IE6、IE5的代码
xmlhttp=新的ActiveXObject（“Microsoft.xmlhttp”）；
}
xmlhttp.onreadystatechange=函数（）{
if（this.readyState==4&&this.status==200）{
document.getElementById（“txtHint”）.innerHTML=this.responseText；
}
};
open（“GET”，“getParameterData.php？q=“+str，true”）；
xmlhttp.send（）；
}
}
//下拉选项选择
//showParameterData（）是函数
挑选
装置A
装置B
装置C
装置D
设备E
装置F
//bitton可编辑和发送数据

//getParameter.php


<?php
$q = intval($_GET['q']);
include ("DBconnect.php");

$conn= mysqli_connect( $dbhost, $dbuser, $dbpass, $db ) or die("Could not connect: " .mysqli_error($conn) );
$sql="SELECT * FROM parameter WHERE ID = '".$q."'";
$result = mysqli_query($conn,$sql);

while($row = mysqli_fetch_array($result)) {
$price = $row['price'];
$version = $row['version'];}

echo '<table>';
echo "<tr>
        <th>Price of the Device :</th>
        <td > $price </td>
</tr>";

echo "<tr>
        <th>version of the Device :</th>
        <td > $version </td>
</tr>";
echo '</table>';
echo '</div>';


您在URL中看到的内容是get参数。通过使用class='get'方法，您告诉表单以这种方式提交
这样做的目的是将输入的所有名称及其值发送到URL中，并将它们“附加”到您选择的操作页面
例如，单击该按钮将发送到edit.html，其中包含获取参数submit和该参数的值“Click to edit”。任何具有name属性的内容都将作为get参数发送。提交输入不需要名称
如果使用“提交”按钮将select放入表单中，它将发送select的参数，这意味着您可以在编辑页面中使用它
<div class="edit_button_class">
  <form action="edit.html" method="get" target="_blank">
    <select name="Device" onchange="showParameterData(this.value)">
      <option value="">Select</option>
      <option value="1">Device A </option>
      <option value="2">Device B </option>
      <option value="3">Device C </option>
      <option value="4">Device D </option>
      <option value="5">Device E </option>
      <option value="6">Device F </option>
    </select>
    <input type="submit" id ="mybutton1" value="Click to Edit" />
  </form>
</div>


挑选
装置A
装置B
装置C
装置D
设备E
装置F

我从输入中删除了这个名称，因为这会导致它作为GET参数发送。使用上面的命令，您将被发送到/edit.html？submit=单击+到+编辑，然后您可以在编辑页面中使用它来获取所需内容
希望这有帮助。
您在URL中看到的内容是get参数。通过使用class='get'方法，您告诉表单以这种方式提交
这样做的目的是将输入的所有名称及其值发送到URL中，并将它们“附加”到您选择的操作页面
例如，单击该按钮将发送到edit.html，其中包含获取参数submit和该参数的值“Click to edit”。任何具有name属性的内容都将作为get参数发送。提交输入不需要名称
如果使用“提交”按钮将select放入表单中，它将发送select的参数，这意味着您可以在编辑页面中使用它
<div class="edit_button_class">
  <form action="edit.html" method="get" target="_blank">
    <select name="Device" onchange="showParameterData(this.value)">
      <option value="">Select</option>
      <option value="1">Device A </option>
      <option value="2">Device B </option>
      <option value="3">Device C </option>
      <option value="4">Device D </option>
      <option value="5">Device E </option>
      <option value="6">Device F </option>
    </select>
    <input type="submit" id ="mybutton1" value="Click to Edit" />
  </form>
</div>


挑选
装置A
装置B
装置C
装置D
设备E
装置F

我从输入中删除了这个名称，因为这会导致它作为GET参数发送。使用上面的命令，您将被发送到/edit.html？submit=单击+到+编辑，然后您可以在编辑页面中使用它来获取所需内容
希望这能有所帮助。
它能起作用。很好，谢谢。如果我有两个下拉列表呢。让我们假设清单1-机械设备。清单2-电气设备。我只需要两个列表的一个编辑按钮。在edit.html页面中，我想提供再次选择是电气还是机械，然后选择设备名称。它可以工作。很好，谢谢。如果我有两个下拉列表呢。让我们假设清单1-机械设备。清单2-电气设备。我只需要两个列表的一个编辑按钮。在edit.html页面中，我想提供再次选择是电气还是机械的选项，然后选择设备名称。