Need help with using image as submit button on form

html form with image

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

[benihana]

could you use the first block of code and set the image as a background to the input with css?

[MichaelBluejay]

Your problem has nothing to do with the fact that you're using an image. And before I tell you what the problem is, what's more important is that you learn *how* to troubleshoot these kinds of problems.

(1) The first thing you should have done was to replace the "bad" <input...> (submit) line with the "good" <input...> (submit) line. You would have found that the "good" line didn't work either. You would have then learned that your idea that one line was "good" and the other was "bad" was wrong. The <input...> line is not where the problem lies.

(2) Use the Firefox Javascript debugger. I just put your code in a file on my server, loaded the page in Firefox, and Firefox showed me the error immediately. Show the Firefox debugger with Tools > Web Developer > Error Console.

(3) In cases where the above isn't helpful, start with a completely blank file and build it one line at a time, continuing to check to see at what point the script fails.

The problem was that the emailCheck function you called is undefined.