我正在使用PHP,我可以收集数据库表的信息并将其显示在我的网页中。
对于每一行,我显示一个按钮,该按钮导致模式弹出窗口包含一个包含WYSIWYG(我使用TinyMCE)的textarea,以便我可以添加有关该特定行的详细信息。
当我使用此脚本
时,这只适用于1行这是我的剧本:
<?php
include("connection.php");
if ($link->connect_errno > 0) {
die('Unable to connect to database [' . $link->connect_error . ']');
}
if (isset($_POST['savechanges'])) {
$results = $link->query("UPDATE mytalbename SET details='$_POST[textarea]' WHERE id=44");
}
?>
我的问题是:如何将每个行按钮的方式扩展到所有行。每个按钮都会弹出一个带文本区域的模态弹出窗口。从每个文本区域,我可以修改引用该特定行的“详细信息”列。
这是表单
中文本区域的代码<div class="modal-body">
<form action="" method="post" name="savechanges">
<textarea name="textarea"></textarea>
<button type="submit" class="btn btn-primary" name="savechanges"> Save changes</button>
</form>
</div>
在这里,我显示按钮:
<a class='btn btn-primary btn-sm get_info2' data-toggle='modal' data-target='#myModal2' name='job_id' value='[$job_id]'>Add Details</a>
<a class='btn btn-primary btn-sm get_info3' data-toggle='modal' data-target='#myModal3' name='job_id' value='[$job_id]'>View Details</a>
我附上图片:
[modal popup with textarea] [2]
----更新1 ----
$results = $link->query("UPDATE job SET details='$_POST[textarea]' WHERE id='$_POST[hidden]'" );
和
<div class="modal-body">
<form action="" method="post" name="savechanges">
<textarea name="textarea"></textarea>
<button type="submit" class="btn btn-primary" name="savechanges"> Save changes</button>
<input type="hidden" name="hidden" value=" . $row['id'] . ">
</form>
</div>
-----------更新2 ---------------
<?php
include("connection.php");
if ($link->connect_errno > 0) {
die('Unable to connect to database [' . $link->connect_error . ']');
}
if (isset($_POST['savechanges'])) {
$results = $link->query("UPDATE job SET details='$_POST[textarea]' WHERE id='44'" );
}
?>
---------------- UPDATE 3 --------------------
<div class="modal-body info_data2">
<form action="" method="post" name="savechanges">
<textarea name="textarea"> </textarea>
<button type="submit" class="btn btn-primary" name="savechanges"> Save changes</button>
<input type="hidden" name="hidden" value="<?php echo $row['id'];?>">
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div></div></div></div> </div>
<?php
include("connection.php");
if ($link->connect_errno > 0) {
die('Unable to connect to database [' . $link->connect_error . ']');
}
if (isset($_POST['savechanges'])) {
$results = $link->query("UPDATE job SET details='".$_POST['textarea']."' WHERE id=".$_POST['hidden']);
}
?>
---------------更新4 ------------所有代码
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.tinymce.com/4/tinymce.min.js"></script>
<script>tinymce.init({ selector:'textarea' }); tinyMCE.activeEditor.getContent();</script>
</head>
<body>
<!-- ------SCRIPT that fetch data from database and show table-->
<?php
include("connection.php");
if ($link->connect_errno > 0) {
die('Unable to connect to database [' . $link->connect_error . ']');}
if (isset($_POST['update'])) {
$results = $link->query("UPDATE customer SET status='$_POST[status]' WHERE id='$_POST[hidden]'");
}
$sql = "SELECT * from job";
if (!$result = $link->query($sql)) {
die('There was an error running the query [' . $link->error . ']');}
echo "
<table class='table'>
<thead>
<tr>";
/* Get field information for all columns */
while ($finfo = $result->fetch_field()) {
echo "
<th>" . $finfo->name . "</th>"; }
echo " </tr>
</thead>
<tbody>";
while ($row = $result->fetch_assoc()) {
$job_id = $row['id'];
echo "<form action='' method=post>";
echo "<tr class='info'>
<input type=hidden name=hidden value=" . $row['id'] . ">
<td>" . $row['id'] . "</td>
<td>" . $row['device'] . "</td>
<td>" . $row['model'] . "</td>
<td>" . $row['problem'] . "</td>
<td>
<select class='form-control col-sm-10' id='status' name='status'>
<option value='new' ". ($row['status'] == 'new'? 'selected ': '') .">New</option>
<option value='progress' ". ($row['status'] == 'progress'? 'selected ': '') .">Progress</option>
<option value='wait' ". ($row['status'] == 'wait'? 'selected ': '') .">Wait</option>
<option value='done' ". ($row['status'] == 'done'? 'selected ': '') .">Done</option>
<option value='close' ". ($row['status'] == 'close'? 'selected ': '') .">Close</option>
</select>
</td>
<td>
<button type='submit' class='btn btn-primary btn-sm' name='update'>Update</button>
</td>
<td>
<a class='btn btn-primary btn-sm get_info' data-toggle='modal' data-target='#myModal' name='job_id' value= '[$job_id]'>Customer Info</a>
<a class='btn btn-primary btn-sm get_info2' data-toggle='modal' data-target='#myModal2' name='job_id' value= '[$job_id]'>Add Details</a>
</td>
</tr>";
echo "</form>"; }
echo "
</tbody>
</table>";
?>
<!-- ------SCRIPT FOR BUTTON "CUSTOMER INFO"-->
<script>
$(document).ready(function(){
$('.get_info').click(function(){
var job_id = $(this).parent().siblings('input[name=hidden]').val();
$.ajax({
url: 'responses.php',
data: 'job_id=' + job_id,
type: 'POST',
success: function(data){
// console.log(data);
$('.info_data').html(data);
}
});
});
});
</script>
<!-- MODAL THAT SHOW UP AFTER CLICKING ON "CUSTOMER INFO"-->
<div class="container">
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Customer Information</h4>
</div>
<div class="modal-body info_data">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<!-- ---SCRIPT FOR BUTTON "ADD DETAILS" -->
<script>
$(document).ready(function(){
$('.get_info2').click(function(){
var job_id = $(this).parent().siblings('input[name=hidden]').val();
$.ajax({
url: 'responses2.php',
data: 'job_id=' + job_id,
type: 'POST',
success: function(data){
// console.log(data);
$('.info_data2').html(data);
}
});
});
});
</script>
<!-- MODAL THAT SHOW UP AFTER CLICKING BUTTON "ADD DETAILS"
which allow you to send data to database through the text area -->
<div class="container">
<div class="modal fade" id="myModal2" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Add Job Details</h4>
</div>
<div class="modal-body info_data2">
<form action="" method="post" name="savechanges">
<textarea name="textarea"> </textarea>
<button type="submit" class="btn btn-primary" name="savechanges"> Save changes</button>
<input type="hidden" name="hidden" value="<?php echo $row['id'];?>">
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<!-- SCRIPT THAT SHOULD be able to send what is written in the text area to the database,-->
<?php
include("connection.php");
if ($link->connect_errno > 0) {
die('Unable to connect to database [' . $link->connect_error . ']');
}
if (isset($_POST['savechanges'])) {
$results = $link->query("UPDATE job SET details='".$_POST['textarea']."' WHERE id=".$_POST['hidden']);
}
?>
</body>
</html>
--------------------更新5 ------------------
第1节
从表JOB获取数据的PHP代码 并显示每行3按钮:
第2节:
按钮脚本“客户信息”
第3节:
点击“客户信息”后显示的模式
第3节:
按钮脚本“添加详细信息”
第4节: 点击按钮后添加的模式“添加详细信息” 允许您通过文本区域将数据发送到数据库
第5节: 脚本应该能够将文本区域中写入的内容发送到数据库
答案 0 :(得分:0)
好的,如果一切正常并且您只需要将其更改为适用于任何记录,您只需要使用{{1}更改 php 代码中的 44 }
所以你的 html 和 php 会是这样的:
<强> HTML 强>
$_POST['hidden']
<强> PHP 强>
<div class="modal-body">
<form action="" method="post" name="savechanges">
<textarea name="textarea"></textarea>
<button type="submit" class="btn btn-primary" name="savechanges"> Save changes</button>
<input type="hidden" name="hidden" value="<?php echo $row['id'];?>">
</form>
</div>
但我鼓励您练习 mysqli参数化查询,而不是直接在查询中使用变量......
<强>更新强>
由于你的代码真的很难理解,我只会更新我的答案,添加一些假设,以防它们是对的!
我不知道您如何以<?php
include("connection.php");
if ($link->connect_errno > 0) {
die('Unable to connect to database [' . $link->connect_error . ']');
}
if (isset($_POST['savechanges'])) {
$results = $link->query("UPDATE job SET details='".$_POST['textarea']."' WHERE id=".$_POST['hidden']);
}
?>
的标题显示<div>
。因此,让我们假设<h4 class="modal-title">Add Job Details</h4>
正在做你想做的事情!
所以在你的JavaScript中你有:
$('.info_data2').html(data);
此处您只是传递<script>
$(document).ready(function(){
$('.get_info2').click(function(){
var job_id = $(this).parent().siblings('input[name=hidden]').val();
$.ajax({
url: 'responses2.php',
data: 'job_id=' + job_id,
type: 'POST',
success: function(data){
// console.log(data);
$('.info_data2').html(data);
}
});
});
});
</script>
作为参数,因此在 responses2.php 中您有两个问题:
1-您必须将job_id
更改为$_POST['hidden']
2-你没有textarea的任何参数!
然后你必须将你的JavaScript更改为:
$_POST['job_id']
请注意,由于您的HTML代码确实令人困惑,因此您必须研究如何获得<script>
$(document).ready(function(){
$('.get_info2').click(function(){
var job_id = $(this).parent().siblings('input[name=hidden]').val();
var textarea = $(this).parent().siblings('[name=textarea]').val();
$.ajax({
url: 'responses2.php',
data: { "job_id": job_id, "textarea" : textarea} ,
type: 'POST',
success: function(data){
// console.log(data);
$('.info_data2').html(data);
}
});
});
});
</script>
和job_id
的正确值。使用此代码,我确定这些代码没有返回正确的值。它只是你如何做你想做的事情的样本,只是为了让你走上正确的轨道!!!
正如您所看到的,我已添加以下行:textarea
并将var textarea = $(this).parent().siblings('name=textarea').val();
行更改为:data
以便能够发送data: { "job_id": job_id, "textarea" : textarea} ,
值到 responses2.php 文件......
然后在 responses2.php 中你必须改变它:
textarea