CODEWITHSUNDEEP
javascriptphpjqueryhtml
Sudarshan
Sudarshan

Reputation: 1046

Radio button selection doesn't work

<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>

When I select first radio button, it works (submit button), but when I select second radio button 'submit button' doesn't work. I tried by putting the submit button within the div. But the result is same.Why? I can't understand.

area.php contains three selection boxes.

Upvotes: 1

Views: 584

Answers (2)

Rajan Goswami
Rajan Goswami

Reputation: 769

When Jquery code is getting parsed, the compiler does not recognize element checkpassport. This is because we are referring to the element even before declaring it. Move your Jquery code after the radio button. Its good practice to keep the Jquery code after the 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>

Upvotes: 0

ar em
ar em

Reputation: 444

try this

<form action="search_result.php" novalidate>

Upvotes: 1

Related Questions