JQuery Validation using a link instead of submit button

[samuurai]

Hi everyone,

I currently use javascript in an anchor tag to submit a form using

<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

[abduraooft]

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?

[prasanthmj]

Update this way:

<a href="#" onClick="if(document.myformname.onsubmit()){document.myformname.submit();}">Submit</a>

[samuurai]

Originally Posted by abduraooft

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.

Originally Posted by prasanthmj

<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!

[BrighterDesign]

Hi all,
I was hunting around the web for a similar issue and dropped on this old conversation.

Originally Posted by abduraooft

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.

<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:

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

[VIPStephan]

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)?

Originally Posted by BrighterDesign

<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">

Originally Posted by BrighterDesign

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.

Originally Posted by BrighterDesign

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.

[BrighterDesign]

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!

[BrighterDesign]

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.

<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;}

[VIPStephan]

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?

[BrighterDesign]

I'll ask elsewhere...

[VIPStephan]

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.