在 php multiform 中使用 ajax 将数据插入 mysql 数据库

Question

嘿，我正在尝试在页面上使用多种形式插入 mysql/php/ajax。

插入工作正常，但表格 nr 2 将表格 nr 1 的数据设置到 mysql 数据库中。

我每页有4个表格，这是一个宿舍的firecheck，如果他们遵守标准的firerules，我需要检查28个厨房。所以我需要的是小金玉米来完成这项工作 :) 所以每个表单，只响应该表单中的数据。

这是我的代码：

<div class="content">
    <a class="hide" id="1a" name="1a">1A</a><br>
    <form action="" id="1a" method="" name="1a" novalidate="novalidate">
        <div class="wrapper">
            <div class="table">
                <br>
                <br>
                <div class="row header">
                    <div class="cell">
                        1A
                    </div>
                    <div class="cell"></div>
                </div>
                <div class="row">
                    <div class="cell" data-title="Entre">
                        Døre
                    </div>
                    <div class="cell" data-title="Hvad du skal ordne">
                        <textarea cols="60" id="door" name="door" rows="3">Ok</textarea>
                    </div>
                </div>
                <div class="row">
                    <div class="cell" data-title="Entre">
                        Skilte
                    </div>
                    <div class="cell" data-title="Hvad du skal ordne">
                        <textarea cols="60" id="skilt" name="skilt" rows="3">Ok</textarea>
                    </div>
                </div>
                <div class="row">
                    <div class="cell" data-title="Entre">
                        Nødlys
                    </div>
                    <div class="cell" data-title="Hvad du skal ordne">
                        <textarea cols="60" id="lys" name="lys" rows="3">Ok</textarea>
                    </div>
                </div>
                <div class="row">
                    <div class="cell" data-title="Entre">
                        Brandtæppe
                    </div>
                    <div class="cell" data-title="Hvad du skal ordne">
                        <textarea cols="60" id="b_t" name="b_t" rows="3">Ok</textarea>
                    </div>
                </div>
                <div class="row">
                    <div class="cell" data-title="Entre">
                        Brandspørjte
                    </div>
                    <div class="cell" data-title="Hvad du skal ordne">
                        <textarea cols="60" id="b_s" name="b_s" rows="3">Ok</textarea>
                    </div>
                </div>
            </div>
            <input id="dato" name="dato" type="hidden" value="<?php echo date(">") ?> <!--class = "btn btn-success btn-block" -->/>

                   <button class = "send" id = "insert-data1a" name = "insert-data1a" onclick = "insertData1a()" type = "button">Insert Data</button><br>
            <p id = "message1a"></p>
        </div><!--end wrapper -->
    </form>
</div><!--end content -->
<script type = "text/javascript">

    function insertData1a() {
        var door = $("#door").val();
        var skilt = $("#skilt").val();
        var lys = $("#lys").val();
        var b_t = $("#b_t").val();
        var b_s = $("#b_s").val();
        var dato = $("#dato").val();


// AJAX code to send data to php file.

        $.ajax({
            type: "POST",
            url: "insert-data1a.php",
            data: {door: door, skilt: skilt, lys: lys, b_t: b_t, b_s: b_s, dato: dato},
            dataType: "JSON",
            success: function (data) {
                $("#message1a").html(data);
                $("p").addClass("alert alert-success");
            },
            error: function (err) {
                alert(err);
            }
        });

    }
</script>

下一个表格，看起来一样，但新的插入数据名称和表格名称。

插入数据

<script type="text/javascript">

    function insertData1b() {
        var door = $("#door").val();
        var skilt = $("#skilt").val();
        var lys = $("#lys").val();
        var b_t = $("#b_t").val();
        var b_s = $("#b_s").val();
        var dato = $("#dato").val();


        // AJAX code to send data to php file.       
        $.ajax({
            type: "POST",
            url: "insert-data1b.php",
            data: {door: door, skilt: skilt, lys: lys, b_t: b_t, b_s: b_s, dato: dato},
            dataType: "JSON",
            success: function (data) {
                $("#message1b").html(data);
                $("p").addClass("alert alert-success");
            },
            error: function (err) {
                alert(err);
            }
        });

    }
</script> 

 <?php
include('db.php');
$door=$_POST['door'];
$skilt=$_POST['skilt'];
$lys=$_POST['lys'];
$b_t=$_POST['b_t'];
$b_s=$_POST['b_s'];
$dato=$_POST['dato'];

$stmt = $DBcon->prepare("INSERT INTO 1_a(door,skilt,lys,b_t,b_s,dato) 
VALUES(:door,:skilt,:lys,:b_t,:b_s,:dato)");

$stmt->bindparam(':door', $door);
$stmt->bindparam(':skilt', $skilt);
$stmt->bindparam(':lys', $lys);
$stmt->bindparam(':b_t', $b_t);
$stmt->bindparam(':b_s', $b_s);
$stmt->bindparam(':dato', $dato);

if($stmt->execute())
{
$res="Data Inserted Successfully:";
echo json_encode($res);
}
else {
$error="Not Inserted,Some Probelm occur.";
echo json_encode($error);
 }

 ?>

b的那个，长得差不多

$stmt = $DBcon->prepare("INSERT INTO 1_b(door,skilt,lys,b_t,b_s,dato) 
VALUES(:door,:skilt,:lys,:b_t,:b_s,:dato)");

Answer 1

如果我理解得很好，您在一个页面上有多个表单，第二个表单 post 是第一个表单的值。我认为问题在于您在表单字段上使用了相同的 ID。看看：

    var door = $("#door").val();
    var skilt = $("#skilt").val();
    var lys = $("#lys").val();
    var b_t = $("#b_t").val();
    var b_s = $("#b_s").val();
    var dato = $("#dato").val();

这些是 insertData1a() 函数中的字段，在另一个函数中也是一样的：

    var door = $("#door").val();
    var skilt = $("#skilt").val();
    var lys = $("#lys").val();
    var b_t = $("#b_t").val();
    var b_s = $("#b_s").val();
    var dato = $("#dato").val();

所以基本上问题是您在第二个函数中引用了相同的字段。 id 属性必须是 HTML 元素的唯一 ID，因此您应该在每个表单中使用不同的 ID，或者如果您已经在使用不同的 ID（您没有 post html 的第二种形式）你只需要重写第二个函数中的元素。

Answer 2

除了 Bakayaro 的回答之外，如果您的所有表单都有相同的字段，您可以优化代码以仅使用一个 javascript 函数和一个 PHP 插入脚本。

Factorise your code ! Rembember one thing : DRY (Don't Repeat Yourself)

HTML

在每个 .send 按钮上添加点击侦听器，而不是在它们上使用 onclick()
在每个不同的表格上添加特定的 ID，带有厨房 ID
使用相关表格的厨房 ID 向 .send 按钮添加数据

厨房 1A 示例：

<!-- Add specific ID with kitchen ID -->
<form action="" id="kitchen1a" method="" name="1a" novalidate="novalidate">
...
<!-- Add data to each .send button with related form's kitchen and remove onclick() -->
<!-- data-kitchen="1a" -->
<button class = "send" id = "insert-data1a" name = "insert-data1a" data-kitchen="1a" type = "button">Insert Data</button>

Don't use same ID on different HTML elements, as your a and form tag.

Javascript

使用点击监听器
从每个字段的名称中获取活动表单的数据

基于您的代码的工作示例：

$('.send').on('click', function(e) {

    var kitchen = $(this).data('kitchen');
    var form = $('#kitchen' + kitchen);

    var data = {
        door: form.find('[name="door"]').val(),
        skilt: form.find('[name="skilt"]').val(),
        lys: form.find('[name="lys"]').val(),
        b_t: form.find('[name="b_t"]').val(),
        b_s: form.find('[name="b_s"]').val(),
        dato: form.find('[name="dato"]').val(),
        // add active kitchen in your POST data
        kitchen: kitchen,
    };

    // AJAX code to send data to php file.
    $.ajax({
        type: "POST",
        // use same PHP script for each forms
        url: "insert.php",
        data: data,
        dataType: "JSON",
        success: function (data) {
            // use kitchen's specific message tag
            $("#message" + kitchen).html(data);
            $("p").addClass("alert alert-success");
        },
        error: function (err) {
            // alert(err);
            console.log(err);
        }
    });
});

PHP 文件

为每个表单使用一个单独的 PHP 脚本，并根据给定的 kitchen 值在您的 SQL 查询中生成 table 名称。

基于您的代码的工作示例：

$kitchen = $_POST['kitchen'];

// if your kitchens are all formatted like this : 1a, 2c, 14a, ...
preg_match('/(\d)+([a-z])/', $kitchen, $matches);

$stmt = $DBcon->prepare("INSERT INTO " . $matches[1] . '_' . $matches[2] . "(door,skilt,lys,b_t,b_s,dato)
VALUES(:door,:skilt,:lys,:b_t,:b_s,:dato)");

为您的 1a 表单生成的查询：

INSERT INTO 1_a(door,skilt,lys,b_t,b_s,dato) VALUES(:door,:skilt,:lys,:b_t,:b_s,:dato)

在 php multiform 中使用 ajax 将数据插入 mysql 数据库

Insert data into mysql database using ajax in php multiform

php

ajax

jscript

HTML

Javascript

PHP 文件