Insert data into mysql database using ajax in php multiform - php

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

Answer 1

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)

Answer 2

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.