简体   繁体   English

If else not working in Document Ready function

[英]If else not working in Document Ready function

I am creating a page that selects a different form for running different functions when a user selects different select options.当用户选择不同的 select 选项时,我正在创建一个页面,该页面选择不同的表单来运行不同的功能。 What I am having trouble with is keeping the form displayed when I submit the form for my second function, even though the one for the first function works perfectly.我遇到的问题是在我提交第二个 function 的表单时保持表单显示,即使第一个 function 的表单运行良好。 So that leads me to believe the problem is in my conditions in my document.ready function.所以这让我相信问题出在我的文档中。准备好 function。

 $(document).ready(function() {
            <?php

                $function = $_POST['function'];
                if($function === 'nameFunc'){

                    echo "$('.funcDisplay').show();";
                    echo "$('.output').html('$output');"; 

                }

                else if($function === 'hamFunc'){

                    echo "$('#hFunc').show();";
                    echo "$('.output').html('$output');"; 

                }
            ?>

         });

This is where I feel like the problem lies.这就是我觉得问题所在。

 <!DOCTYPE html>
    <?php
    if(isset($_POST['submit']))
    {


        if($_POST['function']== 'nameFunc')
        {
            $fname = $_POST['fname'];
            $lname = $_POST['lname'];
            $output = "Hi $fname $lname, welcome to my PHP challenge";
        }

        if($_POST['function']== 'hamFunc') {

            $output = 3;

        }

    }
    ?>
    <html>
    <head>
        <title></title>
        <link rel="stylesheet" type="text/css" href="bebk9hPHP.css">
        <script src="jquery-2.1.4.min.js"></script>

    </head>
    <body>
        <div class="contentWrapper">
            <h1 id="header">PHP Sample Project</h1>
            <h3 id = "sText">Form Selection</h3>
            <div class="custom-select">
                <select id="dropdown">
                    <option selected disabled hidden>Select a function</option>
                    <option value="1">Function 1</option>
                    <option value="2">Function 2</option>
                    <option value="3">Function 3</option>
                    <option value="4">Function 4</option>
                </select>
            </div>
            <div class="funcDisplay" id="funcDisp">
                    <h3>Name Function:</h3>
                   <form action="bebk9hPHP.php" method="post">
                        <input type="text" name="fname" class="name" id="fieldOne" placeholder="First name...">
                        <input type="text" name="lname" class="name" id="fieldTwo" placeholder="Last name...">
                        <input type="text" name="function" value="nameFunc" class="hidField">

                        <div class="submits">
                            <input type="submit" value="Submit" class="clear nsubmit" name="submit">
                            <input type="button" value="Clear" class="clear nclear">
                       </div>
                    </form>
                <h2 class = "output"></h2>

            </div>
            <div class="hfuncDisplay" id="hFunc">
                    <h3>Hamming Number Function:</h3>
                <form action="bebk9hPHP.php" method="get">
                    <input type="text" name="hnum" class="hnum" placeholder="Enter Possible Hamming Number">
                    <input type="text" name="function" value="hamFunc" class="hidField">
                    <div class="submits">
                         <input type="submit" value="Submit" class="clear nsubmit" name="submit">
                         <input type="button" value="Clear" class="clear nclear">
                    </div>
                </form>
            <h2 class="output"></h2>




            </div>

        </div>


     <script>

        $("#hidField").hide();

        $(".funcDisplay").hide();
        $(".hfuncDisplay").hide();

         $("#dropdown").change(function(){

         if($("#dropdown :selected").val() == 1) {
                $(".funcDisplay").show();
                $(".hfuncDisplay").hide();
                $('.output').html("");
         }

         else if($("#dropdown :selected").val() == 2)  {
                $("#hFunc").show();
                $(".funcDisplay").hide();
                $('.output').html("");
         }
         })

         $(document).ready(function() {
            <?php

                $function = $_POST['function'];
                if($function === 'nameFunc'){

                    echo "$('.funcDisplay').show();";
                    echo "$('.output').html('$output');"; 

                }

                else if($function === 'hamFunc'){

                    echo "$('#hFunc').show();";
                    echo "$('.output').html('$output');"; 

                }
            ?>

         });

    </script>
    </body>
</html>

And here is all of my html.这是我所有的 html。 Thanks for any help!谢谢你的帮助!

Move all of this into your document ready function before anything else runs in it:将所有这些移动到准备好的文档 function 中,然后在其中运行其他任何内容:

        $("#hidField").hide();

        $(".funcDisplay").hide();
        $(".hfuncDisplay").hide();

         $("#dropdown").change(function(){

         if($("#dropdown :selected").val() == 1) {
                $(".funcDisplay").show();
                $(".hfuncDisplay").hide();
                $('.output').html("");
         }

         else if($("#dropdown :selected").val() == 2)  {
                $("#hFunc").show();
                $(".funcDisplay").hide();
                $('.output').html("");
         }
         })

You declare hidField as a CSS class yet refer to in the jQuery selector as a CSS id.您将hidField声明为 CSS class 但在 jQuery 选择器中引用为 Z2C56C360580420DDFBZED31722。 Correct this:纠正这个:

$("#hidField").hide();

to

$(".hidField").hide();

Carefully go thru your code to weed out any other mistakes.通过您的代码仔细 go 以清除任何其他错误。 Consider renaming your identifiers to something that indicates more clearly as to what type of DOM elements they are.考虑将你的标识符重命名为更清楚地表明它们是什么类型的 DOM 元素。 This will help you debug better.这将帮助您更好地调试。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM