javascript - 表单提交按钮/刷新页面

Question

我正在寻找有关解决按下表单提交按钮时重新加载页面的建议。我有一个 jQuery 单击事件，使用 AJAX 将信息从表单发送到 php 文件，该文件检查从表单收集的数据，然后将其推送到数据库中。 PHP 文件收集信息，无论是信息丢失还是提交成功，然后通过 AJAX 将这些信息返回到主页。然后，该信息会被推送到页面上的错误消息 div 中，以告知是否存在问题或一切是否成功。当我在一页上完成所有操作而无需使用其他表单的 AJAX 时，这种方法非常有效，但是这个页面涉及更多内容，因此我决定将所有内容稍微分解以使事情更整洁。当使用 if(array_key_exists("submit",$_POST)) { 时，似乎几乎就像在刷新发生后执行此操作？那么错误消息就在那里。当像我现在这样使用 AJAX 时，似乎错误消息是在刷新之前加载的，所以它就丢失了。这是我正在处理的内容:

<?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"); ?>

Answer 1

将按钮从 type="submit"更改为 type="button"。单击“提交”按钮会自动提交嵌入它们的表单。