Inserting data using JQUERY and PHP - php

Question

Imagine I have 3 data's in my room_table and the column is room_id, image, room_name then I'm going to display the data of my room_table in my html code.
PS: Ignore the text_checkin, text_checkout first. I'm going to explain after the code.
HTML code:
$db = mysqli_connect('xxxxxx', 'xxxx', '', 'xxxx');
$rooms = mysqli_query($db, "SELECT * FROM rooms ORDER BY id ASC;");
<script src = "http://code.jquery.com/jquery-1.9.1.js"></script>
<?php while($row = mysqli_fetch_array($rooms)) { ?>
<div>
<form >
<img src="upload/<?php echo $row['image']; ?>" style="width: 20%;">
<label>Check IN</label>
<input type="date" name="text_checkin" id="text_checkin">
<br>
<label>Check OUT</label>
<input type="date" name="text_checkout" id="text_checkout">
<br>
<label>Room ID</label>
<input type="text" name="text_roomid" id="text_roomid" value="<?php echo $row['id']; ?>">
<br>
<input type="submit" value="submit" name="submit" id="submit" onclick="return chk()">
<br><br><br>
</form>
<p id="msg"></p>
</div>
<?php } ?>
I have table named reservation then the columns are room_id, checkin, checkout.
the 3 data's in my room_table will display. Then the textbox, and the button will be thrice cause of the while loop. Then imagine I clicked the button submit in the 2nd row, then the 2nd row id should insert on my table reservation but the problem is only first row id is inserting on table reservation
Here's my script:
<script type="text/javascript">
function chk()
{
var roomid = document.getElementById('text_roomid').value;
var checkin = document.getElementById('text_checkin').value;
var checkout = document.getElementById('text_checkout').value;
var dataString = 'roomid='+ roomid + '&checkin=' + checkin + '&checkout=' + checkout;
$.ajax({
type: "post",
url: "server.php",
data:dataString,
cache:false,
success: function(html){
$('#msg').html("success");
}
});
return false;
}
</script>
PHP code: server.php
$roomid = $_POST['roomid'];
$checkin = $_POST['checkin'];
$checkout = $_POST['checkout'];
$query = "INSERT INTO reservation (room_id, checkin, checkout) values ('$roomid', '$checkin', '$checkout')";
mysqli_query($db, $query);
echo "success!";
please help me out of this problem, tyia!

Answer 1

The error lies within your while loop. Your printed elements will all have the same id's. When your function is looking for an id to get the value, it will always return the first that it finds, no matter how many instances there are of that id. So you're having conflicting id's. id's should always be unique.
What you could do to avoid this, is to declare a counter outside your while loop and increment it inside your while loop, then attach that onto your id. In that way, you will always have a unique id to parse along.
For instance:
<?php $count=0; while($row = mysqli_fetch_array($rooms)) { $count++;?>
<div>
<form >
<img src="upload/<?php echo $row['image']; ?>" style="width: 20%;">
<label>Check IN</label>
<input type="date" name="text_checkin" id="text_checkin<?php echo $count; ?>">
<br>
<label>Check OUT</label>
<input type="date" name="text_checkout" id="text_checkout<?php echo $count; ?>">
<br>
<label>Room ID</label>
<input type="text" name="text_roomid" id="text_roomid<?php echo $count; ?>" value="<?php echo $row['id']; ?>">
<br>
<input type="submit" value="submit" name="submit" id="submit" onclick="return chk()">
<br><br><br>
</form>
<p id="msg<?php echo $count; ?>"></p>
</div>
<?php } ?>
However, you will then need to change your logic for how you fetch the data from each element, as you don't really know what their id's could end up being due to the incrementor. It's not static.
If you need any further help, let me know.

Answer 2

As Martin said there is the problem with the id's so you have to change the logic a little bit.
$db = mysqli_connect('xxxxxx', 'xxxx', '', 'xxxx');
$rooms = mysqli_query($db, "SELECT * FROM rooms ORDER BY id ASC;");
<script src = "http://code.jquery.com/jquery-1.9.1.js"></script>
<?php while($row = mysqli_fetch_array($rooms)) { ?>
<div>
<form >
<img src="upload/<?php echo $row['image']; ?>" style="width: 20%;">
<label>Check IN</label>
<input type="date" name="text_checkin" class="text_checkin">
<br>
<label>Check OUT</label>
<input type="date" name="text_checkout" class="text_checkout">
<br>
<label>Room ID</label>
<input type="text" name="text_roomid" class="text_roomid" value="<?php echo $row['id']; ?>">
<br>
<input type="submit" value="submit" name="submit" id="submit" onclick="return chk()">
<br><br><br>
</form>
<p id="msg"></p>
</div>
<?php } ?>
Then you can get the values individually and pass them as array to the server.
<script type="text/javascript">
function chk()
{
var roomidArr = $(".text_roomid");
var checkinArr = $(".text_checkin");
var checkoutArr = $(".text_checkout");
/*
You can get value of each element as;
for(var i = 0; i < roomidArr.length; i++){
console.log($(roomidArr[i]).val());
}
*/
//var dataString = Apply your logic here as;
$.ajax({
type: "post",
url: "server.php",
data:dataString,
cache:false,
success: function(html){
$('#msg').html("success");
}
});
return false;
}
</script>