Form won't submit when an inner html is updated - javascript
I am creating a webpage that has search, add, update, and delete (all in one webpage without any modals). This webpage is dedicated for facility maintenance. Add works fine. But the rest doesn't look good. Whenever I add a 'facility', the page reloads (as expected). The page gets the data from mysql database and add it on a table inside my webpage. The table has a column called 'Actions' that holds two buttons, update and delete.
The problem is when I use innerHTML. On the top of the table containing the list of 'facilities', is a search input. Search works fine (I think). Search uses the 'POST' method and accesses a PHP code inside my file. The PHP code is tasked to search for any matching strings from the database and echo <script> </script>. Inside these script tags is a code where I searched for the id of the table I want to update. Then I changed & added inner HTML. Inside the inner HTML is a new table row. Inside the table row is a form, and inside these forms are <td>s. Whenever the form(the form inside each table rows) submits, it should access a PHP code inside my file that has already been written (it was already there when the page first loads). But whenever I click the action buttons on my table, it does nothing. It doesn't trigger the PHP POST code written.
Clicking update and delete buttons works fine IF search is not clicked first. Clicking update will create another table with input fields and a button to save changes. The 'button-to-save-changes' doesn't work even if it has a PHP POST code already written in the file.
Here is my code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Facilities</title>
<?php
include_once("connection.php");
include_once("pktool-v1.0.php");
?>
</head>
<body>
<h1><center>Facilities</center></h1>
<br>
<br>
<div id="addfac">
<p>Add Facility</p>
<hr>
<form method="post" action="facilities.php">
<br>
<label name="naFacName">Facility Name: </label>
<input type="input" name="inputFacName"><br><br>
<label name="naFacType">Facility Type: </label>
<select name="naFacSel">
<?php
$query = "SELECT * FROM tblFacType WHERE " .
"boolArchive = FALSE;";
$array_fetch = mysqli_query($con, $query);
while ($row = mysqli_fetch_array($array_fetch)) {
$value_added = $row[0];
$value_text = $row[1];
echo "<option name='naFacType' value='$value_added'>$value_text</option> ";
}
?>
</select>
<br><br>
<label name="naFacAdd">Facility Address: </label>
<input type="input" name="lot" placeholder="Lot No. or Block">
<input type="input" name="street" placeholder="Street">
<input type="input" name="brgy" placeholder="Barangay"><br><br>
<input type="input" name="city" placeholder="City">
<input type="input" name="province" placeholder="Province">
<input type="input" name="region" placeholder="Region">
<br><br>
<label name="naFacAddType">Facility Address Type: </label>
<?php
$query = "SELECT * FROM tblAddType WHERE strAddTypeDesc = 'Facility Address' " .
"AND boolArchive = FALSE;";
$array_fetch = mysqli_query($con, $query);
//echo "<br> ERROR IS: " . mysqli_error($con) . " <br>";
while ($row = mysqli_fetch_array($array_fetch)) {
$row_val = $row[0];
echo "<label value='$row_val'>$row[1]</label>";
echo "<input type='hidden' name='naAddType' value='$row_val'>";
}
?>
<br><br>
<label name="naFacValue">Facility Value (Day): </label>
<input type="input" name="inputFacValue"><br><br>
<label name="naFacValueNight">Facility Value (Night): </label>
<input type="input" name="inputFacValueNight">
<br><br>
<center><input type="submit" name="Submit_Facility"></center>
</form>
<?php
if(isset($_POST['Submit_Facility']))
{
$add_pk = PrimaryKey::prependPK(PrimaryKey::generatePK(), "ADD-");
$queryStat = true;
$lot = $_POST['lot'];
$street = $_POST['street'];
$brgy = $_POST['brgy'];
$city = $_POST['city'];
$province = $_POST['province'];
$region = $_POST['region'];
$fac_name = $_POST['inputFacName'];
$fac_val = $_POST['inputFacValue'];
$fac_val_night = $_POST['inputFacValueNight'];
$fac_type = $_POST['naFacSel'];
$add_type = $_POST['naAddType'];
$query = "INSERT INTO " .
"tblAddress(strAddID, strRegion, strProvince, strCity, strBarangay, " .
"strStreet, strLot, intAddTypeID) " .
"VALUES('$add_pk', '$lot', '$street', '$brgy', '$city', '$province', " .
"'$region', '$add_type');";
if (!mysqli_query($con, $query)) {
$queryStat = false;
}
$facloc_pk = PrimaryKey::prependPK(PrimaryKey::generatePK(), "FACLOC-");
$fac_pk = PrimaryKey::prependPK(PrimaryKey::generatePK(), "FAC-");
$query = "INSERT INTO " .
"tblFacility(strFacID, strFacName, intFacTypeID, dblFacValDay, dblFacValNight) " .
"VALUES('$fac_pk', '$fac_name', $fac_type, $fac_val, $fac_val_night);";
if(!mysqli_query($con, $query)) {
$queryStat = false;
}
$query = "INSERT INTO " .
"tblFacLoc(strFacLocID, strFacID, strAddID) " .
"VALUES('$facloc_pk', '$fac_pk', '$add_pk');";
if(!mysqli_query($con, $query)) {
$queryStat = false;
}
if ($queryStat) {
echo "<script>alert('Successfully Added!');</script>";
} else {
$alert_msg = "Error! " . mysqli_error($con);
echo "<script>alert('$alert_msg');</script>";
}
}
?>
</div>
<br>
<hr>
<h3><center>All Facilities</center></h3>
<div>
<form method='POST' style='text-align:right'>
<label name='naSearch'>Search:</label>
<input type='text' name='s_keyword' placeholder='Enter a keyword'>
<input type='submit' value='Search' name='btnSubmit'>
<br><br>
</form>
<br>
<table id='tblFacilities'>
<tr>
<th>Facility ID</th>
<th>Facility Name</th>
<th>Facility Rental Price (Day)</th>
<th>Facility Rental Price (Night)</th>
<th>Facility Type</th>
<th>Facility Location</th>
<th colspan=2>Actions</th>
</tr>
<?php
$query = "SELECT a.strFacID, a.strFacName, a.dblFacValDay, a.dblFacValNight, " .
"b.strFacTypeDesc, " .
"d.strUnit, d.strLot, d.strStreet, d.strBarangay, d.strCity, d.strProvince, " .
"d.strRegion " .
"FROM tblFacility a, tblFacType b, tblFacLoc c, tblAddress d " .
"WHERE a.intFacTypeID = b.intFacTypeID AND " .
"a.strFacID = c.strFacID AND " .
"c.strAddID = d.strAddID AND " .
"a.boolArchive = FALSE;";
$array_fetch = mysqli_query($con, $query);
while ($tuple = mysqli_fetch_array($array_fetch)) {
$fac_ID = $tuple[0];
$fac_name = $tuple[1];
$fac_val = $tuple[2];
$fac_val_night = $tuple[3];
$fac_type = $tuple[4];
$fac_add = $tuple[5] . " " . $tuple[6] . " " . $tuple[7] . " " . $tuple[8] . " " .
$tuple[9] . " " . $tuple[10] . " " . $tuple[11] . " ";
echo "<tr> " .
"<form method='post' > " .
"<td><input type='hidden' name='fac_id' value='$fac_ID'>$fac_ID</td> " .
"<td><input type='hidden' name='fac_name' value='$fac_name'>$fac_name</td> " .
"<td><input type='hidden' name='fac_val' value='$fac_val'>$fac_val</td> " .
"<td><input type='hidden' name='fac_val_night' value='$fac_val_night'>$fac_val_night</td> " .
"<td><input type='hidden' name='fac_type' value='$fac_type'>$fac_type</td> " .
"<td><input type='hidden' name='fac_add' value='$fac_add'>$fac_add</td> " .
"<td><input type='submit' name='naUpd' value='Update'></td> " .
"<td><input type='submit' name='naDel' value='Delete'></td> " .
"</form> " .
"</tr>";
}
?>
</table>
<br>
<br>
<div style="display: 'solid'">
<table id="tblfaci">
<tr>
<th>Facility ID</th>
<th>Facility Name</th>
<th>Facility Rental Price (Day)</th>
<th>Facility Rental Price (Night)</th>
<th>Facility Type</th>
<th colspan=7>Facility Location</th>
<th>Action</th>
</tr>
</table>
</div>
<?php
if (isset($_GET['btnSubmit'])) {
$keyword_q = $_GET['s_keyword'];
$query = "SELECT a.strFacID, a.strFacName, a.dblFacValDay, a.dblFacValNight, " .
"b.strFacTypeDesc, " .
"d.strUnit, d.strLot, d.strStreet, d.strBarangay, d.strCity, d.strProvince, " .
"d.strRegion " .
"FROM tblFacility a, tblFacType b, tblFacLoc c, tblAddress d " .
"WHERE a.intFacTypeID = b.intFacTypeID AND " .
"a.strFacID = c.strFacID AND " .
"c.strAddID = d.strAddID AND " .
"a.boolArchive = FALSE AND (" .
"a.strFacID LIKE '%$keyword_q%' OR " .
"a.strFacName LIKE '%$keyword_q%' OR " .
"b.strFacTypeDesc LIKE '%$keyword_q%' OR " .
"d.strUnit LIKE '%$keyword_q%' OR " .
"d.strLot LIKE '%$keyword_q%' OR " .
"d.strStreet LIKE '%$keyword_q%' OR " .
"d.strBarangay LIKE '%$keyword_q%' OR " .
"d.strCity LIKE '%$keyword_q%' OR " .
"d.strProvince LIKE '%$keyword_q%' OR " .
"a.dblFacValDay = " . (int)$keyword_q . " OR " .
"a.dblFacValNight = " . (int)$keyword_q . " OR " .
"d.strRegion LIKE '%$keyword_q%'" .
");";
$array_fetch = mysqli_query($con, $query);
echo "<script>" .
"var tblFac = document.getElementById('tblFacilities'); " .
"tblFac.innerHTML = \"<tr> " .
"<th>Facility ID</th> " .
"<th>Facility Name</th> " .
"<th>Facility Rental Price (Day)</th> " .
"<th>Facility Rental Price (Night)</th> " .
"<th>Facility Type</th> " .
"<th>Facility Location</th> " .
"<th colspan=2>Actions</th> " .
"</tr>\";" .
"</script>";
while ($tuple = mysqli_fetch_array($array_fetch)) {
$fac_ID = $tuple[0];
$fac_name = $tuple[1];
$fac_val = $tuple[2];
$fac_val_night = $tuple[3];
$fac_type = $tuple[4];
$fac_add = $tuple[5] . " " . $tuple[6] . " " . $tuple[7] . " " . $tuple[8] . " " .
$tuple[9] . " " . $tuple[10] . " " . $tuple[11] . " ";
echo "<script>" .
"var tblFac = document.getElementById('tblFacilities'); " .
"tblFac.innerHTML += \"" .
"<tr> " .
"<form method='post' > " .
"<td><input type='hidden' name='fac_id' value='$fac_ID'>$fac_ID</td> " .
"<td><input type='hidden' name='fac_name' value='$fac_name'>$fac_name</td> " .
"<td><input type='hidden' name='fac_val' value='$fac_val'>$fac_val</td> " .
"<td><input type='hidden' name='fac_val_night' value='$fac_val_night'>$fac_val_night</td> " .
"<td><input type='hidden' name='fac_type' value='$fac_type'>$fac_type</td> " .
"<td><input type='hidden' name='fac_add' value='$fac_add'>$fac_add</td> " .
"<td><input type='submit' name='naUpd' value='Update'></td> " .
"<td><input type='submit' name='naDel' value='Delete'></td " .
"</form> " .
"</tr>\";" .
"</script>";
}
}
?>
<?php
if (isset($_POST['naUpd'])) {
echo "<script>alert('UPDATE');</script>";
$id = $_POST['fac_id'];
$name = $_POST['fac_name'];
$val = $_POST['fac_val'];
$val_n = $_POST['fac_val_night'];
$type = $_POST['fac_type'];
$query = "SELECT a.strFacID, a.strFacName, a.dblFacValDay, a.dblFacValNight, " .
"b.strFacTypeDesc, " .
"d.strUnit, d.strLot, d.strStreet, d.strBarangay, d.strCity, d.strProvince, " .
"d.strRegion " .
"FROM tblFacility a, tblFacType b, tblFacLoc c, tblAddress d " .
"WHERE a.intFacTypeID = b.intFacTypeID AND " .
"a.strFacID = c.strFacID AND " .
"c.strAddID = d.strAddID AND " .
"a.boolArchive = FALSE AND " .
"a.strFacID = '$id';";
$array_fetch = mysqli_query($con, $query);
while ($tuple = mysqli_fetch_array($array_fetch)) {
$lot = $tuple[5];
$street = $tuple[6];
$unit = $tuple[7];
$barangay = $tuple[8];
$city = $tuple[9];
$province = $tuple[10];
$region = $tuple[11];
$innerCode = "<script>".
"var tblfaci = document.getElementById('tblfaci'); " .
"tblfaci.innerHTML += \"" .
"<tr><form method='post' action='facilities.php'> ".
"<td><input type='text' name = 'upd_fac_id' value = '$id' readonly></td> ".
"<td><input type='text' name = 'upd_fac_name' value = '$name'></td> ".
"<td><input type='text' name = 'upd_fac_val' value = '$val'></td> ".
"<td><input type='text' name = 'upd_fac_val_night' value = '$val_n'></td> ";
$innerCode .= "<td> ";
$innerCode .= "<select name='updFacType'>";
$query2 = "SELECT * FROM tblFacType WHERE " .
"boolArchive = FALSE;";
$array_fetch = mysqli_query($con, $query2);
while ($row = mysqli_fetch_array($array_fetch)) {
$value_added = $row[0];
$value_text = $row[1];
$innerCode .= "<option name='naUpdFacType' value='$value_added'>$value_text</option>";
}
$innerCode .= "</select>";
$innerCode .= "</td>";
$innerCode .= "<td><input type='text' name = 'upd_lot' value = '$lot'></td>".
"<td><input type='text' name = 'upd_street' value = '$street'></td>".
"<td><input type='text' name = 'upd_unit' value = '$unit'></td>".
"<td><input type='text' name = 'upd_barangay' value = '$barangay'></td>".
"<td><input type='text' name = 'upd_city' value = '$city'></td>".
"<td><input type='text' name = 'upd_province' value = '$province'></td>".
"<td><input type='text' name = 'upd_region' value = '$region'></td>".
"<td><input type='submit' value = 'Save' name = 'btnSaveUpdate'>".
"</form></tr>\";".
"</script>";
echo $innerCode;
}
}
if (isset($_POST['naDel'])) {
$del_pk = $_POST['fac_id'];
$query = "UPDATE tblFacility a, tblFacLoc b, tblAddress c " .
"SET a.boolArchive = TRUE, b.boolArchive = TRUE, c.boolArchive = TRUE " .
"WHERE a.strFacID = b.strFacID AND " .
"c.strAddID = b.strAddID AND " .
"a.strFacID = '$del_pk';";
if(!mysqli_query($con, $query)) {
$alert_msg = "Error! " . mysqli_error($con);
echo "<script>alert('$alert_msg');</script>";
} else {
echo "<script>alert('Successfully Removed!');</script>";
}
header("Location: facilities.php");
}
?>
<?php
if (isset($_POST['btnSaveUpdate'])) {
$pk_id = $_POST['upd_fac_id'];
$edit_fac_type = $_POST['updFacType'];
$upd_fac_name = $_POST['upd_fac_name'];
$upd_fac_val = $_POST[''];
$upd_fac_val_night = $_POST[''];
$upd_region = $_POST['upd_region'];
$upd_province = $_POST['upd_province'];
$upd_city = $_POST['upd_city'];
$upd_barangay = $_POST['upd_barangay'];
$upd_street = $_POST['upd_street'];
$upd_lot = $_POST['upd_lot'];
$query = "UPDATE tblFacility a, tblAddress b, tblFacLoc c " .
"SET a.intFacTypeID = (SELECT intFacTypeID " .
"FROM tblFacType " .
"WHERE strFacTypeDesc = '$edit_fac_type'), " .
"a.strFacName = '$upd_fac_name', " .
"a.dblFacValDay = $upd_fac_val, " .
"a.dblFacValNight = $upd_fac_val_night, " .
"b.strRegion = '$upd_region', " .
"b.strProvince = '$upd_province', " .
"b.strCity = '$upd_city', " .
"b.strBarangay = '$upd_barangay', " .
"b.strStreet = '$upd_street', " .
"b.strLot = '$upd_lot' " .
"WHERE a.strFacID = c.strFacID AND " .
"c.strAddID = b.strAddID AND " .
"a.strFacID = '$pk_id';";
if(!mysqli_query($con, $query)) {
$alert_msg = "Error! " . mysqli_error($con);
echo "<script>alert('$alert_msg');</script>";
} else {
echo "<script>alert('Successfully Updated!!');</script>";
header("Location: facilities.php");
}
}
?>
</div>
</body>
</html>
I'm not sure if the innerHTML cannot find the PHP code fir it's post, or the POST cannot find the innerHTML, or anything. I noticed that whenever I used innerHTML and add forms with it, I think it won't submit the form. What should I do?
The problem is that the nesting of your HTML elements is wrong, because you're putting <form> as a child of <tr>.
What you can do is put the whole form in a single <tr>. This will work OK because all the inputs are hidden inputs, so they don't have to be in separate <td>. The exceptions are the submit buttons, but it should look OK to have them together in the last column.
echo "<tr> " .
"<td>$fac_ID</td> " .
"<td>$fac_name</td> " .
"<td>$fac_val</td> " .
"<td>$fac_val_night</td> " .
"<td>$fac_type</td> " .
"<td>$fac_add</td> " .
"<td><form method="post">" .
"<input type='hidden' name='fac_id' value='$fac_ID'>" .
"<input type='hidden' name='fac_name' value='$fac_name'>" .
"<input type='hidden' name='fac_val' value='$fac_val'>" .
"<input type='hidden' name='fac_val_night' value='$fac_val_night'>" .
"<input type='hidden' name='fac_type' value='$fac_type'>" .
"<input type='hidden' name='fac_add' value='$fac_add'>" .
"<input type='submit' name='naUpd' value='Update'> " .
"<input type='submit' name='naDel' value='Delete'>" .
"</form></td> " .
"</tr>";
Related
PHP- Output from 2 different databases in 1 table
I'm currently trying to add an search function to something. Everything is working just fine. The only Problem I have is that I want some hidden values that it searches for, these are in a different Database. I've got it to select, but it doesn't output correctly (See Screenshots below) So there is an Customers Database, which have their First Name,last name and birthdate in. With that i select the "EK-Number" From the Contracts, The EK-Number is an unique ID Witch tells me what vehicle he bought. With That EK-Number I go to the Vehicle list and let him select the specific Vehicle. The only Problem I have is that he doesn't select the specific Vehicle from the Customer. Translations: Kunden - Customers Fahrzeugverkauf - Vehicle database Kaufverträge Contracts My PHP Code (Don't cry please, I know its bad at first point, but it's just for testing at the moment) : <table id="table" class="table table-striped"> <?php // Create connection $conn = new mysqli($servername, $username, $password, $dbname); // Check connection if ($conn->connect_error) { die("Connection failed: " . $conn->connect_error); } $sql = "SELECT * FROM `Kunden`"; $result = $conn->query($sql); if ($result->num_rows > 0) { echo "<tr><th>Nachname</th><th>Vorname</th><th>Geburtsdatum</th><th>Straße</th><th>PLZ</th><th>ORT</th><th>E-Mail</th><th>Tel-NR</th><th>Bearbeiten</th></tr>"; // output data of each row while($row = $result->fetch_assoc()) { $vorname = $row["Vorname"]; $nachname = $row["Nachname"]; $geb = $row["GebDatum"]; echo "<tr><td>" . $row["Nachname"]. "</td> <td>" . $row["Vorname"]. "</td><td>" . $row["GebDatum"]. "</td><td>" . $row["Strasse"]. "</td><td>" . $row["PLZ"]. "</td><td>" . $row["Ort"]. "</td><td>" . $row["EMail"]. "</td><td>" . $row["TelNr"]. "</td><td><a href='kunden_bearbeiten.php?id=$row[KdNr]&nachname=$row[Nachname]&vorname=$row[Vorname]&geb=$row[GebDatum]&strasse=$row[Strasse]&plz=$row[PLZ]&ort=$row[Ort]&mail=$row[EMail]&Notizen=$row[Notizen]&telnr=$row[TelNr]&vk=$row[VKNR]'>Bearbeiten</a></td></tr>"; } echo "</table>"; } else { echo "0 results"; } ?> </center> <?php $conn = new mysqli($servername, $username, $password, $dbname); $sql = "SELECT * FROM `kaufvertraege` WHERE Vorname = '$vorname' and Nachname = '$nachname' and Geb = '$geb'"; $result = $conn->query($sql); if ($result->num_rows > 0) { // output data of each row while($row = $result->fetch_assoc()) { $eknr = $row["EkNr"]; } } ?> <table class="table table-striped"> <?php $conn = new mysqli($servername, $username, $password, $dbname); $sql = "SELECT * FROM `Fahrzeugverkauf` WHERE EKNR = $eknr"; $result = $conn->query($sql); if ($result->num_rows > 0) { echo "<tr><th>EK-NR</th><th>VK-Nummer</th><th>EK-Datum</th><th>RG-Nummer</th><th>Marke</th><th>Modell</th><th>Farbe</th><th>EZ</th><th>Motor-Nummer</th><th>FIN</th><th>KM</th><th>VK</th><th>EK-Brutto</th><th>EK-Netto</th><th>VK-Datum</th><th>Bearbeiten</th></tr>"; // output data of each row while($row = $result->fetch_assoc()) { echo "<tr><td>" .$row["EKNR"]. "</td><td>" .$row["VKNummer"]. "</td><td>" . $row["EKDatum"]. "</td> <td>" . $row["RGNummer"]. "</td><td>" . $row["Marke"]. "</td><td>" . $row["Modell"]. "</td><td>" . $row["Farbe"]. "</td><td>" . $row["EZ"]. "</td><td>" . $row["MotorNr"]. "</td><td>" . $row["FIN"]. "</td><td>" . $row["KM"]. "</td><td>" . $row["VK"]. "</td><td>" . $row["EKBrutto"]. "</td><td>" . $row["EKNetto"]. "</td><td>" . $row["VKDatum"]."</td><td><a href='fahrzeuge_bearbeiten.php?id=$row[EKNR]'>link</a></td></tr>"; $sql = "SELECT * FROM `Kunden`"; $result = $conn->query($sql); if ($result->num_rows > 0) { echo "<tr><th>Nachname</th><th>Vorname</th><th>Geburtsdatum</th><th>Straße</th><th>PLZ</th><th>ORT</th><th>E-Mail</th><th>Tel-NR</th><th>Bearbeiten</th></tr>"; // output data of each row while($vk = $result->fetch_assoc()) { $vorname = $row["Vorname"]; $nachname = $row["Nachname"]; $geb = $row["GebDatum"]; echo "<tr><td>" . $vk["Nachname"]. "</td> <td>" . $vk["Vorname"]. "</td><td>" . $vk["GebDatum"]. "</td><td>" . $row["Marke"]. "</td><td>" . $vk["PLZ"]. "</td><td>" . $vk["Ort"]. "</td><td>" . $row["EMail"]. "</td><td>" . $row["TelNr"]. "</td><td><a href='kunden_bearbeiten.php?id=$row[KdNr]&nachname=$row[Nachname]&vorname=$row[Vorname]&geb=$row[GebDatum]&strasse=$row[Strasse]&plz=$row[PLZ]&ort=$row[Ort]&mail=$row[EMail]&Notizen=$row[Notizen]&telnr=$row[TelNr]&vk=$row[VKNR]'>Bearbeiten</a></td></tr>"; } echo "</table>"; } else { echo "0 results"; } } }
Yes, because you are looping through the Kunden table for a second time, but you are referencing $row['Marke'], which somes from the Fahrzeugverkauf table. I think you need to either correct the variable ($row -> $vk) or build a better MySQLi query, using JOIN
Cannot read property value of null. No value on onclick
I have a webpage that can update a table live with AJAX. I have some problems with the onlick function. Whenever I click the update button it shows on console Cannot read property 'value' of null(…)bb # manageaccounts.php:184 onclick # manageaccounts.php:229 I checked it in my update.php file but the code is just fine. I tried to change the onclick function from onclick="(this.id)" to onclick="(this.firstname)" but none worked. manageaccounts.php <body> <div class="wrapper"> <div id="data" class="table"></div> </div> <script type="text/javascript"> data(); function data() { var xmlhttp = new XMLHttpRequest(); xmlhttp.open("GET", "update.php?status=disp", false); xmlhttp.send(null); document.getElementById("data").innerHTML = xmlhttp.responseText; } function aa(a) { firstid = "firstname" + a; txtfirstid = "txtfirst" + a; var firstname = document.getElementById(firstid).innerHTML; document.getElementById(firstid).innerHTML = "<input type='text' value='" + firstname + "' id='" + txtfirstid + "'>"; midid = "middlename" + a; txtmidid = "txtmid" + a; var middlename = document.getElementById(midid).innerHTML; document.getElementById(midid).innerHTML = "<input type='text' value='" + middlename + "' id='" + txtmidid + "'>"; lastid = "lastname" + a; txtlastid = "txtlast" + a; var lastname = document.getElementById(lastid).innerHTML; document.getElementById(lastid).innerHTML = "<input type='text' value='" + lastname + "' id='" + txtlastid + "'>"; addid = "address" + a; txtaddid = "txtadd" + a; var address = document.getElementById(addid).innerHTML; document.getElementById(addid).innerHTML = "<input type='text' value='" + address + "' id='" + txtaddid + "'>"; gendid = "gender" + a; txtgendid = "txtgend" + a; var gender = document.getElementById(gendid).innerHTML; document.getElementById(gendid).innerHTML = "<input type='text' value='" + gender + "' id='" + txtgendid + "'>"; contid = "contact" + a; txtcontid = "txtcont" + a; var contact = document.getElementById(contid).innerHTML; document.getElementById(contid).innerHTML = "<input type='text' value='" + contact + "' id='" + txtcontid + "'>"; updateid = "update" + a; document.getElementById(a).style.visibility = "hidden"; document.getElementById(updateid).style.visibility = "visible"; } function bb(b) { var firstid = "txtfirst" + b; var firstname = document.getElementById(firstid).value; var midid = "txtmid" + b; var middlename = document.getElementById(midid).value; var lastid = "txtlast" + b; var lastname = document.getElementById(lastid).value; var addid = "txtadd" + b; var address = document.getElementById(addid).value; var gendid = "txtgend" + b; var gender = document.getElementById(gendid).value; var contid = "txtcont" + b; var contact = document.getElementById(contid).value; update_value(b, firstname, middlename, lastname, address, gender, contact); document.getElementById(b).style.visibility = "visible"; document.getElementById("update" + b).style.visibility = "hidden"; document.getElementById("firstname" + b).innerHTML = firstname; document.getElementById("middlename" + b).innerHTML = middlename; document.getElementById("lastname" + b).innerHTML = lastname; document.getElementById("address" + b).innerHTML = address; document.getElementById("gender" + b).innerHTML = gender; document.getElementById("contact" + b).innerHTML = contact; } function update_value(id, firstname, middlename, lastname, address, gender, contact) { var xmlhttp = new XMLHttpRequest(); xmlhttp.open("GET", "update.php?id=" + id + " & firstname=" + firstname + " & middlename=" + middlename + " & lastname=" + lastname + " &address=" + address + " & gender=" + gender + " &contact=" + contact + " & status=update", false); xmlhttp.send(null); } function delete1(id) { var xmlhttp = new XMLHttpRequest(); xmlhttp.open("GET", "update.php?id=" + id + " & status=delete", false); xmlhttp.send(null); data(); } </script> </body> update.php has the null value onclick <input type="button" id="update<?php echo $row["id"]; ?>" name="<?php echo $row["id"]; ?>" value="UPDATE" style="visibility: hidden;" onclick="bb(this.firstname)"> <?php $conn = mysqli_connect('localhost', 'root','root', 'realestate'); if (!$conn) { die("Sorry we're having some problems with the database. :(".mysqli_connect_error()); } $status = $_GET["status"]; if ($status == "disp") { $sql1 = "SELECT * FROM agents"; // check the change ere $result=mysqli_query($conn, $sql1); echo "<table>"; echo "<tr> <th>Agent ID</th> <th>Firstname</th> <th>Middlename</th> <th>Lastname</th> <th>Address</th> <th>Gender</th> <th>Contact</th> <th>Action</th> </tr>"; while($row=mysqli_fetch_assoc($result)) { echo "<tr class='da'>"; echo "<td>"; echo $row["id"]; echo "</td>"; echo "<td>"; ?><div id="firstname<?php echo $row["id"]; ?>"><?php echo $row["firstname"]; ?></div><?php echo "</td>"; echo "<td>"; ?><div id="middlename<?php echo $row["id"]; ?>"><?php echo $row["middlename"]; ?></div><?php echo "</td>"; echo "<td>"; ?><div id="lastname<?php echo $row["id"]; ?>"><?php echo $row["lastname"]; ?></div><?php echo "</td>"; echo "<td>"; ?><div id="address<?php echo $row["id"]; ?>"><?php echo $row["address"]; ?></div><?php echo "</td>"; echo "<td>"; ?><div id="gender<?php echo $row["id"]; ?>"><?php echo $row["gender"]; ?></div><?php echo "</td>"; echo "<td>"; ?><div id="contact<?php echo $row["id"]; ?>"><?php echo $row["contact"]; ?></div><?php echo "</td>"; echo "<td>"; ?><button id="<?php echo $row["id"]; ?>" name="<?php echo $row["id"]; ?>" onclick="delete1(this.id)">DELETE</button><?php echo "</td>"; echo "<td>"; ?> <input type="button" id="<?php echo $row["id"]; ?>" name="<?php echo $row["id"]; ?>" value="EDIT" onclick="aa(this.id)"> <input type="button" id="update<?php echo $row["id"]; ?>" name="<?php echo $row["id"]; ?>" value="UPDATE" style="visibility: hidden;" onclick="bb(this.firstname)"> <?php echo "</td>"; echo "</tr>"; } echo "</table>"; } if ($status == "update") { $id = $_GET["id"]; $first = $_GET["firstname"]; $mid = $_GET["middlename"]; $last = $_GET["lastname"]; $add = $_GET["address"]; $gend = $_GET["gender"]; $cont = $_GET["contact"]; $first = trim($first); $mid = trim($mid); $last = trim($last); $add = trim($add); $gend = trim($gend); $cont = trim($cont); $sql2 = "UPDATE agents SET firstname='$first', middlename='$mid', lastname='$last', address='$add', gender='$gend', contact='$cont' WHERE id=$id"; $result = mysqli_query($conn, $sql2); } if ($status == "delete") { $id = $_GET["id"]; $sql3 = "DELETE FROM agents WHERE id=$id"; $result = mysqli_query($conn, $sql3); } ?>
In your function bb, you are doing: var firstid="txtfirst"+b; var firstname = document.getElementById(firstid).value; You are calling the function like: onclick="bb(this.firstname)" Now, this.firstname would be undefined as this is pointing to your button and the button does not have a property called firstname. Also, when you do like onclick="(this.id)" Then inside your function, firstid would become "txtfirstupdate1" as the id of your button will be update + id and not just id. So, document.getElementById(firstid) would be actually null and that's the reason why you are getting this error.
submit dynamic form with javascript
When I want to submit a form with my js i always get this error: Uncaught TypeError: Cannot read property 'submit' of null its like the js doesnt find the form Here the js code: echo "<script language='javascript' type='text/javascript'>"; echo "function send(ak,id){"; echo "document.getElementById('java').submit(); "; echo "document.write('submited');"; echo"}"; echo "</script>"; And here the php / html: echo "<form id='java' method='post' action='reisegruppe.php' >"; echo "<input name='ak' type='hidden' />"; echo "<input name='id' type='hidden' />"; // Reisegruppe ausgeben if ($result1->num_rows > 0) { // Reisegruppe ID , von , nach ausgeben $count = 1; while($row1 = $result1->fetch_assoc()) { echo "<br>" . "id: " . $row1["reisegruppe_id"]. " - <b> von: </b> " .'<b>'.'<input name="von" value='.$row1["von"].' size="5" />'.'</b>'. " " . "<b>nach: </b>" .'<b>'.'<input size="5" name="nach" value='. $row1["nach"].'>'.'</b>'." ". "<br>"; echo "<a href='javascript:send(1,32)';>neu eintragen</a>"; while($row = $result->fetch_assoc()){ if($row1["reisegruppe_id"] == $row["FK_reisegruppe_id"]){ echo " - Name: " . $row["vorname"]. " " . $row["nachname"]. " " . "<br>";} } $sql = "SELECT reisegruppe_id, von, nach,teilnehmer_id, vorname, nachname,FK_reisegruppe_id FROM Reisegruppe JOIN Teilnehmer on FK_reisegruppe_id = reisegruppe_id"; $result = $conn->query($sql); } } else { echo "0 results"; } echo </form>;
comment this line because it is stop the from from submitting echo "document.write('submited');";
how to pass the edited value to database
i am making the html table with an inline edit using http://www.iwebux.com/inline-edit-using-ajax-in-jquery/ i try to pass the edited value to database but its not passing,i want to pass the id and the edited value to database below is my code.Please anyone guide me i am new to programming thanks. ajax $(document).ready(function () { $('td.edit').click(function () { $('.ajax').html($('.ajax input').val()); $('.ajax').removeClass('ajax'); $(this).addClass('ajax'); $(this).html('<input id="editbox" size="' + $(this).text().length + '" type="text" value="' + $(this).text() + '">'); $('#editbox').focus(); } ); $('td.edit').keydown(function (event) { arr = $(this).attr('class').split(" "); if (event.which == 13) { $.ajax({ type: "POST", url: "config.php", data: "value=" + $('.ajax input').val() + "&rowid=" + arr[1] + "®ion=" + arr[2], success: function (data) { $('.ajax').html($('.ajax input').val()); $('.ajax').removeClass('ajax'); } }); } } ); $('#editbox').live('blur', function () { $('.ajax').html($('.ajax input').val()); $('.ajax').removeClass('ajax'); }); }); Html <body> <table cellpadding="15"> <tr class="heading" bgcolor="#ccc"> <th>region</th> <th>country</th> <th style="width:285px;">networkname</th> <th>mcc</th> <th>mnc</th> <th>mnp</th> </tr> <?php $dbHost = 'localhost'; // usually localhost $dbUsername = 'fms'; $dbPassword = 'xxxxxxxxx'; $dbDatabase = 'fms'; $db = mysql_connect($dbHost, $dbUsername, $dbPassword) or die ("Unable to connect to Database Server."); mysql_select_db ($dbDatabase, $db) or die ("Could not select database."); $sql = mysql_query("SELECT * FROM supplierprice"); while($row=mysql_fetch_array($sql)) { echo '<tr '.$row['id'].' >'; echo "<td class='edit' >" . $row['region'] . "</td>"; echo "<td class='edit' >" . $row['country'] . "</td>"; echo "<td class='edit' >" . $row['networkname'] . "</td>"; echo "<td class='edit' >" . $row['mcc'] . "</td>"; echo "<td class='edit' >" . $row['mnc'] . "</td>"; echo "<td class='edit'>" . $row['mnp'] . "</td>"; echo "</tr>"; } ?> </table> </body> config.php <?php $dbHost = 'localhost'; // usually localhost $dbUsername = 'fms'; $dbPassword = 'xxxxxxxx'; $dbDatabase = 'fms'; $db = mysql_connect($dbHost, $dbUsername, $dbPassword) or die ("Unable to connect to Database Server."); mysql_select_db ($dbDatabase, $db) or die ("Could not select database."); print $_POST['rowid']; if($_POST['rowid']) { $id=mysql_escape_String($_POST['id']); $region=mysql_escape_String($_POST['region']); $country=mysql_escape_String($_POST['country']); $networkname=mysql_escape_String($_POST['networkname']); $mcc=mysql_escape_String($_POST['mcc']); $mnc=mysql_escape_String($_POST['mnc']); $mnp=mysql_escape_String($_POST['mnp']); $sql = "update supplierprice set region='$region',country='$country',networkname='$networkname',mcc='$mcc',mnc='$mnc',mnp='$mnp' where id='$id'"; mysql_query($sql); print " $sql"; } ?>
How to validate loop value in php? column 1 > column 2
enter image description here The above image due value 19948 and the input value are not greater than the due value 19948. How to validate this in javascript or jquery or php? <?php $i = 0; $sql = "select * from invoice where `cid`='5'"; $res = mysql_query($sql); $numrows = mysql_num_rows($res); while ($row = mysql_fetch_array($res)) { $i = $i + 1; echo "<tr>"; echo "<td>" . $row['customername'] . "</td>"; echo "<td>" . $row['totalamount'] . "</td>"; echo "<td>" . $row['paidamount'] . "</td>"; echo "<td>" . $row['dueamount'] . "</td>"; ?> <?php echo "<td><input type='text' name='ichange$i' value='0' onkeyup='ivalue()' /> <input type='hidden' name='idue$i' value='$due' /></td>"; echo "</td>"; echo "</tr>"; } echo "<input type='hidden' name='nrows' value='$numrows' />"; ?> <script> function ivalue() { nrows=document.getElementsByName("nrows").item(0).value; for(i=1;i<=nrows;i++) { ichange="ichange" + i; idue="idue" + i; if(document.getElementsByName(ichange).item(0).value>document.getElementsByName(idue).item(0).value) { alert("Value not greater than due value") } } } </script>
I suppose you want to alert the user if he enters a greater value than the due in the same row. I would use jQuery here since you tagged it : $('input[type="text"]').on('keyup',function(){ if($(this).val() > $(this).next().val()){ alert("Value not greater than due value") } }) You could add some classes to your html for an easier and more precise select.