javascript - 从 db 调用 ajax 后，表单中的按钮不起作用

Question

我已经在 google、here 和 w3schools 上进行了搜索，但无论如何我都找不到这个答案。甚至在“可能已经有了答案的问题”中也不行。

我正在努力学习更多关于 AJAX 的知识，但我已经停滞在本指南中 W3schools AJAX database

我可以开始工作的所有指南，但是当我尝试使其适应我的需要时，它出错了。我想要的是，当我到达“getuser.php”时，我希望能够更新此文件中的数据库。如果可能的话，我不会带着我找到的结果离开这个页面。我从这个站点之前的下拉表中选择。应该更新数据库的 php 文件有效(在普通页面上尝试过它们，一切都很好)。我目前的解决方法是添加一个按钮，打开第二个窗口来更新信息。

当我到达这一点时:

<?php
$q = intval($_GET['q']);
include 'db.php';
$con = new mysqli($servername, $username, $password, $dbname);
if (!$con) {
    die('Could not connect: ' . mysqli_error($con));
}

mysqli_select_db($con,"webhelp");
$sql="SELECT * FROM advisors WHERE id = '".$q."'";
$result = mysqli_query($con,$sql);

while($row = mysqli_fetch_assoc($result)) {
    echo "<table><tr><td>Phone</td><td>" . $row['phone'] . "</td>
          <td><form action='addphone.php' method='post'>
          <input type='hidden' name='id' value='".$q."'>        
          <td><input type='text' name='phone'></td>
          <td><input type='submit' value='Update'></td>
          </form></td></tr></table>";

    echo "<tr><td>LoB</td><td>" . $row['lob'] . "</td>
          <td><form action='addlob.php' method='post'>
          <input type='hidden' name='id' value='".$q."'>
          <td><select name='lob'>
          <option value='". $row['lob'] ."'>" . $row['lob'] . "</option>".

          $sql = "SELECT * FROM lob";
          $result = $con->query($sql);

          while($row = $result->fetch_assoc()) {
             echo "<option value='" . $row["lob"] . "'>" . $row["lob"] . "</option>"; }
              "</select></td>
              <td><input type='submit' value='Update'></td>
              </form>
              </tr>";

     echo "<tr><td>Country</td><td>" . $row['country'] . "</td>
          <td><form action='addcountry.php' method='post'>
          <input type='hidden' name='id' value='".$q."'>
          <td><select name='country'>
          <option value='". $row['country'] ."'>" . $row['country'] . "</option>".

          $sql = "SELECT * FROM country";
          $result = $con->query($sql);

          while($row = $result->fetch_assoc()) {
             echo "<option value='" . $row["country"] . "'>" . $row2["country"] . "</option>" ; }
            "</select></td>
            <td><input type='submit' value='Update'></td>
            </form>
            </tr>"; 

  }
echo "</table>";

mysqli_close($con);
?>

“更新”按钮不起作用。不管我把文件放在哪里(同一个文件夹，不同的文件夹)等等。但是，如果我添加一个带有链接的按钮，则该按钮将起作用。但是一旦它在一个表中，加上 method="post"的形式，它就会把它搞砸。

我做错了什么？

或者，是否可以在这里制作一个按钮，将 $id 传送到一个小的弹出窗口？ (我可以在新窗口中打开它，但我不能选择窗口应该有多大)

Answer 1

您想对所有 3 个表单执行此操作。我举第一个例子。

表格

   echo "<form class='addPhoneForm' action='addphone.php' method='post'>
         <table>
         <tr>
          <td>Phone</td><td>" . $row['phone'] . "</td>
          <td><input class='phoneID' type='hidden' name='id' value='".$q."'></td>        
          <td><input class='phoneNumber' type='text' name='phone'></td>
          <td><input class='submitme' type='submit' value='Update'></td>
          </td>
          </tr>
         </table>
         </form>";

AJAX

$(document).ready(function(){
$(".submitme").click(function(){

//collect variables from input
var phoneID = $(".phoneID").val();
var phoneNumber = $(".phoneNumber").val();

// store in a string
var dataAddPhone = 'phoneID='+ phoneID + '&phoneNumber='+ phoneNumber;

// send to database
$.ajax({
type: "POST",
url: "addphone.php",
data: dataAddPhone,
cache: true,

//if success 
success: function(response){

//display message
   $(".displayMessage").html(response);

   //and reset form
       $(".addPhoneForm").trigger("reset");
}
});

return false;
});

});