0
Ich freue mich auf Vorschläge für eine Umgehung für das Umladen der Seite auf der Formular-Senden-Schaltfläche, die gedrückt wird. Ich habe ein jQuery-click-Ereignis, um AJAX zu verwenden, um Informationen aus dem Formular an eine PHP-Datei zu senden, die die über das Formular gesammelten Daten überprüft und sie dann in die Datenbank einfügt. Die PHP-Datei sammelt Informationen darüber, ob Informationen fehlen oder die Einreichung erfolgreich war und bringt diese Informationen dann über AJAX zurück zur Hauptseite. Diese Information wird dann in eine Fehlermeldung div auf der Seite verschoben, um festzustellen, ob ein Problem aufgetreten ist oder alles erfolgreich war. Das hat super geklappt, als ich alles auf 1 Seite ohne AJAX für andere Formulare gemacht habe, aber dieses ist mehr involviert, also habe ich beschlossen, alles etwas aufzulösen, um die Dinge sauberer zu halten. Wenn Sie if(array_key_exists("submit",$_POST)) { verwenden, scheint es fast so, als würde dies nach der Aktualisierung geschehen? Dann ist die Fehlermeldung da. Bei der Verwendung von AJAX wie ich derzeit bin es scheint, als ob die Fehlermeldung vor der Aktualisierung geladen wird, dann ist es verloren. Hier ist, was ich arbeite mit:Formular Abschicken Button/Refreshing Seite
<?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"); ?>
können Sie 1. Ihren Code auf die relevanten Teile reduzieren und 2. beschreiben, was ist Ihr gewünschtes Verhalten im Vergleich zum jetzigen Verhalten? – Jeff
3.: Gibt es nur _eine_ php-Datei? Du solltest sie separat haben (die Ui-Eins und die, von der Ajax bekommt, dass es Daten sind). – Jeff
sollten Sie auch jQuerys [serializeArray()] (https://api.jquery.com/serializeArray/) ansehen! und vielleicht lesen Sie hier: http://StackOverflow.com/Questions/1184624/Convert-Form-Data-To-Javascript-Object-with-Jquery/1186309#1186309 – Jeff