I have a html webpage which has a table that gets data from a table in my database. Each row has a button that when clicked gets added into another table on the webpage dynamically using javascript. The dynamic table has a submit button which when clicked, the data in the table should get added into a table in my database. What my problem is that the contents in the table do not get added to the database but each time I press the submit button a new row with a unique id gets added. Also theres a input text box which also gets added correctly to my database. This makes me believe that my database connection is working but for some reason the data in the table does not get added. How can I make the data in the dynamic table get submited into the database? Here is my code. Code has been updated with suggestions.
<?php
$sql = "SELECT *
FROM inventoryCars";
$result = mysqli_query($connection, $sql);
?>
<div class="inventory">
<div class ="cars">
<table>
<?php
if (mysqli_num_rows($result) > 0)
{
while($row = mysqli_fetch_assoc($result))
{
$RegNo = $row["regNo"];
$CarMake = $row["carMake"];
$CarModel = $row["carModel"];
?>
<tr>
<input type="hidden" name="regNo" value="<?php echo $row['regNo'] ?>">
<input type="hidden" name="carMake" value="<?php echo $row['carMake'] ?>">
<input type="hidden" name="carModel" value="<?php echo $row['carModel'] ?>">
<td><?php echo $row["regNo"] ?></td>
<td><?php echo $row["carMake"] ?></td>
<td><?php echo $row["carModel"] ?></td>
<td><button onclick="addRowToTable('<?php echo $RegNo ?>','<?php echo $CarMake ?>','<?php echo $CarModel ?>')">+</button></td>
</tr>
<script type ="text/javascript">
function addRowToTable(regNo, carMake, carModel) {
var table = document.getElementById("newhireTBL");
var row = table.insertRow(0);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
cell1.innerHTML = regNo;
cell2.innerHTML = carMake;
cell3.innterHTML = carModel;
}
</script>
<?php
}
}
?>
</table>
</div>
</div>
<div class="order">
<div class ="newhire">
<table id="newhireTBL">
</table>
<form action = "addNewHire.php" method = "post">
<input type="hidden" name="regNo" value="<?php echo $row['regNo'] ?>">
<input type="hidden" name="carMake" value="<?php echo $row['carMake'] ?>">
<input type="hidden" name="carModel" value="<?php echo $row['carModel'] ?>">
<input id="submit" type="submit" name="submit" value="Submit">
</form>
</div>
</div>
addNewHire.php
<?php session_start(); ?>
<?php require_once("connectToSQL.php"); ?>
<?php
echo "<pre>";var_dump($_POST);echo "</pre>";die;
if (isset($_POST['submit'])){
$RegNo = $_POST['regNo'];
$CarMake = $_POST['carMake'];
$CarModel = $_POST['carModel'];
$_SESSION["regNo"] = $RegNo;
$_SESSION["carMake"] = $CarMake;
$_SESSION["carModel"] = $CarModel;
$sql = "INSERT INTO newHire(regNo, carMake, carModel)
VALUES('$RegNo', '$CarMake', '$CarModel')";
if (mysqli_query($connection, $sql)) {
header("location:order_success.php");
echo "Order has been made";
} else {
header("location:order_fail");
echo "Order fail";
}
}
?>
}
?>
testing shows this
array(4) {
["regNo"]=>
string(0) ""
["carMake"]=>
string(0) ""
["carModel"]=>
string(0) ""
["submit"]=>
string(6) "Submit"
}
The form and table tag have an invalid nesting, and this may prevent the form data being submitted. Try moving end tag for the "newhireTBL" table immediately below the table's starting tag (outside the form), so the table and form tags don't overlap.
Eg:
<table...>
</table>
<form...>
</form>
EDIT: here's a basic example with some dummy data that may help you solve your problem. Good luck!
<?php
$rows = array(
array(
"regNo" => "abc123",
"carMake" => "toyota",
"carModel" => "camry",
),
array(
"regNo" => "def456",
"carMake" => "ford",
"carModel" => "laser",
),
);
?>
<?php foreach ($rows as $row): ?>
<?php echo $row["regNo"] ?>
<?php echo $row["carMake"] ?>
<?php echo $row["carModel"] ?>
<button onclick="addRow('<?php echo $row["regNo"] ?>','<?php echo $row["carMake"] ?>','<?php echo $row["carModel"] ?>')">+</button>
<br/>
<?php endforeach ?>
<form action = "addNewHire.php" method = "post">
<input id=regNo type="text" name="regNo" value="">
<input id=carMake type="text" name="carMake" value="">
<input id=carModel type="text" name="carModel" value="">
<input id="submit" type="submit" name="submit" value="Submit">
</form>
<script type ="text/javascript">
function addRow(regNo, carMake, carModel) {
document.getElementById('regNo').value = regNo;
document.getElementById('carMake').value = carMake;
document.getElementById('carModel').value = carModel;
}
</script>
Related
just starting out so gonna sound like a noob question but how can I use the update button to update individual rows rather than only the top row.
Whenever I use the update button, the request only goes through if it was the top row.
This is the code for the index.php
<html>
<head>
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<center>
<h3>UPDATE DATA</h3>
<?php
$run = 0;
$conn = new mysqli('localhost', '', '', '');
$sql = "SELECT * FROM moderator";
$result = $conn->query($sql);
while ( $row=mysqli_fetch_assoc($result)) {
$run = $run + 1;
?>
<div>
ID<input type="text" id="id" value="<?php echo $row['id']; ?>">;
Moderator<input type="text" id="mod" value="<?php echo $row['name']; ?>">;
Category<input type="text" id="ctgr" value="<?php echo $row['category']; ?>">;
<button type="submit" id="update" rel="<?php echo $run; ?>">UPDATE</button>
</div>
<?php
}?>
</center>
<script>
$(document).ready(function(){
$("#update").click(function(){
var name=$("#mod").val();
var ctgr=$("#ctgr").val();
var id=$("#id").val();
$.ajax({
url:'update.php',
method:'POST',
data:{
name:name,
ctgr:ctgr,
id:id
},
success:function(response){
alert(response);
}
});
});
});
</script>
</body>
This is the code for the update.php
<?php
$conn = new mysqli('localhost', '', '', '');
$name=$_POST["name"];
$ctgr=$_POST["ctgr"];
$id=$_POST["id"];
$sql="UPDATE moderator set name='$name', category='$ctgr' where id='$id'";
if($conn->query($sql)===TRUE){
echo "DATA updated";
}
?>
You can probably see I'm trying to create an individual variable for each row but I can't figure it out. Sorry, code's very messy too.
I've removed datebase information but the rows display when credentials are inserted.
This is because you have duplicated input ids, you should have only one ID with the same value on html, this is valid some how, you don't get an error, but you will have trouble in javascript when you try to access those id, you will get only the first one.
To fix this you can remove id and put it as class:
<div>
ID<input type="text" class="id" value="<?php echo $row['id']; ?>">;
Moderator<input type="text" class="mod" value="<?php echo $row['name']; ?>">;
Category<input type="text" class="ctgr" value="<?php echo $row['category']; ?>">;
<button type="submit" class="update" rel="<?php echo $run; ?>">UPDATE</button>
</div>
and use this JS:
$(document).ready(function(){
$(".update").click(function(){
var container = $(this).closest('div'); // parent div
var name = container.find('.mod').val();
var ctgr = container.find('.ctgr').val();
var id = container.find('.id').val();
$.ajax({
url:'update.php',
method:'POST',
data:{
name:name,
ctgr:ctgr,
id:id
},
success:function(response){
alert(response);
}
});
});
});
All your rows input elements have same id attribute
Like id of first rows elements are like id, mod, ctgr
Also id of second rows elements are id, mod ctgr
Jquery find first element, if multiple elements of same id there
You can make unique id by apppending a uniqe incremental variable $run to it as
ID<input type="text" id="id"+<?php echo $run; ?> value="<?php echo $row['id']; ?>">; Moderator<input type="text" id="mod"+<?php echo $run; ?> value="<?php echo $row['name']; ?>">; Category<input type="text" id="ctgr"+<?php echo $run; ?> value="<?php echo $row['category']; ?>">; <button type="submit" id="update" rel="<?php echo $run; ?>" onclick="updatetodb( <?php echo $run; ?>);“ >UPDATE</button>
Then create a javascript function with name updatetodb with one argument, and identify row by that argument as
function updatetodb(var run) {
var id=$('#id' +run).value;
Here I have a form and input element:
cart.php
<form id="cartform" action="cart.php?action=update&pd=<?php echo $row['product_id'] ?>" name="form1" method="post">
<?php
$query = "select * from cart where customer_id='$user' ";
$result = mysqli_query($con,$query);$payableamount = 0;$totalsavings = 0;
while($row = mysqli_fetch_array($result))
{
$productid = $row['product_id'];
$query2 = "select * from product where product_id='$productid'";
$result2 = mysqli_query($con,$query2);
while($row2=mysqli_fetch_array($result2))
{
?>
<input tpe="text" name="quantxt[]" id="quantxt" value="<?php echo $qty = $row['quantity']; ?>" onkeyup="showsubmit(<?php echo $row['cart_id'] ?>,<?php echo $row['product_id'] ?>)">
<input type="text" name="s1" id="s1" value=""/>
<input style="visibility:hidden;width:80px;border-radius:10px;background-color:green;border:none;padding:5px;color:white;"
type="submit"
name="sub_<?php echo $row['cart_id'] ?>"
id="sub_<?php echo $row['cart_id'] ?>"
value="UPDATE">
</table>
</form>
and the javascript is:
<script>
function showsubmit(id,prodid)
{
alert(id);
alert(prodid);
document.getElementById("sub_"+id).style.visibility ="visible";
document.getElementById("s1").value = prodid;
f = document.getElementById("s1").value;
alert("product id is:"+f);
}
</script>
when i am accessign the value of s1 element in cart2.php it gives nothing.
on next page s1 has no value,while i am expecting the value that is updated using javascript
$prod_id = $_POST['s1'];
echo "product id of clickable product is:".$prod_id."<br>";
this line:
<input type="text" name="s1" id="s1" value=""/>
is inside a loop. can you make sure that the loop only has one row returning? because if not, then you're creating multiple elements with same id which javascript can not catch properly. id is supposed to be unique. in the case of multiple same ids it'll catch the first match and stop.
In a php application with I inherited (I am a php newbie) I have a php form with multiple includes. One of the includes has two tables set up and within each table is a form. The first form displays records retrieved from a MySQL database, so there could be 1 or more records returned. A while loop goes through the records and populates the controls with the data for each record (name, phone, email). The controls are named [fieldname<?php echo $line; ?>] - where $line starts at 1 and is incremented as the while loop goes through the records. This is working fine!
The problem comes when someone wants to edit one of the fields and submits the change. The form has an onsubmit="return validateForm(<?php echo $line; ?>);" I have checked to ensure that the $line variable does increment, but when it is sentto the javascript function "validateForm" the variable is not defined in the javasscript function. Originally I did I not pass the $line variable but the javascript function kept telling me that it could not get the value of the undefined element.
FIRST FORM CODE
<form action="admin_profiles_main_update.php" method="post" name="submit_order" enctype="multipart/form-data" onsubmit="return validateForm(<?php echo $line; ?>);">
<table border="0" cellspacing="0" cellpadding="0" class="forms">
<col width="20%"/>
<col width="80%"/>
<?php
if($user_access == 'National'){
$result = mysql_query("SELECT * FROM Profile ORDER BY profile_name");
}else{
$result = mysql_query("SELECT * FROM Profile WHERE profile_parent_region = '$user_profile' ORDER BY profile_name");
}
$line = 1;
while ($row_profile = mysql_fetch_array($result)){
$field_id = "_" . $line;
?>
<!-- LINE -->
<tr><td colspan="11"><hr class="view_line"></td></tr>
<!-- LINE -->
<tbody id="region<?php echo $field_id; ?>" >
<input class="field_long" name="profile_id<?php echo $field_id; ?>" id="profile_id<?php echo $field_id; ?>" type="hidden" value="<?php echo $row_profile[profile_id]; ?>"/>
<tr>
<td>
<label class="field_label" for="profile_parent_region<?php echo $field_id; ?>">Profile: </label>
</td>
<td align="left">
<select name="profile_parent_region<?php echo $field_id; ?>" id="profile_parent_region<?php echo $field_id; ?>" class="drop_med" >
<option></option>
<?php
if($user_access != 'National'){
$result_profile = mysql_query("Select Distinct profile_parent_region FROM profile where profile_parent_region = '$user_profile' ");
}else {
$result_profile = mysql_query("Select Distinct profile_parent_region FROM profile ORDER BY profile_parent_region ASC");
}
while($row = mysql_fetch_array($result_profile)){
echo '<option value ="'.$row['profile_parent_region'].'"';
if($row['profile_parent_region'] == $user_profile){
echo ' selected="selected"';
}
echo ' > ' . $row['profile_parent_region'] . '</option>';
}
?>
</select>
<span class="must_fill">* </span>
<label class="form_des" for="profile_parent_region<?php echo $field_id; ?>"></label>
</td>
</tr>
<tr>
<td>
<label class="field_label" for="profile_name<?php echo $field_id; ?>">Region: </label>
</td>
<td align="left">
<select name="profile_name<?php echo $field_id; ?>" id="profile_name<?php echo $field_id; ?>" class="drop_med" >
<option></option>
<?php
$parent_region = $row_profile['profile_name'];
if($user_access != 'National'){
$result_region = mysql_query("Select Distinct region FROM regions where parent_region = '$user_profile' ");
}else {
$result_region = mysql_query("Select Distinct region FROM regions ORDER BY region ASC");
}
while($row = mysql_fetch_array($result_region)){
echo '<option value ="'.$row['region'].'"';
if ($row['region'] == $parent_region){
echo ' selected="selected"';
}
echo ' >' . $row['region'] . '</option>';
}
?>
</select>
<span class="must_fill">* </span>
<label class="form_des" for="profile_name<?php echo $field_id; ?>"></label>
</td>
</tr>
<tr>
<td><label class="field_label" for="profile_manager<?php echo $field_id; ?>" >Region's Manager's Name: </label></td>
<td>
<input class="field_long" name="profile_manager<?php echo $field_id; ?>" id="profile_manager<?php echo $field_id; ?>" type="input" value="<?php echo $row_profile[profile_manager]; ?>"/>
<span class="must_fill">*</span>
<label class="form_des" for="profile_manager<?php echo $field_id; ?>"></label>
</td>
</tr>
<tr>
<td><label class="field_label" for="profile_phone<?php echo $field_id; ?>" >Region's Contact Number: </label></td>
<td>
<input class="field_long" name="profile_phone<?php echo $field_id; ?>" id="profile_phone<?php echo $field_id; ?>" type="input" value="<?php echo $row_profile[profile_phone]; ?>"/>
<span class="must_fill">*</span>
<label class="form_des" for="profile_phone<?php echo $field_id; ?>"></label>
</td>
</tr>
<tr>
<td><label class="field_label" for="profile_email<?php echo $field_id; ?>" >Region's Contact E-mail: </label></td>
<td>
<input class="field_long" name="profile_email<?php echo $field_id; ?>" id="profile_email<?php echo $field_id; ?>" type="input" value="<?php echo $row_profile[profile_email]; ?>"/>
<span class="must_fill">*</span>
<label class="form_des" for="profile_email">This email address will also be used to advise of files added to a submitted order.</label>
</td>
</tr>
<tr align="center">
<td colspan="2" class="loginrow">
<br />
<input name="Login <?php echo $field_id; ?>" id="Login<?php echo $field_id; ?>" value="Update Profile" type="submit" class="submit_button"/>
<br />
<br />
</td>
</tr>
</tbody>
<?php
$line++;
}
?>
</table>
</form>`
JAVASCRIPT FUNCTION - location in "parent" php form
function validateForm(lineNum) {
if (lineNum == null) {
var x = document.forms["submit_order"]["file_name"].value;
if (x == null || x == '') {
alert("Missing File Name.");
return false;
}
var x = document.forms["submit_order"]["file_for"].value;
if (x == null || x == '') {
alert("Missing File Type.");
return false;
}
var x = document.forms["submit_order"]["OrderForm"].value;
if (x == null || x == '') {
alert("Missing File to Upload.");
return false;
}
}
Your code
<form action="admin_profiles_main_update.php" method="post" name="submit_order" enctype="multipart/form-data" onsubmit="return validateForm(<?php echo $line; ?>);">
is outside the loop of linenumbers - so what should $line be, but null?
You either need to move the form into the loop of linenumbers, generating a form per row, or apply the logic on the submit button in question.
If you go with a form per row, you don't even need the linenumber thingy, cause then there would be exactly one value per variable in the submitted array. This would be the preferable way, cause you don't need to submit all values, when you want to modify one row.
And for the validation itself, you also wouldn't need it, cause you could refer to the form in question.
<?php
$line = 0;
while ($row_profile = mysql_fetch_array($result)){
$field_id = "_" . $line;
?>
<form action="admin_profiles_main_update.php" method="post" name="submit_order" enctype="multipart/form-data" onsubmit="return validateForm(<?php echo $line; ?>);">
<!-- do all the row stuff -->
</form>
<?$line++; }?>
I am using a while loop to display results from a query. The while loop is working fine. In hidden fields I would like to post the values of userID and accessID to the user details page. I am submitting the form using javascript to submit from a link. My problem is that regardless of the username I click I can only post the values for the first displayed record. What am I doing wrong?
The code:
<?php
while($row = $result->fetch_array()) { ?>
<form method="post" action="edit_user.php" id="userForm">
<tr>
<td>
<?php echo $row['firstname'].' '.$row['surname']; ?>
<input type="hidden" name="userID" value="<?php echo $row['userID']; ?>" />
<input type="hidden" name="accessID" value="<?php echo $row['accessID']; ?>" />
</td>
</tr>
</form>
<?php } ?>
The javascript used for submitting the form:
function submitForm() {
var form = document.getElementById("userForm");
form.submit();
}
Thank you.
EDIT - I don't want to pass the values in the url.
you are generating multiple <form>s inside loop, move your <form> outside while loop, like:
<form method="post" action="edit_user.php" id="userForm">
<?php
while($row = $result->fetch_array()) { ?>
<tr>
<td>
<?php echo $row['firstname'].' '.$row['surname']; ?>
<input type="hidden" name="userID[]" value="<?php echo $row['userID']; ?>" />
<input type="hidden" name="accessID[]" value="<?php echo $row['accessID']; ?>" />
</td>
</tr>
<?php } ?>
Submit
</form>
You're running into trouble because of this line
var form = document.getElementById("userForm");
In Javascript and HTML, an ID is supposed to be unique to a certain DOM element. In this case, you've got a whole load of form tags that have the same ID. You need to give each form a different ID, and then pass that ID to the submitForm function.
For example:
<?php
$id = 0;
while($row = $result->fetch_array()) { ?>
$id++;
<form method="post" action="edit_user.php" id="<?php echo "userForm".$id ?>">
<tr>
<td>
<?php echo $row['firstname'].' '.$row['surname']; ?>
<input type="hidden" name="userID" value="<?php echo $row['userID']; ?>" />
<input type="hidden" name="accessID" value="<?php echo $row['accessID']; ?>" />
</td>
</tr>
</form>
<?php } ?>
and then
function submitForm(id) {
var form = document.getElementById(id);
form.submit();
}
edit: how do I php? :D
I have multiple submit buttons on a site. They used to move elements up and down and I want to be them in one whole form in case of the user changes meanwhile some other values so everything is saved. The Problem now is I need the element ID of the button which was clicked.
So here is the code in the loop :
div class="form-order"><?php echo $elements[$z]['element_order']; ?> </div>
<input type="submit" name="edit_form_operation" value="▲" class="button-primary"
<?php if($elements[$z]['element_order'] == 1) echo 'disabled="disabled"'; ?> /><br />
<input type="submit" name="edit_form_operation" value="▼" class="button-primary"
<?php
$highest_element = $fdb->get_element_highest_order($form[$i]['form_id']);
if($elements[$z]['element_order'] == $highest_element) echo 'disabled="disabled"'; ?> />
And onclick of that specific button in the for loop he should write this code first so I know which element has to be moved
echo '<input type="hidden" name="change_element_id" value="'.$elements[$z]['element_id'].'" >';
I'm also open for another solution of this problem.
Ok I solved it like that now
Here you process the input:
// Select Operation
if(isset($_POST['edit_form_operation_up'])) {
echo "move up id ";
$operation = array_keys($_POST['edit_form_operation_up']);
echo $operation['0'];
}
else if(isset($_POST['edit_form_operation_down'])) {
echo "move down id ";
$operation = array_keys($_POST['edit_form_operation_down']);
echo $operation['0'];
}
And this is in the for loop for infinite Elements the input with same value and name.
<?php $elements = $fdb->get_elements($form[$i]['form_id']);
for($z = 0; $z < sizeof($elements); $z++) {
?>
<tr>
<td><div class="form-order"><?php echo $elements[$z]['element_order']; ?> </div>
<input type="submit" name="edit_form_operation_up[<?php echo $elements[$z]['element_id']; ?>]" value="▲" class="button-primary"
<?php if($elements[$z]['element_order'] == 1) echo 'disabled="disabled"'; ?> /><br />
<input type="submit" name="edit_form_operation_down[<?php echo $elements[$z]['element_id']; ?>]" value="▼" class="button-primary"
<?php
$highest_element = $fdb->get_element_highest_order($form[$i]['form_id']);
if($elements[$z]['element_order'] == $highest_element) echo 'disabled="disabled"'; ?> />
</td>
<td><?php echo $elements[$z]['element_id']; ?> </td>
<td></td>
<td></td>
</tr>
<?php } ?>
In case of somebody finds this topic and want to find a good solution.
Greetings