Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Mar 2012
    Posts
    21
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Need help with using image as submit button on form

    I have this simple form:

    Code:
    <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:

    Code:
    <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.

    Code:
    <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
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    Why not just use a background to a standard input[type="submit"]?

    Code:
    .submit-button {
        background: url('/images/buttons/free-access.jpg');
    }
    Code:
    <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.
    Last edited by Sammy12; 09-18-2012 at 10:39 PM.

  • #3
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,633
    Thanks
    0
    Thanked 649 Times in 639 Posts
    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.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #4
    New Coder
    Join Date
    Mar 2012
    Posts
    21
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Sammy12, thank you. This seems to work so far, a variation of what you suggested:

    Code:
    <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.

  • #5
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,633
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Quote Originally Posted by andrew55 View Post

    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:

    Code:
    onClick="all_fields();if (validate_form()) document.form1.submit();"
    gets deleted from the button and

    Code:
    onsubmit="all_fields();if (validate_form()) document.form1.submit();return false;"
    gets added to the form tag.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •