I've finally worked out how to get my image replacement AND my form
validation working.  Here is my form (more or less):

<form action="index.php" method="post" name="frmLogin" 
id="frmLogin">

<fieldset>

<legend> Sign in </legend>

<p><span class='asterisk'>*</span> 
required fields </p>

<label for="username" class="followon" >Username<span
class='asterisk'>*</span></label>
<br />
<input name="username" id="username" 
type="text" size="20" tabindex="1" />
<br />
<label for="passwd" class="followon" >Password<span
class='asterisk'>*</span></label>
<br />
<input name="passwd" id="passwd" 
type="password" class="followon" size="20"  tabindex="2" />

<br />
<label for="remember">Remember me</label>
<input type="checkbox" name="remember" name="remember"
class="checkbox" value="yes"  tabindex="3" /> 
<br /><br />

<div id="submit-container">
<input type="image" name="submit" id="pretty-button"
value="Sign in" src="images/sign-in.gif" tabindex="4" /> 
</div>
                        
</fieldset>
</form>

Here is the css:
.img_button {
    cursor: pointer;
}

Here is the javascript:

function submitLoginForm() {
        if  ($("#username").val()=="" ) {
                alert ("Please complete the username fields."); 
                return false;
        } else if  ($("#passwd").val()=="" ) {
                alert ("Please complete the password field.");  
                return false;
        } else {
                $('#frmLogin')[0].submit();
        }
}

function loadLoginForm() {
        $("#submit-container").empty().append('<a id="submit"><img
src="images/sign-in.png" alt="Sign in" border="0" width="67" height="20"
tabindex="4" class"img_button" id="pretty-button" /></a>');
        $("#js").val("1");
        $("#submit").keydown( function() { 
                submitLoginForm(); 
                return false;
        }).click(function(){
                submitLoginForm();
                return false; 
        });
}


The trick is to wrap the replacement image in an empty link  (<a
id="submit">.. ).   Once inside this the form submission through javascript
works.
-- 
View this message in context: 
http://www.nabble.com/Form-not-submitting-tf3025179.html#a8421502
Sent from the JQuery mailing list archive at Nabble.com.


_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Reply via email to