每行不同的文本区域

【问题标题】：Different Text area for each row每行不同的文本区域
【发布时间】：2016-11-01 22:45:12
【问题描述】：

我正在使用 PHP，我能够收集我的数据库表的信息并将其显示到我的网页中。

对于每一行，我都会显示一个按钮，该按钮会导致一个模式弹出窗口，其中包含一个所见即所得的文本区域（我使用了 TinyMCE），以便我可以添加有关该特定行的详细信息。

当我使用这个脚本时，这仅适用于 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>

我附上图片：

Table

[带文本区域的模态弹出窗口][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'" );

}

?>

----------------更新 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">&times;</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">&times;</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 按钮：

  • 用于更新状态和优先级的更新按钮
  • 客户信息按钮（从“客户”表中获取数据）
  • 添加详细信息按钮（通过带有 wusiwug 的模式弹出窗口将信息发送到“表作业的详细信息”列）
  • 查看详细信息按钮：从“表作业的详细信息”列中获取数据

第 2 部分：

“客户信息”按钮的脚本

第 3 部分：

点击“客户信息”后显示的模式

第 3 部分：

按钮“添加详细信息”的脚本

第 4 部分： 单击按钮“添加详细信息”后显示的模式 它允许您通过文本区域将数据发送到数据库

第 5 部分： 应该能够将文本区域中写入的内容发送到数据库的脚本

OVERVIEW

【问题讨论】：

  • 我读了 4 次，但我仍然无法理解你在问什么。你能澄清一下吗？
  • ...我有，但这不是一个好主意，需要做一些事情，但不知道你为什么要这样做。
  • @Fred -ii- 你能澄清什么不是个好主意吗？
  • 因为，稍后查询 MySQL 的任何函数时，您将有一段很长的时间。在这里尝试并提前思考，您就会明白我的意思（总是提前考虑未来）。
  • @TheValyreanGroup - 我试图澄清。

标签： php jquery mysql sql ajax


【解决方案1】：

好的，如果一切正常，您只需将其更改为适用于任何记录，您只需在 php 代码中更改 44 并使用 $_POST['hidden']

所以你的 html 和 php 会是这样的：

HTML

<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>

PHP

<?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']);
}
?>

但我鼓励您练习 mysqli 参数化查询，而不是直接在查询中使用变量...

更新

由于您的代码真的很难理解，我将更新我的答案以添加一些假设，以防万一他们是对的！

我不知道您如何显示标题为&lt;h4 class="modal-title"&gt;Add Job Details&lt;/h4&gt; 的&lt;div&gt;。所以让我们假设$('.info_data2').html(data); 正在做你想做的事！

所以在你的 JavaScript 中你有：

<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>

这里你只是传递job_id 作为参数，所以在 responses2.php 你有两个问题： 1-您必须将 $_POST['hidden'] 更改为 $_POST['job_id'] 2-你没有文本区域的任何参数！

然后你必须把你的 JavaScript 改成这样：

<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>

请记住，由于您的 HTML 代码确实令人困惑，您必须研究如何获得 job_id 和 textarea 的正确值。使用此代码，我确定这些不会返回正确的值。这只是你如何做你想做的事的一个样本，只是为了让你走上正确的轨道！！！

如您所见，我添加了这一行：var textarea = $(this).parent().siblings('name=textarea').val(); 并将data 行更改为：data: { "job_id": job_id, "textarea" : textarea} , 以便能够将textarea 值发送到 responses2.php 文件...

然后在 responses2.php 你必须像这样改变它：

<?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['job_id']);
}
?>

【讨论】：

  • 谢谢你最后的发言，我去看看。我已经按照您的建议做了，但这不起作用。该表没有得到更新。我可以做任何控制吗？
  • 您只提供了部分代码，关于您对问题的最后评论，这个答案应该有效。但是，如果您可以从您的 _html_ 中放入完整的代码（它显示了您如何生成表单）以及您的 _php_ 的完整代码（它显示了您的数据是如何存储到/从数据库中提取的），那么我可以有更多准确的答案。
  • 我对我的问题进行了 Update4。谢谢
猜你喜欢
  • 1970-01-01
  • 2023-03-10
  • 1970-01-01
  • 2012-02-09
  • 2015-07-10
  • 1970-01-01
  • 1970-01-01
  • 2015-02-24
  • 1970-01-01
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode