Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    Regular Coder
    Join Date
    Nov 2007
    Posts
    144
    Thanks
    64
    Thanked 0 Times in 0 Posts

    JQuery Validation using a link instead of submit button

    Hi everyone,

    I currently use javascript in an anchor tag to submit a form using
    Code:
    <a href="#" onClick="document.myformname.submit(); return false;">Submit</a>
    The only problem is, JQuery doesn't acknowledge that my form has been submitted.

    Has anyone come up against this problem before? If so, can you please share your work around?

    Thank you!

    B
    Last edited by samuurai; 09-30-2009 at 11:58 AM.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    I currently use javascript in an anchor tag to submit a form using
    That's not a good approach as people with no javascript support in their browser may face some accessibility issues. Instead of that, you should consider a progressive enhancement approach while adding any additional effects to your document, leaving the basic behavior of your form intact, for those users.

    Now, let me ask, why do you need to use a link there instead of a normal submit button?
    Last edited by abduraooft; 09-30-2009 at 12:23 PM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    samuurai (09-30-2009)

  • #3
    Regular Coder
    Join Date
    Jul 2003
    Posts
    117
    Thanks
    0
    Thanked 17 Times in 17 Posts
    Update this way:
    Code:
    <a href="#" onClick="if(document.myformname.onsubmit()){document.myformname.submit();}">Submit</a>

  • Users who have thanked prasanthmj for this post:

    samuurai (09-30-2009)

  • #4
    Regular Coder
    Join Date
    Nov 2007
    Posts
    144
    Thanks
    64
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    Now, let me ask, why do you need to use a link there instead of a normal submit button?
    This is my first website. I used it because I got someone else to do the design for me. I just worked out how to apply those same CSS rules to a submit button, so I'm using that rather than an anchor now. Feels better doing it this way. Thanks for your guidance.

    Quote Originally Posted by prasanthmj View Post
    Code:
    <a href="#" onClick="if(document.myformname.onsubmit()){document.myformname.submit();}">Submit</a>
    Thanks for this - I decided to use submit buttons. It feels cleaner doing it this way. Thanks!

  • #5
    New to the CF scene
    Join Date
    May 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi all,
    I was hunting around the web for a similar issue and dropped on this old conversation.

    Quote Originally Posted by abduraooft View Post
    Now, let me ask, why do you need to use a link there instead of a normal submit button?
    I have a reason!
    Because my form will be converted to 20+ languages and I would like to use a pretty button, I have made a submit using a link so that the text length pushes the size of the button.

    Where translation engines will convert normal text, links and labels, it will not convert text within button code and javascript.

    The following gives me the button I want, that will translate, but it bypasses the jquery tools validation script.
    I just dont know enough about javascript to adapt the validation script to activate when I submit in this way.

    Code:
    <a class="submitBtn" href="javascript: submitform()"><span>REGISTER</span></a>
    
    <script>
    function submitform()
    {
        document.forms["MyformName"].submit();
    }
    </script>

    and here is the script it ignores because I use the above link instead of a standard submit button:

    Code:
    var validate_return = function ()
    {
    jQuery.tools.validator.localize("en", {
    '*' : 'required',
    ':email' : 'required',
    ':number' : 'required',
    '[required]' : 'required'
    });
    
    	jQuery.tools.validator.fn("select[required=required]", function(input, value) {
        // If the first item in the list is selected return FALSE
        return !input[0].options[0].selected;
    });
    
    jQuery("#MyformName").bind("onFail", function(e, errors) {
    if (e.originalEvent.type == 'submit') {
    		var form_errors = document.getElementById("final_error");
    		form_errors.style.display = "block";
    jQuery.each(errors, function() {
    var input = this.input;
    input.css({borderColor: 'red'}).focus(function() {
    input.css({borderColor: '#CCCCCC'});
    });
    });
    }
    });
    
    jQuery("#MyformName").validator();
    }
    window.onload = function ()
    {
    validate_return();
    };
    If someone more comfortable with javascript can offer a solution I would be grateful and it will save me lots of work and make my forms look gorgeous

  • #6
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,480
    Thanks
    6
    Thanked 981 Times in 954 Posts
    Before anything else let me remind you that you have to do any form validation on the server side before you even think about adding JS validation.

    Now, why are you even talking about jQuery when you donít actually use it for the submit event (and this also relates to the original question although it doesnít matter anymore)?

    Quote Originally Posted by BrighterDesign View Post
    Code:
    <a class="submitBtn" href="javascript: submitform()"><span>REGISTER</span></a>
    
    <script>
    function submitform()
    {
        document.forms["MyformName"].submit();
    }
    </script>
    First of all, this is bad HTML. You have an anchor there that has no function if JS is not available for whatever reason. And you should never ever write javascript:example() in an anchorís href attribute again. It might work but itís just bad practice. Also, the script element must have a type attribute with value text/javascript like so: <script type="text/javascript">

    Quote Originally Posted by BrighterDesign View Post
    Because my form will be converted to 20+ languages and I would like to use a pretty button, I have made a submit using a link so that the text length pushes the size of the button.
    Submit buttons adapt to the size of the containing text just as nicely. And you can style them almost any way you like, too.

    Quote Originally Posted by BrighterDesign View Post
    Where translation engines will convert normal text, links and labels, it will not convert text within button code and javascript.
    What kind of translation engine is that? This is kind of stupid. Is this the validatorís localization functionality? Because youíre not actually translating the form, you are translating the error messages. And since a submit button has no error message there is nothing to translate.

    How is the language determined anyway? Usually you click on some kind of language link and the content is served in the according language. This is also how the submit buttonís language should be set.

  • #7
    New to the CF scene
    Join Date
    May 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    wow!, you like to pick hairs to not offer any solution lol.

    For a start, I am unable to use server side for this particular form, otherwise I wouldnt be using javascript at all.

    I know how to declare javascript W3C style but what is the point for pasting a cut down example. The rounded button is styled using sliding doors css2 and the design couldnt be recreated in css3.

    The kind of translation engine that doesnt convert text within scripts and code would be rather a sensible one I think!

  • #8
    New to the CF scene
    Join Date
    May 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    As much as it pains me, the company insists on using a universal formmail script and disallows usage of PHP. The jquery validation does offer full language support even though I have pasted in a straight laced 'en' version to keep the example short because it has nothing to do with resolving the issue.

    However, let me show you the button a little more properly.




    Code:
    
    <a class="submitBtn" href="javascript: submitform()"><span>Will translate</span></a>
       
    <input type="submit" value="won't translate" />
    
    
    
    The CSS - sorry, condensed:
    
    a.submitBtn { height:43px; float:right; padding-right:57px; color:#FFF; background-image:url(../bluebut-right.png); background-position:top right; background-repeat:no-repeat; text-align:left; display:block;}
    a.submitBtn span { font-size:20px; line-height:39px; padding-left:49px; background-image:url(../bluebut-main.png);  background-position:top left; background-repeat:no-repeat; height:43px; display:block;text-align:left;  }
    a.submitBtn:hover span{background-position:bottom left;} a.submitBtn:hover {background-position:bottom right;}

  • #9
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,480
    Thanks
    6
    Thanked 981 Times in 954 Posts
    I am still confused about how the language to be shown is determined in the first place. I mean, how does the script know what language I speak when I access the page? Because as far as I can see, the validator script you are using is just translating the error messages (i. e. it assumes one default language in which the page is shown and to which the error messages are translated), not the contents of the page itself (and the form, including the submit button, is part of the contents, not an error message, which is why it’s not translated). So, once again: how is the language of the content to be shown determined in the first place?

  • #10
    New to the CF scene
    Join Date
    May 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'll ask elsewhere...

  • #11
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,480
    Thanks
    6
    Thanked 981 Times in 954 Posts
    Pfff, can’t you see that I’m trying to help you here? You fail to see that you are trying to put the cart before the horse with that. You are trying to fix the symptoms you see without understanding the root of the problem. And then you are ungrateful and don’t even provide the info required for others to understand the problem in order to do it the right way.

    Arrgh, such ignorance makes me angry.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •