Cart Checkout Issue (jQuery & Cart Form Submission)

[Nullified]

I am trying to use jquery to validate a customfield upon form submit button click, however the input field named submit is creating issues when trying to call this.form.submit(); to finish submission of the form. Why is this input field even in the cart form and does anyone know a way I can get around this?

 

Form:

<form method="post" action="{$smarty.server.PHP_SELF}?a=checkout" name="orderfrm" id="orderfrm">
<input type="hidden" name="submit" value="true" />
<input type="submit" class="buttoncomplete" id="validateUser" value="{$LANG.completeorder}"{if $cartitems eq 0} disabled="disabled"{/if} />

Javascript:

jQuery(document).ready(function() {
jQuery('#validateUser').click(function(event) {
	event.preventDefault();
	if (this.form.name == "orderfrm") {
		showID("processingCircle");
		jQuery("#validateUser").attr("disabled", "disabled");
	}
	jQuery.post("includes/vbulletin.php", {task: "check", username: jQuery("#customfield1").val()}, function(result) {
		if (result == "available") {
			if (jQuery("#validateUser").attr("disabled") == "disabled") {jQuery("#validateUser").attr("disabled", false).removeAttr("disabled");}
			if (this.form.name == "orderfrm") {[b]jQuery("#orderfrm").submit();[/b]} else {this.form.submit();}
		} else if (result == "error") {
			alert("The messageboard username you have chosen is invalid. Please try a different name.");
			jQuery("#customfield1").css({"border":"1px #ff0000 solid"}).focus().select();
			if (jQuery("#processingCircle").css({'display':'block'})) {jQuery("#processingCircle").css({'display':'none'});}
			if (jQuery("#validateUser").attr("disabled") == "disabled") {jQuery("#validateUser").attr("disabled", false).removeAttr("disabled");}
		} else if (result == "unavailable") {
			alert("The messageboard username you have chosen is not available. Please try a different name.");
			jQuery("#customfield1").css({"border":"1px #ff0000 solid"}).focus().select();
			if (jQuery("#processingCircle").css({'display':'block'})) {jQuery("#processingCircle").css({'display':'none'});}
			if (jQuery("#validateUser").attr("disabled") == "disabled") {jQuery("#validateUser").attr("disabled", false).removeAttr("disabled");}
		} else {
			alert("Some strange error occured. You probably tried use some crazy messageboard username...");
			jQuery("#customfield1").css({"border":"1px #ff0000 solid"}).focus().select();
			if (jQuery("#processingCircle").css({'display':'block'})) {jQuery("#processingCircle").css({'display':'none'});}
			if (jQuery("#validateUser").attr("disabled") == "disabled") {jQuery("#validateUser").attr("disabled", false).removeAttr("disabled");}
		}
	});
});
});

[Nullified]

I got the form to submit by removing the <input> named submit (which is bad coding), however now I cannot get it added back. I changed the click function to:

	$('#validateUser').click(function(event) {
	event.preventDefault();
	var frm = this.form;
	if (frm.name == "orderfrm") {showID("processingCircle"); jQuery("#validateUser").attr("disabled", "disabled");}
	jQuery.post("includes/vbulletin.php", {task: "check", username: jQuery("#customfield1").val()}, function(result) {
		if (result == "available") {
			frm.submit();
		} else if (result == "error") {
			alert("The messageboard username you have chosen is invalid. Please try a different name.");
		} else if (result == "unavailable") {
			alert("The messageboard username you have chosen is not available. Please try a different name.");
		} else {
			alert("Some strange error occured. You probably tried using some crazy messageboard username...");
		}
		if (result != "available") {
			jQuery("#customfield1").css({"border":"1px #ff0000 solid"}).focus().select();
			if (jQuery("#processingCircle").css({'display':'block'})) {jQuery("#processingCircle").css({'display':'none'});}
			if (jQuery("#validateUser").attr("disabled") == "disabled") {jQuery("#validateUser").attr("disabled", false).removeAttr("disabled");}
		}
	});
});

 

I have tried using several variations of something like this to add the form item back to the form during submit, but it seems that frm.submit (from the above function) will not call this:

$("#orderfrm").submit(function() {
alert(jQuery("input[name=submit]").val());
jQuery('<input>').attr({type: "hidden", name: "submit", value: "true"}).appendTo("#orderfrm");
});

&

//html
<form method="post" action="{$smarty.server.PHP_SELF}?a=checkout" name="orderfrm" id="orderfrm" onsubmit="processOrder()">

//javascript function
function processOrder() {
alert("Form Submitted");
jQuery('<input>').attr({type: "hidden", name: "submit", value: "true"}).appendTo("#orderfrm");
}

the basic alert event never even activates.