Need help with using image as submit button on form

[andrew55]

I have this simple form:

<form id="form1" name="form1" method="POST" action="do.signup.php">
<input type="text" size="22" name="first_name" id="first_name" value=""></td>
<input type="text" size="22" name="email" id="email" value=""><br />
<input name="Submit" type="button" onClick="all_fields();if (validate_form()) document.form1.submit();">
</form>

It works fine with this validation script:

<script type="text/JavaScript">
function validate_form(){
err = 'The following fields are not correct filled:\n';
if (document.form1.first_name.value == ''){
	err += 'No First Name.\n';
}
if (emailCheck(document.form1.email.value) == false){
	err += 'No Valid email.\n';
}
if (err != 'The following fields are not correct filled:\n'){
	alert (err);
	return false;
}
else{
		return true;
	}
}
var str_vars = '';
function all_fields(){
	str_vars = '';
	el = document.form1;
	for (var i = 0; i < el.elements.length; i++) {
		if (el.elements[i].value != '')
	  	str_vars += el.elements[i].name+'='+el.elements[i].value+'&';
	}
	str_vars = str_vars.substr(0,str_vars.length-15);;
}
</script>

Instead of the standard grey submit button, I am trying to get an image as the submit button in the form. Here is the modified version of the form, with the new submit image. Although this approach has worked in other forms for me, it is not working here and I can't figure out what to do to make it work properly. The form will submit fine, but if form is submitted without everything being entered properly, it redirects to the next page and gives an error message. Does anyone have a clue how to code the submit string so it will work properly? Thank you for any suggestions.

<form id="form1" name="form1" method="POST" action="do.signup.php">
<input type="text" size="22" name="first_name" id="first_name" value=""></td>
<input type="text" size="22" name="email" id="email" value=""><br />
<input type="image" src="/images/buttons/free-access.jpg" height="105" width="300" border="0" alt="Click for Free Sign Up!" onClick="all_fields();if (validate_form()) document.form1.submit();">
</form>

[Sammy12]

Why not just use a background to a standard input[type="submit"]?

.submit-button {
    background: url('/images/buttons/free-access.jpg');
}

<input type="submit" class="submit-button" value="Submit" />

There have been so many complaints, bugs, and browser inconsistencies with input[type="image"], I would advise you avoid it.

[felgall]

You shouldn't be using onclick on the submit button either - you should use onsubmit on the form tag instead as there are ways to submit a form that do not involve the submit button at all.

[andrew55]

Sammy12, thank you. This seems to work so far, a variation of what you suggested:

<input name="Submit" class="submit-button" onClick="all_fields();if (validate_form()) document.form1.submit();">

felgall: it's not my usually style of creating a form. It's a script which I didn't create and it is set up in this way. I will try to see if I can recode it though it may be over my head.

[felgall]

Originally Posted by andrew55

felgall: it's not my usually style of creating a form. It's a script which I didn't create and it is set up in this way. I will try to see if I can recode it though it may be over my head.

Simply move the onclick code from the button to the form tag and then change onclick to onsubmit.

So:

onClick="all_fields();if (validate_form()) document.form1.submit();"

gets deleted from the button and

onsubmit="all_fields();if (validate_form()) document.form1.submit();return false;"

gets added to the form tag.