使用 PHP 和 Jquery 在模态文本框中显示值

Posted 2023-05-08

技术标签:

【中文标题】使用 PHP 和 Jquery 在模态文本框中显示值【英文标题】：Display value in modal text box using PHP & Jquery 【发布时间】：2020-10-02 09:40:24 【问题描述】：

我正在尝试使用 php 和 JQuery 将 SQL 数据库中的值显示到文本框中。正在检索这些值，但未显示在文本框中。我做错了什么？

<?php

require 'UpdateTimerSQL.php';

?>


<!DOCTYPE html>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>LiveData</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
 </head>
 <body>

<div class="container">
<h2>Ajax</h2>
<p>Update Timer</p>
<table class="table">
<?php
    $table = mysqli_query($connection, 'SELECT * FROM Timers');
    while($row = mysqli_fetch_array($table)) 
      ?>
        <tr id="<?php echo $row['ID']; ?>">
            <th>Timer_1</th>
            <td data-target="Timer_1"><?php echo $row['Timer_1']; ?></td>
              <th> 
            <a href="#" data-role="update" class="btn btn-primary" data-id="<?php echo $row['ID']; ?>">Update</a> 
             </th> 
        </tr>
     <?php
           
     ?>
    </table>

    <div class="container">


  <div class="text-center"></div>

</div>

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <label>Neutral Timer 1</label>
          <input type="hidden" id="ids" class="form-control">
          <input type="text" id="Timer_1" class="form-control">

        </div>
        <div class="modal-footer">
          <a href="#" id="save" class="btn btn-primary pull-right">Update</a>
          <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>


  <script>
$(document).ready(function()

  $(document).on('click', 'a[data-role=update]', function() 
    var id = $(this).data('id');
    //this(a tag)->tr(id)->td(data attr)->text
    var Timer_1=  $(this).closest('tr[id=' + id + ']').find("td[data-target='Timer_1']").text();
    //putting value in input box
    $('#Timer_1').val(Timer_1);
    $('#myModal').modal('toggle');
  );

编辑：感谢在这里回答它的用户，我能够在文本字段上显示值。但是，当我在单击“#save”后更改文本框值时，我无法更新 mySQL 表。我在这里做错了什么？

 //onclick of update button
    $(document).on('click', '#save', function() 
    //getting value of input box

    var ids = $(this).closest(".modal-body").find("#ids").val();
    var Timer_1= $(this).closest(".modal-body").find("#Timer_1").val();


    $.ajax(
        url : 'UpdateTimerSQL.php',
        method : 'POST' ,
        data : Timer_1: Timer_1, ids: ids,
        success : function(response)
            $("table").find("tr[id='" + ids + "']").find("td[data-target='Timer_1']").text(Timer_1);

        
      );

  );

UpdateTimerSQL.php

<?php
  $connection = mysqli_connect(...........);

  if(isset($_POST['ID']))
  $Timer_1= $_POST['Timer_1'];
  $ids = $_POST['ID'];

   $result = mysqli_query($connection,"UPDATE Timers SET
   Timer_1='$Timer_1' WHERE ID ='$ids'");
   if($result)
    echo 'data updated';
   

   
  ?>

【问题讨论】：

修复您的 HTML 布局，这可能会使事情正常工作。格式不正确的 HTML 通常会使更复杂的布局无法工作 @RiggsFolly 谢谢。对此感到抱歉。但主要问题存在于 【参考方案1】：

您的表格结构无效。另外，您的 Timer_1 无法找到所需的文本，这就是它无法正常工作的原因。

您的 php 代码应如下所示：

 <table class="table">
<?php
    $table = mysqli_query($connection, 'SELECT * FROM Timers');
    while($row = mysqli_fetch_array($table)) 
      ?>
        <tr id="<?php echo $row['ID']; ?>">
            <th>Timer 1</th>
            <td data-target="Timer_1">
                <?php echo $row['Timer_1']; ?>
            </td>
              <th> 
            <a href="#" data-role="update" class="btn btn-primary" data-id="<?php echo $row['ID']; ?>">Update</a> 
             </th> 
        </tr>
     <?php
           
     ?>
    </table>

这里是demo代码：

$(document).ready(function() 
  $(document).on('click', 'a[data-role=update]', function() 
    var id = $(this).data('id');
    //this(a tag)->tr(id)->td(data attr)->text
    var Timer_1 = $(this).closest('tr[id=' + id + ']').find("td[data-target='Timer_1']").text();
    //putting value in input box
    $("#ids").val(id)
    $('#Timer_1').val(Timer_1);
    $('#myModal').modal('toggle');
  );

  //onclick of update button
  $(document).on('click', '#save', function() 
    //getting value of input box
    var input_val = $(this).closest(".modal-body").find("#Timer_1").val();
    //getting hidden id 
    var ids = $(this).closest(".modal-body").find("#ids").val();
    //finding tr with same id and then update the td
    $("table").find("tr[id='" + ids + "']").find("td[data-target='Timer_1']").text(input_val);
    $('#myModal').modal('toggle');
  );
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />


<div class="container">
  <h2>Ajax</h2>
  <p>Update Timer</p>
  <table class="table">

    <tr id="1">
      <th>Timer 1</th>
      <td data-target="Timer_1"> Something</td>
      <th>
        <a href="#" data-role="update" class="btn btn-primary" data-id="1">Update</a>
      </th>
    </tr>
    <tr id="2">
      <th>Timer 1</th>
      <td data-target="Timer_1"> Something123</td>
      <th>
        <a href="#" data-role="update" class="btn btn-primary" data-id="2">Update</a>
      </th>
    </tr>


  </table>
  <div class="text-center"></div>

</div>

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <label>Timer 1</label>
          <input type="hidden" id="ids" class="form-control">
          <input type="text" id="Timer_1" class="form-control">
        </div>
        <div class="modal-footer">
          <a href="#" id="save" class="btn btn-primary pull-right">Update</a>
          <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>

【讨论】：

您好，非常感谢。我能够将 mySQL 值展示到示例中的文本字段上。但是当我尝试更新 mySQL 表时，它并没有得到更新。我究竟做错了什么？我已在“编辑”下更新了我的相关代码。这个$_POST['ID'] 应该是$_POST['ids'] 因为你在ajax 调用中传递了ids 作为参数而不是ID 谢谢你缺少的东西:)

以上是关于使用 PHP 和 Jquery 在模态文本框中显示值的主要内容，如果未能解决你的问题，请参考以下文章

虚拟键盘 jquery 在引导模式中显示不正确

jQuery 脚本在文本框中显示 NaN，如何删除 NaN？ [复制]

Jquery .scrollTop在模式框中不起作用

jQuery：如何突出显示输入框中的文本？

如何使用 jQuery 从文本框中的列表中显示选定的选项？