I am looking on suggestions on a work around for the page reloading on the Form Submit Button being pushed. I have a jQuery click event to use AJAX to send information from the form to a php file that does checks on the data gathered from the form and then pushes it into the database. The PHP file gathers info, wether it be that information was missing or that the submission was successful and then brings that info back to the main page back through AJAX. That info is then pushed into an error message div on the page to tell if there was an issue or everything was successful. This worked great when I did everything all on 1 page without AJAX for other forms, but this one is more involved so I decided to break everything up a little to keep things neater. When using if(array_key_exists("submit",$_POST)) { it seems almost as if it does this after the refresh happens? So then the error message is there. When using AJAX like I currently am though it seems as if the error message is loaded before the refresh so then it is lost. Here is what I am working with:
<?php
include("header.html");
include("connection.php");
$query= "SELECT * FROM components";
if($result = mysqli_query($link, $query)) {
$basedrop1="<p id='bd1'><select name='basedrop1' id='basedrop1' class='prodinp'> <option>Select A Base Product</option>";
$basedrop2="<p id='bd2'><select name='basedrop2' id='basedrop2' class='prodinp'> <option>Select A Base Product</option>";
$coatingdrop1="<p id='ctd1'><select name='coatingdrop' id='coatingdrop1' class='prodinp'> <option>Select A Coating</option>";
$coatingdrop2="<p id='ctd2'><select name='coatingdrop' id='coatingdrop2' class='prodinp'> <option>Select A Coating</option>";
$toppingdrop1="<p id='td1'><select name='toppingdrop' id='toppingdrop1' class='prodinp'> <option>Select A Topping</option>";
$toppingdrop2="<p id='td2'><select name='toppingdrop' id='toppingdrop2' class='prodinp'> <option>Select A Topping</option>";
$filmdrop1="<p id='fd1'><select name='filmdrop' id='filmdrop1' class='inp'> <option>Select A Film</option>";
$filmdrop2="<p id='fd2'><select name='filmdrop' id='filmdrop2' class='inp'> <option>Select A Film</option>";
$filmdrop3="<p id='fd3'><select name='filmdrop' id='filmdrop3' class='inp'> <option>Select A Film</option>";
$corrugatedrop1="<p id='cd1'><select name='corrugatedrop' id='corrugatedrop1' class='prodinp'> <option>Select Corrugate</option>";
$corrugatedrop2="<p id='cd2'><select name='corrugatedrop' id='corrugatedrop2' class='prodinp'> <option>Select Corrugate</option>";
$corrugatedrop3="<p id='cd3'><select name='corrugatedrop' id='corrugatedrop3' class='prodinp'> <option>Select Corrugate</option>";
$corrugatedrop4="<p id='cd4'><select name='corrugatedrop' id='corrugatedrop4' class='prodinp'> <option>Select Corrugate</option>";
$palletdrop="<p id='pd1'><select name='palletdrop' id='palletdrop' class='inp'> <option>Select A Pallet Type</option>";
while ($row=mysqli_fetch_array($result)) {
if ($row[9]=="base") {
$basedrop1.=" <option value=".$row[0].">".$row[2]." - ".$row[1]."</option>";
$basedrop2.=" <option value=".$row[0].">".$row[2]." - ".$row[1]."</option>";
}
if ($row[9]=="coating") {
$coatingdrop1.=" <option value=".$row[0].">".$row[2]." - ".$row[1]."</option>";
$coatingdrop2.=" <option value=".$row[0].">".$row[2]." - ".$row[1]."</option>";
}
if ($row[9]=="topping") {
$toppingdrop1.=" <option value=".$row[0].">".$row[2]." - ".$row[1]."</option>";
$toppingdrop2.=" <option value=".$row[0].">".$row[2]." - ".$row[1]."</option>";
}
if ($row[9]=="film") {
$filmdrop1.=" <option value=".$row[0].">".$row[2]." - ".$row[1]."</option>";
$filmdrop2.=" <option value=".$row[0].">".$row[2]." - ".$row[1]."</option>";
$filmdrop3.=" <option value=".$row[0].">".$row[2]." - ".$row[1]."</option>";
}
if ($row[9]=="corrugate") {
$corrugatedrop1.=" <option value=".$row[0].">".$row[2]." - ".$row[1]."</option>";
$corrugatedrop2.=" <option value=".$row[0].">".$row[2]." - ".$row[1]."</option>";
$corrugatedrop3.=" <option value=".$row[0].">".$row[2]." - ".$row[1]."</option>";
$corrugatedrop4.=" <option value=".$row[0].">".$row[2]." - ".$row[1]."</option>";
}
if ($row[9]=="pallet") {
$palletdrop.=" <option value=".$row[0].">".$row[2]." - ".$row[1]."</option>";
}
}
$basedrop1.=" </select> <input name='company' id='basep1' class ='perinp' type='text' placeholder='Base %'></p>";
$basedrop2.=" </select> <input name='company' id='basep2' class ='perinp' type='text' placeholder='Base %'></p>";
$coatingdrop1.=" </select> <input name='company' id='coatp1' class ='perinp' type='text' placeholder='Coating %'></p>";
$coatingdrop2.=" </select> <input name='company' id='coatp2' class ='perinp' type='text' placeholder='Coating %'></p>";
$toppingdrop1.=" </select> <input name='company' id='topp1' class ='perinp' type='text' placeholder='Topping %'></p>";
$toppingdrop2.=" </select> <input name='company' id='topp2' class ='perinp' type='text' placeholder='Topping %'></p>";
$filmdrop1.=" </select></p>";
$filmdrop2.=" </select></p>";
$filmdrop3.=" </select></p>";
$corrugatedrop1.=" </select> <input name='company' id='corc1' class ='perinp' type='text' placeholder='Pieces/Unit'></p>";
$corrugatedrop2.=" </select> <input name='company' id='corc2' class ='perinp' type='text' placeholder='Pieces/Unit'></p>";
$corrugatedrop3.=" </select> <input name='company' id='corc3' class ='perinp' type='text' placeholder='Pieces/Unit'></p>";
$corrugatedrop4.=" </select> <input name='company' id='corc4' class ='perinp' type='text' placeholder='Pieces/Unit'></p>";
$palletdrop.=" </select></p>";
}
?>
<html>
<body>
<div id="main">
<div id="error"><?php echo $error; ?></div>
<h2>Add A Product:</h2>
<form method = "post">
<p><input name="prodname" id="prodname" class ="inp" type="text" placeholder="Item Name"></p>
<p><input name="prodnumber" id="prodnumber" class ="inp" type="text" placeholder="Item #"></p>
<p><input name="prodweight" id="prodweight" class ="inp" type="text" placeholder="Product Weight (in Pounds)"></p>
<p><input name="prodcount" id="prodcount" class ="inp" type="text" placeholder="Bag Count (Per Unit)"></p>
<h2>Ingredients:</h2>
<?php echo $basedrop1; ?>
<?php echo $basedrop2; ?>
<p id="addbase">Add A Base Item</p>
<?php echo $coatingdrop1; ?>
<?php echo $coatingdrop2; ?>
<p id="addcoating">Add A Coating</p>
<?php echo $toppingdrop1; ?>
<?php echo $toppingdrop2; ?>
<p id="addtopping">Add A Topping</p>
<h2>Materials:</h2>
<?php echo $filmdrop1; ?>
<?php echo $filmdrop2; ?>
<?php echo $filmdrop3; ?>
<p id="addfilm">Add A Film</p>
<?php echo $corrugatedrop1; ?>
<?php echo $corrugatedrop2; ?>
<?php echo $corrugatedrop3; ?>
<?php echo $corrugatedrop4; ?>
<p id="addcorrugate">Add Corrugate</p>
<?php echo $palletdrop; ?>
<p><input type="submit" name="submit" id="submitbutton" value = "Submit"></p>
</form>
</div>
<script type="text/javascript">
document.getElementById('error').style.display="none";
document.getElementById('bd2').style.display="none";
document.getElementById('ctd2').style.display="none";
document.getElementById('td2').style.display="none";
document.getElementById('fd2').style.display="none";
document.getElementById('fd3').style.display="none";
document.getElementById('cd2').style.display="none";
document.getElementById('cd3').style.display="none";
document.getElementById('cd4').style.display="none";
$('#addbase').click(function(){
document.getElementById('bd2').style.display="block";
document.getElementById('addbase').style.display="none";
});
$('#addcoating').click(function(){
document.getElementById('ctd2').style.display="block";
document.getElementById('addcoating').style.display="none";
});
$('#addtopping').click(function(){
document.getElementById('td2').style.display="block";
document.getElementById('addtopping').style.display="none";
});
$('#addfilm').click(function(){
if(document.getElementById('fd2').style.display=="none"){
document.getElementById('fd2').style.display="block";
}else {
document.getElementById('fd3').style.display="block";
document.getElementById('addfilm').style.display="none";
}
});
$('#addcorrugate').click(function(){
if(document.getElementById('cd2').style.display=="none"){
document.getElementById('cd2').style.display="block";
}else if(document.getElementById('cd3').style.display=="none") {
document.getElementById('cd3').style.display="block";
} else if(document.getElementById('cd4').style.display=="none"){
document.getElementById('cd4').style.display="block";
document.getElementById('addcorrugate').style.display="none";
}
});
$('#submitbutton').click(function() {
$.ajax({
method: "POST",
url: "addprod.php",
data: {
prodname:$('#prodname').val(),
prodnumber:$('#prodnumber').val(),
prodweight:$('#prodweight').val(),
prodcount:$('#prodcount').val(),
basedrop1:$('#basedrop1').val(),
basedrop2:$('#basedrop2').val(),
coatingdrop1:$('#coatingdrop1').val(),
coatingdrop2:$('#coatingdrop2').val(),
toppingdrop1:$('#toppingdrop1').val(),
toppingdrop2:$('#toppingdrop2').val(),
filmdrop1:$('#filmdrop1').val(),
filmdrop2:$('#filmdrop2').val(),
filmdrop3:$('#filmdrop3').val(),
corrugatedrop1:$('#corrugatedrop1').val(),
corrugatedrop2:$('#corrugatedrop2').val(),
corrugatedrop3:$('#corrugatedrop3').val(),
corrugatedrop4:$('#corrugatedrop4').val(),
palletdrop:$('#palletdrop').val(),
basep1:$('#basep1').val(),
basep2:$('#basep2').val(),
coatp1:$('#coatp1').val(),
coatp2:$('#coatp2').val(),
topp1:$('#topp1').val(),
topp2:$('#topp2').val(),
corc1:$('#corc1').val(),
corc2:$('#corc2').val(),
corc3:$('#corc3').val(),
corc4:$('#corc4').val()
}
})
.done(function( msg ) {
document.getElementById('error').style.display="block";
$('#error').html(msg);
});
});
</script>
</body>
</html>
<?php include("footer.html"); ?>
