How to submit the form and hide and show the image and button using jquery
<p>I am using JQuery</p>

<p>I am having below html:</p>

<p><strong>HTML Code:</strong></p>

<pre><code> &lt;div id="skywardsLogin" style="display: none;"&gt;
            &lt;div class="formContainer" id="loginDetails"&gt;
                &lt;form action="#" id="frmLogin" class="homeWidget"&gt;
                    &lt;table border="0" cellpadding="0" cellspacing="0"&gt;
                        &lt;tr&gt;
                            &lt;td class="formLabel" width="100"&gt;
                                &lt;label for="skywardsNumber" title="Skywards Number"&gt;
                                    Skywards Number&lt;/label&gt;&lt;/td&gt;
                            &lt;td&gt;
                                &lt;input class="formField" id="skywardsNumber" name="skywardsNumber" size="25" type="text" /&gt;&lt;/td&gt;
                            &lt;td class="formLink"&gt;
                                &lt;a class="iconHelpBox" href="#"&gt;Forgot number&lt;/a&gt;&lt;/td&gt;
                        &lt;/tr&gt;
                        &lt;tr&gt;
                            &lt;td class="formLabel"&gt;
                                &lt;label for="password"&gt;
                                    Password&lt;/label&gt;&lt;/td&gt;
                            &lt;td&gt;
                                &lt;input class="formField" id="password" name="password" size="25" type="password" /&gt;&lt;/td&gt;
                            &lt;td class="formLink"&gt;
                                &lt;a class="iconHelpBox" href="#"&gt;Forgot password&lt;/a&gt;&lt;/td&gt;
                        &lt;/tr&gt;
                    &lt;/table&gt;
                &lt;/form&gt;
            &lt;/div&gt;
            &lt;div class="horRuleWhite"&gt;
                &lt;hr /&gt;
            &lt;/div&gt;
            &lt;div class="continueBar"&gt;
                &lt;div class="continueBarLeft"&gt;
                    &lt;p class="validateTips" style="color: Red"&gt;
                    &lt;/p&gt;
                &lt;/div&gt;
                &lt;div class="continueBarRightButton"&gt;
                    &lt;input alt="Log In" id="loginButton" src="system/images/form_buttons/button_log_in.gif"
                        title="Log In" type="image" /&gt;
                    &lt;div id="ajaxloading" style="display: none"&gt;
                        &lt;img align="absmiddle" src="system/images/spinner.gif" alt="Processing..."/&gt;&amp;nbsp;Processing...
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
</code></pre>

<p><strong>JQuery Code:</strong></p>

<pre><code>/ Dialog            
    $('#skywardsLoginLink').click(function(){
        $('#skywardsLogin').dialog({
            autoOpen: true,
            width: 450,
            modal: true,
            title: 'Login to your Skywards Account'
        });
        if($('#skywardsLogin').is(':visible')) {
            hideSelect();
        } else {
            showSelect();
        }
    });

//Login Button Clicked
$('#loginButton').click(function()
{
    var bValid = true;
    bValid = bValid &amp;&amp; checkLength( skywardNo, "Skyward No", 3, 16 );
    bValid = bValid &amp;&amp; checkLength( password, "password", 5, 16 );

    if ( bValid ) 
    {      
       $("#loginDetails &gt; form").submit();
        allFields.val("");
        tips.text("");
    }
});

 //Submitting the form
$("#loginDetails &gt; form").submit(function()
{  
    //Hiding the Login button
    ("#loginButton").hide();

    //Showing the ajax loading image
    ("#ajaxloading").show();

    // 'this' refers to the current submitted form  
    var str = $(this).serialize();   
    // -- Start AJAX Call --

    $.ajax({  
        type: "POST",
        url: "Login.aspx",  // Send the login info to this page
        data: str,  
        success: function(msg)
        {  

            $("#loginDetails").ajaxComplete(function(event, request, settings){  

             // Show 'Submit' Button
            $('#loginButton').show();

            // Hide Gif Spinning Rotator
            $('#ajaxloading').hide();  

             if(msg == 'OK') // LOGIN OK?
             {  
                $('a.modalCloseImg').hide();  

                $(this).html(login_response); // Refers to 'status'

            // After 3 seconds redirect the 
            //setTimeout('go_to_private_page()', 3000); 
         }  
         else // ERROR?
         {  
             var login_response = msg;
             $('#login_response').html(login_response);
         }  

     });  

     }  

    });  

    // -- End AJAX Call --

    return false; 
});      
</code></pre>

<p>I am trying to call modal popup dialog box, in which it will validate the username and password and if all is valid the form <strong>#loginDetails > form</strong> will be submitted, the form is getting submitted, however its giving error (<strong>#loginButton".hide is not a function</strong>)on below line</p>

<pre><code>//Hiding the Login button
    ("#loginButton").hide();

    //Showing the ajax loading image
    ("#ajaxloading").show();
</code></pre>

<p>Any idea what can be the reason as we have got both the IDs in my html.</p>

<p>Thanks. </p>
