【发布时间】：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">×</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 谢谢。对此感到抱歉。但主要问题存在于