Question

<form action="search_result.php">


    <table align="Left" width="98%" border="0">


        <tr>
            <td><h3><u><center><font color="#C71002">Search Blood</font></center></u></h3></td>
        </tr>
        <tr>
            <td align="Left">
                <b>Select Blood Group</b> <br/>
                <select name="b">
                    <option value="A+">A+</option>
                    <option value="A-">A-</option>
                    <option value="B+">B+</option>
                    <option value="B-">B-</option>
                </select>
            </td>
        </tr>



        <tr>
            <td>

                <div align="left">
                    <b>Search By</b>
                </div>
                <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
                <script type="text/javascript">
    $(function () {
        $("input[name='chkPassPort']").click(function () {
            if ($("#ins").is(":checked")) {
                $("#institute").show();
                $("#area").hide();
            } else {
                $("#institute").hide();
                $("#area").show();
            }
        });
    });
                </script>

                <input type="radio" id="ins" name="chkPassPort" />
                <label for="ins">
                    Institute
                </label>

                <input type="radio" id="arearadio" name="chkPassPort" />
                <label for="arearadio">
                    Area
                </label>

                <div id="institute" style="display: none">
                    <input type="text" name="institute" placeholder="Type an institute name" required >


                </div>
                <div id="area" style="display: none">

                    <?php
                    include 'area.php';
                    ?>


                </div>

            </td>                                                                                                                                                                    
        </tr>


        <tr>
            <td align="left">
                <div>
                    <input type="submit" value="Search">

                </div>
            </td>
        </tr>


    </table>
</form>

当我选择第一个单选按钮时，它可以工作（提交按钮），但是当我选择第二个单选按钮时，“提交按钮”不起作用。我尝试将提交按钮放在div中。但结果是一样的。为什么？我无法理解。

area.php包含三个选择框。

Answer 1

试试这个

<form action="search_result.php" novalidate>

Answer 2

解析Jquery代码时，编译器无法识别元素checkpassport。这是因为我们甚至在声明它之前就指的是元素。在单选按钮后移动Jquery代码。将Jquery代码保留在HTML之后的良好做法。

<form action="search_result.php">
        <table align="Left" width="98%" border="0">
            <tr>
                <td><h3><u><center><font color="#C71002">Search Blood</font></center></u></h3></td>
            </tr>
            <tr>
                <td align="Left">
                    <b>Select Blood Group</b> <br/>
                    <select name="b">
                        <option value="A+">A+</option>
                        <option value="A-">A-</option>
                        <option value="B+">B+</option>
                        <option value="B-">B-</option>
                    </select>
                </td>
            </tr>   
            <tr>
                <td>        
                    <div align="left">
                        <b>Search By</b>
                    </div>   
                    <input type="radio" id="ins" name="chkPassPort" />
                    <label for="ins">
                        Institute
                    </label>
                    <input type="radio" id="arearadio" name="chkPassPort" />
                    <label for="arearadio">
                        Area
                    </label>
                    <div id="institute" style="display: none">
                        <input type="text" name="institute" placeholder="Type an institute name" required >
                    </div>
                    <div id="area" style="display: none">
                        <?php
                        include 'area.php';
                        ?>
                    </div>
                </td>                                                                                                                                                                    
            </tr>
            <tr>
                <td align="left">
                    <div>
                        <input type="submit" value="Search">
                    </div>
                </td>
            </tr>
        </table>
                    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
                    <script type="text/javascript">
        $(function () {
            $("input[name='chkPassPort']").click(function () {
                if ($("#ins").is(":checked")) {
                    $("#institute").show();
                    $("#area").hide();
                } else {
                    $("#institute").hide();
                    $("#area").show();
                }
              return false;
            });
        });
                    </script>
    </form>

单选按钮选择不起作用

2 个答案: