Question

嘿我试图在页面上插入带有多种形式的mysql / php / ajax。

插入工作正常，但是形式为nr 2，将nr 1的数据设置为mysql DB。

我每页都有4个表格，它是宿舍里的一个火警，我需要检查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>

下一个表单看起来相同，但是新的insert-data名称和表单名称。

插入数据

<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

如果我理解得很清楚，您在一个页面上有多个表单，而第二个表单会发布第一个表单的值。我认为问题是你在表单的字段上使用相同的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（你没有发布第二个表单的html），你只需要重写你的第二个功能中的元素。

Answer 2

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

使你的代码分解！ Rembember一件事：DRY（不要重复自己）

HTML

在每个.send按钮上添加点击监听器，而不是在其上使用onclick()
在每个不同的表单上添加具有厨房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>

请勿在{{1}}和a标记的不同HTML元素上使用相同的ID。

的Javascript

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

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

form

PHP文件

为每个表单使用一个PHP脚本，并在给定$('.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); } }); });值的SQL查询中生成表名。

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

kitchen

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

$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)");

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

2 个答案:

HTML

的Javascript

PHP文件