Why does my submit button not submit to mySQL? - php

Question

I have a php form I'll call it "php1" that uses ajax to populate the input text boxes from a mySQL db. to do so it uses a secondary page I'll call "php2". On php2 there is a submit "button" being used to submit any changes to the mySQL db. Every aspect works beautifully, except the submit, unless I test php2 by itself, then it submits to the db.What am I doing wrong?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
function myBlur(str){
if (str == "") {
document.getElementById("demo").innerHTML = "You Must Enter a Device Name! <br>";
$("#demo").css("background-color","red");
$("#Name").css("background-color","red");
return;
} else {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("form1").innerHTML = this.responseText;
}
};
xmlhttp.open("GET","php2.php?q="+str,true);
xmlhttp.send();
}
}
</script>
This is to call the second page.
<fieldset><legend>Input</legend>
<div width="100%" id="form1">
<div id="demo"><br></div><br>
<form method="post" action="php1.php">
Asset Number: <input type="text" required="required" id="Name" name="Name" autocomplete="off" autofocus="true" value="<?php echo $Name ?>" onChange="myBlur(this.value)">
MAC Address: <input type="text" id="MAC" name="MAC" autocomplete="off" value="<?php echo $MAC ?>">
Owner or Location: <input type="text" id="Own" name="Own" readonly="true" value="<?php echo $Own ?>">
Type: <select name="Type" id="Type" required="required" readonly="true" value="<?php echo $Type ?>">
<option value=""></option>
<option value="Desktop">Desktop</option>
<option value="Laptop">Laptop</option>
<option value="Server">Server</option>
<option value="Monitor">Monitor</option>
<option value="Printer">Printer</option>
<option value="Phone">Phone</option>
</select>
<br>
</div>
</fieldset>
</form>
That is the form code from php1
$sql = "SELECT * FROM $table WHERE Name = '$q'";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
$N=$row["Name"];
$MA=$row["MAC"];
$Ow=$row["Own"];
$Ty=$row["Type"];
echo "<tr>";
echo "<form method='post' action='php1.php' id='UpAss'>",UpAss,"
<br><br>
Device Name: <input type='text' id='Name' name='Name' value=".$N." onBlur='myBlur(this.value)'>
MAC Address: <input type='text' id='MAC' name='MAC' readonly='True' autocomplete='off' value=". $MA.">
Owner or Location: <input type='text' id='Own' name='Own' value=". $Ow.">
Type: <select id='Type'>
<option value='".$Ty."'>". $Ty."</option>
<option value='Desktop'>Desktop</option>
<option value='Laptop'>Laptop</option>
<option value='Server'>Server</option>
<option value='Monitor'>Monitor</option>
<option value='Printer'>Printer</option>
<option value='Phone'>Phone</option>
<option value='iPhone'>iPhone</option>
</select>
echo "<input type='submit' id='Usubmit' value='Update Asset' form='UpAss' onClick='myUpdate()'></input></form>";
}
function myUpdate()
{
// Create connection
$connU = new MySQLi($db_host, $db_user, $db_pass, $db_name, $db_port);
// Check connection
if ($connU->connect_error) {
die("Connection failed: " . $connU->connect_error);
}
$Name = ($_POST["Name"]);
$MAC = ($_POST["MAC"]);
$Own = ($_POST["Own"]);
$Model = ($_POST["Model"]);
$OS = ($_POST["OS"]);
$Type = ($_POST["Type"]);
$sqlU = "REPLACE INTO SET $table SET MAC='$MAC', Own='$Own', Type='$Type' WHERE Name=$Name;";
if ($connU->query($sqlU) === TRUE) {
echo "PPC-".$Name." Has Been Updated!";
} else {
echo "Error: " . $sqlU . "<br>" . $connU->error;
}
$connU->close();
}
if(isset($_POST['Usubmit']))
{
myUpdate();
}
?>
And that is the code to load the form from php2 in to php1. I am sure it is something simple that I am missing and would appreciate any help. all this code works great, but the submit.
*(I left the DB information out of this code on purpose.)

Answer 1

1.) For Posting(Insert, update and delete via ajax)
This will get you started on how to post via ajax jquery. you can see comments on the code
You can also see that form parameter is set to id="add_content" which is refrenced in the jquery ajax call
<form method="post" id="add_content">
you can also see in the body of the html div that shows image loader when button is click and when result from backend is displayed hence
see sample on that
post.html
<html><head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
type="text/javascript" charset="utf-8"></script>
<script>
$(document).ready(function(){
$('#add_content').on('submit', function(e){
e.preventDefault();
alert('ok');
// display a loading image and message
$('#loader').fadeIn(400).html('<img src="loader.gif" align="absmiddle"> <span class="loading">Please Wait.. submiting form..</span>');
$.ajax({
type:'POST',
url:'post.php',
data:$(this).serialize(),
crossDomain: true,
cache:false,
success:function(msg){
// hide loader to display result
$('#loader').hide();
$('#showposts').fadeIn('slow').prepend(msg);
}
});
});
});
</script>
</head>
<body>
<div id="loader"> </div>
<div id="showposts"> </div>
<form method="post" id="add_content">
Asset Number: <input type="text" required="required" id="Name" name="Name" autocomplete="off" autofocus="true" value="100" onChange="myBlur(this.value)">
MAC Address: <input type="text" id="MAC" name="MAC" autocomplete="off" value="1001">
Owner or Location: <input type="text" id="Own" name="Own" readonly="true" value="nancy read only">
Type: <select name="Type" id="Type" required="required" readonly="true" value="nancy type">
<option value=""></option>
<option value="Desktop">Desktop</option>
<option value="Laptop">Laptop</option>
<option value="Server">Server</option>
<option value="Monitor">Monitor</option>
<option value="Printer">Printer</option>
<option value="Phone">Phone</option>
</select>
<br>
</div>
</fieldset>
<input type="submit" name="add" id="add" value="Add" />
</form>
</body>
example of post.php
<?php
// use strip_tags to avoid html injection that can also leads to xss attck
// sample with assets number
$asset_number= strip_tags($_POST['Name']);
$MAC= $_POST['MAC'];
$Own= $_POST['Own'];
$Type= $_POST['Type'];
// you can check for emptiness eg.
if($asset_number ==''){
echo "asset number is empty";
exit();
}else{
echo "success. my assests no is: $asset_number";
}
?>
sample 2.
if you want fetch records only with or without sending parameters, you can try
Remember to pass jquery library (jquery.min.js) if you are calling it from another page
<script>
$(document).ready(function(){
// set variable payload for formality. though you can pass it to backend as a variable
var payload= 'Am Nancy Mooree';
var datasend = "payload="+ payload;
$('#loader1').fadeIn(400).html('<img src="loader.gif" align="absmiddle"> <span class="loading">Please Wait.. submiting form..</span>');
$.ajax({
type:'POST',
url:'showresult.php',
data:datasend,
crossDomain: true,
cache:false,
success:function(msg){
$('#loader1').hide();
$('#listposts').fadeIn('slow').prepend(msg);
}
});
});
</script>
<div id="loader1"></div>
<div id="listposts"></div>
showresult.php
<?php
// assuming you are sending a post or get variables to query database
$payload= strip_tags($_POST['payload']);
// query your database to display result to ajax.
echo $result ="Am from database where payload is: $payload";
?>