Need some resoultion. Javascript function not being called in click event in jquery.

Question

I am trying to call my function named isUrgencyTypeValid from my javascript code but it is not working. Please check what is the problem in my code. Alert should get displayed which is not being displayed

My javascript function is not being called.

HTML Code

       <td colspan="2" align="center"><input id="btnSubmit" type="submit" value="submit" runat="server"/></td></tr>

jQuery Call function

        $("#btnSubmit").bind("click",function(){
        alert(); // this is running
        isUrgencyTypeValid();

        });

javascript implemented function

function isUrgencyTypeValid()
    {
        alert("asd");
        var i=0;
        for(i=0;i<$("radio[name='urgencyType']").length;i++)
            {
            if($("radio[name='urgencyType']")[i].checked)
                {
                alert($("radio[name='urgencyType']")[i].value);                 
                return true;
            }           
        return false;
    }   

More description about my form is here

<form runat="server" name="myPage">
    <table style="width: 100%;" cellpadding="5" cellspacing="5">
        <caption>
            Computer Support / Service Request
        </caption>
        <tr><td>First Name</td>
            <td><input id="txtFirstName" type="text" value="First Name" runat="server"/><span class="error"></span></td></tr>

        <tr>
            <td>Last Name</td>
            <td><input id="txtLastName" type="text" value="Last Name" runat="server"/><span class="error"></span></td></tr>

        <tr>
            <td>Email Address</td>
            <td><input id="txtEmailAddress" type="text" value="Email Address" runat="server"/><span class="error"></span></td></tr>    

        <tr>
            <td>Phone No</td>
            <td><input id="txtPhoneNo" type="text" value="Phone No" runat="server" /><span class="error"></span></td></tr>

        <tr>
            <td>Do you have text messaging</td>
            <td>
                <span>Yes</span><input id="rdoYes" value="Yes" type="radio" runat="server"/>
                <span>No</span><input id="rdoNo" value="No" type="radio" runat="server"/><span class="error"></span>
            </td></tr>

        <tr>
            <td>Description of request*: </td>
            <td><textarea id="txtDescription" cols="50" rows="10" runat="server"></textarea><span class="error"></span><span id="lengthCount"></span></td></tr>

        <tr>
            <td>Urgency of this support request:</td>
            <td>
                <input id="rdoAnyTime" name="urgencyType" value="Anytime" type="radio" runat="server"/><span>Anytime</span><br />
                <input id="rdoCplDays" name="urgencyType" value="In the next couple of days" type="radio" runat="server"/><span>In the next couple of days</span><br />
                <input id="rdoToday" name="urgencyType" value="Today" type="radio" runat="server"/><span>Today</span><br />
                <input id="rdoUrgent" name="urgencyType" value="This is extremely urgent...I cannot wait!" type="radio" runat="server"/><span>This is extremely urgent...I cannot wait!</span><br />
                <input id="rdoTalkSometime" name="urgencyType" value="Please contact me and we'll talk about it" type="radio" runat="server"/><span>Please contact me and we'll talk about it</span><br /><span class="error"></span>
            </td></tr>

        <tr>
            <td colspan="2" align="center">Captcha To Be implemented.</td></tr>

        <tr>
            <td></td>
            <td><input id="chkRequestCopy" type="checkbox" runat="server"/>Please send me a copy of this service request</td></tr>

        <tr>
            <td colspan="2" align="center"><input id="btnSubmit" type="submit" value="submit" runat="server"/></td></tr>

    </table>    
</form>   

Answer 1

Your radio selector is incorrect.

There's not such thing as a radio element, but there is a :radio pseudo-class selector.

Your code should read:

function isUrgencyTypeValid()
{
    alert("asd");
    var i=0;
    for(i=0;i<$("input[name='urgencyType']:radio").length;i++)
        {
        if($("input[name='urgencyType']:radio")[i].checked)
            {
            alert($("input[name='urgencyType']:radio")[i].value);                 
            return true;
        }           
    return false;
}

** EDIT **

In addition to the changes above, since the alert never occurs, this indicates that isUrgencyTypeValid is not being called.

The most likely explanation is that you're not waiting until the DOM is loaded, before you bind the your handler to the click event of the button. You should have some code somewhere that looks like this:

$(function()
{
    /*
     * ... other code ...
     */

    $("#btnSubmit").bind("click",function(){
        isUrgencyTypeValid();
    });

    /*
     * ... other code ...
     */
}

Answer 2

Have you included the jquery library in your tags?

Put something like this at the top of your page:

 <script type="text/javascript" 
         src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;
 </script>   

Answer 3

I copied your code and ran into the same issue. Then I looked at it closer and noticed you are missing a closing bracket in your isUrgencyTypeValid() function. The closing bracket for your for loop is missing. Firefox Error Console will also show this.

Once I added the bracket the alert worked fine.

function isUrgencyTypeValid()
{
    alert("asd");
    var i=0;
    for(i=0;i<$("radio[name='urgencyType']").length;i++)
        {
        if($("radio[name='urgencyType']")[i].checked)
        {
            alert($("radio[name='urgencyType']")[i].value);                 
            return true;
        }  
    } //this was missing
    return false;
}