homepage Welcome to WebmasterWorld Guest from 23.20.112.161
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

    
Need help with using image as submit button on form
html form with image
andrew55




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

 

benihana




msg:4497850
 2:46 pm on Sep 20, 2012 (gmt 0)

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

MichaelBluejay




msg:4498815
 2:10 pm on Sep 23, 2012 (gmt 0)

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved