www.webdeveloper.com
Results 1 to 4 of 4

Thread: Problem with image buttons in javascript

  1. #1
    Join Date
    Jun 2011
    Posts
    8

    Unhappy Problem with image buttons in javascript

    So yeah, when I use the button without image

    <FORM>
    <INPUT type="button" value="lol" name="button1" style="z-index: 0; left: 105px; position: absolute; top: 310px" onClick="Continue() ">
    </FORM>

    It works just as it is supposed to, but when i do the same thing with an image
    button


    <FORM>
    <INPUT type="image" src="Files/ContinueButton.png" name="button1" style="z-index: 0; left: 105px; position: absolute; top: 310px" onClick="Continue() ">
    </FORM>

    it refreshes the page after doing the Continue() function.
    How can i make a simple button with an image that will execute Continue()
    when clicked without refresh?

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,377

    Lightbulb

    For starters, add this to your <form> tag.
    <form name="myForm" action="" method="post" onsubmit="return false">

    Here is an example with a dummy "Continue()" function:
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <title> Untitled </title>
    <script type="text/javascript">
    function Continue() { alert('Continue'); }
    </script>
    
    </head>
    <body>
    
    <form name="myForm" action="" method="post" onsubmit="return false">
    
    <INPUT type="button" value="lol" name="button1"
     style="z-index: 0; left: 105px; position: absolute; top: 110px" onClick="Continue() "> 
    
    <INPUT type="image" src="http://www.nova.edu/~rumsey/snoopy.gif" name="button1"
     style="z-index: 0; left: 105px; position: absolute; top: 210px" onClick="Continue() "> 
    
    </form>
    </body>
    </html>
    You don't show what Continue() does.

    If you need to validate something before submission of the form information, change to:
    Code:
    // in HEAD <script> section
    function validate() {
    // some validation leading to "valid" variable being set to true or false
      var valid = false;
      if (valid) { return true; } else { return false; }
    }
    
    // ...
    
    // in BODY section
    <form name="myForm" action="" method="post" onsubmit="return validate()">

  3. #3
    Join Date
    Jun 2011
    Posts
    8
    Thanks! It works fine now after i added the
    <form name="myForm" action="" method="post" onsubmit="return false">


  4. #4
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,377
    You're most welcome.
    Happy to help.
    Good Luck!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles