Insert data into mysql database using ajax in php multiform

Question

Hey I am trying to insert into mysql/php/ajax with multiforms on a page.

The insert works fine, but form nr 2, sets form nr 1´s data into the mysql DB.

I have 4 forms on each page, it is a firecheck on a dorm, where I need to check 28 kitchens if they keep the standard firerules. so what I need is the little goldcorn to make this work :) so each form, only respond on the data in that form.

Here is my code:

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

the next form, looks the same, but new insert-data name and form name.

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);
 }

 ?>

the one for b, looks almost the same

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

i guess the problem lies in your php-files. please provide them. — wayneOS
– wayneOS, Commented Mar 28, 2018 at 6:42
What you trying to do? Overwrite the same form? Or run the same sql query for diff form data? — Aniketh Saha
– Aniketh Saha, Commented Mar 28, 2018 at 7:06
I am trying to make 4 diffent forms work on the same page, they all have the same things need to be checked (the same name) But I need to make form nr 1, only to work with button nr 1 — user3272367
– user3272367, Commented Mar 28, 2018 at 7:17

micster · Accepted Answer · 2018-03-28 09:03:35Z

In addition to Bakayaro's answer, if all your forms got the same fields, you can optimize your code to use only one javascript function and one PHP insert script.

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

HTML

Add a click listener on each .send button instead of using onclick() on them
Add specific ID on each different form, with kitchen ID
Add data to .send button with related form's kitchen ID

Example for kitchen 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

Use click listener
Get active form's data from each field's name

Working example based on your code:

$('.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 file

Use one single PHP script for each form and generate table name in your SQL query from given kitchen value.

Working example based on your code:

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

Generated query for your 1a form:

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

Bakayaro · Accepted Answer · 2018-03-28 07:05:40Z

1

If I do understand well, you have multiple forms on one page and the second form posts the values of the first form. I think the problem is that you're using tha same ids on the fields of the forms. Take a look at:

    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();

These are the fields from insertData1a() function and it's the same in the other function:

    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();

So basically the problem is that you're referencing the same fields in the second function. The id attribute must be a unique id for an HTML element, so you should use different ids in each form or if you're already using different ids (you didn't post the html of the second form) you just have to rewrite the elements in your second function.

answered Mar 28, 2018 at 7:05

Bakayaro

1308 bronze badges

2 Comments

user3272367 Over a year ago

ok, I was hoping that a value/validate of the form (so the nr 1 button only worked for the nr 1 form). I have 28 places I need to do, so I need to change them all :(

Bakayaro Over a year ago

I'm afraid I'm not following. But an another slight improvement; instead of calling an onclick function on the button you could use a $('.some-form').on('submit', function(){...... do the ajax call}); and to send all of the form data in your js function you can do something like data: $(this).serialize(). So you won't have to implement a function for each form!

Collectives™ on Stack Overflow

Insert data into mysql database using ajax in php multiform

2 Answers 2

HTML

Javascript

PHP file

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

HTML

Javascript

PHP file

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related