个人中心
gpt4 book ai didi

javascript - 带有 JS 操作的 PHP SQL 表单 - 仅在单个 div 而不是所有 div 中显示结果

转载 作者：行者123 更新时间：2023-11-30 19:41:52 25 4
gpt4 key购买 nike

我只需要在一个 div 中回显动态创建的表单发布请求的结果。

原始表和脚本比较复杂，但我将其分解为本示例的基础。

表格:

enter image description here

form.php

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>title</title>
    <style>
        body {padding: 30px; font-family: Arial;}
        input {margin: 6px 0;}
        .result {margin-bottom: 30px; color:green;}
    </style>
</head>

<body>

<?php 

$conn = mysqli_connect('dbserver', 'dbuser', 'dbpw', 'dbname') or die("Connection failed: " . mysqli_connect_error());
$conn->query("SET NAMES 'utf8'");
    if (mysqli_connect_errno()) {
        printf("Connect failed: %s\n", mysqli_connect_error());
        exit();
    }  

$sql = "SELECT * FROM table_name ORDER BY email ASC";  

$rs_result = mysqli_query($conn, $sql);

//the following part will echo multiple individual forms, depending on the table content. In this case 5.
while ($row = mysqli_fetch_assoc($rs_result)) {

    echo '
    '.$row["email"].'

    <form action="marked.php" method="POST" id="marked_form_'.$row["id"].'" class="marked_form">
        <input type="hidden" name="email_to_mark" value="'.$row["email"].'">

        <input type="submit" name="submit" value="Submit" class="marked_submit">

    </form>

    <div class="result">
    <!--echo result here-->
    </div>
    ';  
}

?>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>
$(document).ready(function() {
    $(".marked_form").submit(function() {
        // Getting the form ID
        var  formID = $(this).attr('id');
        var formDetails = $('#'+formID);
        $.ajax({
            type: "POST",
            url: 'marked.php',
            data: formDetails.serialize(),
            success: function (data) {  
                // Inserting html into the result div
                $('.result').html(data);
            },
            error: function(jqXHR, text, error){
            // Displaying if there are any errors
                $('.result').html(error);           
        }
    });
        return false;
    });
});
</script>

</body>
</html>

上面的代码将在这个例子中回显 5 个表单，如下所示: enter image description here

表单被提交到ma​​rked.php，它将返回/回显结果:

<?php 

$email_to_mark = $_POST['email_to_mark'];

$conn = new mysqli('dbserver', 'dbuser', 'dbpw', 'dbname');

$sql = "UPDATE table_name SET marked='1' WHERE email='$email_to_mark'";

if (mysqli_query($conn, $sql)) {
    echo 'SUCCESS';
} else {
    echo 'ERROR';
}

?>

一般来说，表单和请求工作正常，但是当我提交其中一个表单时，结果将出现在页面上所有的 class="result"div 中，如下所示:

enter image description here

当我改变它时

<div class="result">

到

<div id="result">

它只在第一个 div 中显示结果，即使它不在我提交的表单下方也是如此。

==========================

所以我需要的是只在我刚刚提交的表单下方显示结果，就像这里模拟的那样:

enter image description here

我的尝试是在表 ID 的帮助下创建具有单个 ID 的单个结果 div，例如...

<div id="result_'.$row["id"].'">

...但是由于我是JS新手，我不知道如何单独写入这些div。

谢谢。

最佳答案

试试这个，
更改了您的表单 ID

<form action="marked.php" method="POST" id="form_'.$row["id"].'" class="marked_form">

将结果 div 类替换为 id 并添加唯一的 $row id 或连接它

<div id="result_form_'.$row["id"].'">
    <!--echo result here-->
</div>

JS 的变化

$(".marked_form").submit(function() {
        // Getting the form ID
        var  formID = $(this).attr('id');
        var formDetails = $('#'+formID);
        $.ajax({
            type: "POST",
            url: 'marked.php',
            data: formDetails.serialize(),
            success: function (data) {  
                // Inserting html into the result div
                $('#result_'+formID).html(data);//changes
            },
            error: function(jqXHR, text, error){
            // Displaying if there are any errors
                $('#result_'+formID).html(data);//changes       
        }
    });

刚刚更新了你的结果 div id

关于javascript - 带有 JS 操作的 PHP SQL 表单 - 仅在单个 div 而不是所有 div 中显示结果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55310107/

25 4 0
文章推荐： c# - 多次复制相同文件的文件夹的高效压缩
文章推荐： c# - Getter、Function 还是只是在构造函数上设置它？
文章推荐： c# - 如何从 javascript 函数调用代码隐藏方法？
文章推荐： c# - 使用 WebClient 以适当的扩展名保存图像
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com