0

I have a Jquery function which opens a <a> tag to a division (similar to old twitter login) on click of link and closes on click of the another <div> tag (as I have set the hide() function to <div>'s id).

Now with this, the four radio buttons are not showing the change in checked status (the user interface look, where the dot shifts, when clicked).

Also, there is a submit button which needs to be doing its work of submitting its record, doesn't create any effect when i click. I mean, when i click, it doesn't respond.

As the both radio buttons and submit form button comes in <div> tag, and the <a> is above it in a separate div tag.

Can anyone please tel me what can be done?

Here is that Jquery:

$(document).ready(function(){

    $(".check_in").click(function()
    {
        $("#check_box").show();
        return false;
    });
    $("#mainbody").click(function()
    {
        $("#check_box").hide();
        return false;
    });
})

The link which uses the Jquery:

<div>
    <a href="#" class="check_in"> Check</a>
    <div id="check_box">
        <form method="post" action="/ucheck/">
            <label ><i>Name</i>
                <input type="text" name="name" id="name" /></label>
            <input type="submit" value="check "/>
        </form>
    </div>
</div>

The <div> tag on click of which the previous block hides:

<div id="mainbody" >
    <table>
        <tr align="left" >
            <td><input type="radio" name="property" id="rdRent" value="rent" checked="true" /><span class="lbltext" >Rent&nbsp;&nbsp;</span></td>
            <td><input type="radio" name="property" id="rdBuy" value="buy"/><span class="lbltext"> Buy&nbsp;&nbsp;</span></td>
            <td><input type="radio" name="property" id="rdHotels" value="hotels"/><span class="lbltext">Hotels&nbsp;&nbsp;</span></td>
            <td><input type="radio" name="property" id="rdPG" value="pg"/><span class="lbltext"> PG&nbsp;&nbsp;</span></td>
        </tr>
        <tr>
            <td>
                <!-- Other things of form -->

                <input type="submit" value="SEARCH" />
            </td>
        </tr>
    </table>
</div>

(PS: Using Django)

Thank you.

Brad Werth
  • 17,411
  • 10
  • 63
  • 88
Nagaraj Tantri
  • 5,172
  • 12
  • 54
  • 78

1 Answers1

1

Try removing the return false from your mainbody div like so

$("#mainbody").click(function()
{
    $("#check_box").hide();
});

The return false stops the click event from propagating and I don't think you need to do that in this instance.

http://jsfiddle.net/nickywaites/Vkjb6/

Nicky Waites
  • 2,428
  • 18
  • 19
  • 1
    @Nagaraj Glad to help. I just saw this great answer on SO that explains a bit about return false - might be handy for you. http://stackoverflow.com/questions/5927689/when-should-i-use-return-false-in-jquery-function/5927706#5927706 – Nicky Waites May 08 '11 at 13:54
  • Be sure to test your code after applying this solution. Return false is often useful for IE8, to prevent the entire page from refreshing. – Chris Jul 06 '13 at 20:01