Welcome to WebmasterWorld Guest from 184.73.13.66

Forum Moderators: incrediBILL

Message Too Old, No Replies

Need help with using image as submit button on form

html form with image

   
8:36 pm on Sep 18, 2012 (gmt 0)



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>
2:46 pm on Sep 20, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



could you use the first block of code and set the image as a background to the input with css?
2:10 pm on Sep 23, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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.