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

Posted 2023-02-24

【中文标题】从 db 调用 ajax 后表单中的按钮不起作用

【英文标题】：buttons in forms doesnt work after ajax call from db

【发布时间】：2018-02-28 16:10:54

【问题描述】：

我有搜索 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);
?>

“更新”按钮不起作用。我将文件放在哪里（相同文件夹，不同文件夹）等并不重要。但是，如果我在该按钮之外添加一个带有链接的按钮，那么该按钮将起作用。但是，一旦它在表格 PLUS 中，method="post" 的形式也会变得混乱。

我做错了什么？

或者，是否可以在这里制作一个按钮，将 $id 带到一个小的弹出窗口？ （我可以在新窗口中打开它，但我无法选择窗口的大小）

【问题讨论】：

html 旁注：<form> 不能成为 <table> 的子级。

所以只是为了确保我正确理解你。

【参考方案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;
);

);

【讨论】：

非常感谢！这说得通。明天我再回家的时候试试这个。 :)