SitePoint Sponsor

User Tag List

Results 1 to 10 of 10

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2002
    Posts
    74
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Reset button submitting form instead of clearing boxes

    I was using images as the submit and reset buttons on a form, I got the submit button working, but the reset button won't work it just submits the form, this is the code:
    <input type="image" src="clear.gif" name="reset" onClick="java script:document.Login.reset()">
    and the form code is:
    <FORM METHOD=POST ACTION="logme.php" name="Login">
    Does anyone know how to make it work like a normal reset button?
    Thanks!

  2. #2
    SitePoint Evangelist CyberFuture's Avatar
    Join Date
    May 2001
    Location
    San Diego, CA
    Posts
    434
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try this instead:

    <input type="image" src="clear.gif" name="reset" onClick="javascript:document.Login.reset()">


    JavaScript is one word not two.

  3. #3
    SitePoint Enthusiast
    Join Date
    Jun 2002
    Posts
    74
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry I forgot to say, I had tried that too! I've just changed it that many times that I forgot to change it back to javascript (one word)
    You see what it does is clears the boxes but then it submits the form, and if I've just put in an incorrect username and I want to clear it, I click clear and the boxes ar cleared, but then it loads the logme.php that says: Invalid User Name.
    Can it not just clear the form?

  4. #4
    SitePoint Evangelist CyberFuture's Avatar
    Join Date
    May 2001
    Location
    San Diego, CA
    Posts
    434
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think you need to post more code. I use this javascript on many of my forms and have never had a problem.

  5. #5
    SitePoint Enthusiast
    Join Date
    Jun 2002
    Posts
    74
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is the whole page it's just a login page with 2 input boxes and a login and reset button. The reset button clears the form, but then tries to log in as well?
    Code:
    <HTML>
    <HEAD>
    <TITLE>Login in to XYZPrint</TITLE>
    <TABLE WIDTH="100%" border=0>
    
    <TD WIDTH=62 VALIGN=BOTTOM><IMG SRC="XYZPrint1.png"></TD>
    <TD VALIGN=BOTTOM WIDTH=250><FONT FACE="COMIC SANS MS" SIZE=6>User Login</FONT></TD>
    <TD ALIGN=RIGHT>
    	<TABLE bgcolor=#F0E68C ALIGN=RIGHT>
    	<TD BGCOLOR="F0E68C" ALIGN=CENTER><FONT FACE="COMIC SANS MS" SIZE=1>
    	If you have authority to modify  
    	<BR>or add data please login here:
    	</FONT></TD>
    	<TR>
    	<TD BGCOLOR="F0E68C" ALIGN=CENTER><FONT FACE="COMIC SANS MS" SIZE=1>
    	<A HREF="/XYZPrint/Admin/admin_menu.php">Administrator</A>
    	</FONT></TD>
    	</TR>
    	<TR>
    	<TD BGCOLOR="F0E68C" ALIGN=CENTER><FONT FACE="COMIC SANS MS" SIZE=1>
    	<A HREF="/XYZPrint/SuperUser/suser_menu.php">Super User</A>
    	</FONT></TD>
    	</TR>
    	</TABLE>
    
    </TABLE>
    </HEAD>
    <FORM METHOD=POST ACTION="logme.php" name="Login">
    <BODY>
    <BR><BR>
    <TABLE WIDTH="100%" BORDER=0 ALIGN=CENTER CELLSPACING=0 CELLPADDING=5>
    <TR>
    <TD ALIGN=CENTER COLSPAN=2 BGCOLOR="D3D3D3"><FONT FACE="COMIC SANS MS" SIZE=3>
    Please login using your User Name and the Password provided during registration.
    </FONT></TD>
    </TR>
    
    <TR>	<TD COLSPAN=2>&nbsp</TD>
    </TR>
    
    <TR>
    <TD ROWSPAN=6></TD>
    <TD><B><FONT FACE="COMIC SANS MS" SIZE=2>User Name :</FONT></B></TD>
    </TR>
    
    <TR>
    <TD><INPUT TYPE=text SIZE=15 NAME="username"></TD>
    </TR>
    
    <TR>
    <TD WIDTH="57%"><B><FONT FACE="COMIC SANS MS" SIZE=2>Password :</FONT></B></TD>
    </TR>
    
    <TR>
    <TD><INPUT TYPE=password SIZE=15 NAME="password"></TD>
    </TR>
    
    <TR>	<TD>&nbsp</TD>
    </TR>
    
    <TR>
    	<TD>
    	<input type="image" src="weblogos\log_in.gif" name="submit" onClick="javascript:document.Login.submit()">
    
    	&nbsp&nbsp&nbsp&nbsp
    	<input type="image" src="weblogos\clear.gif" name="reset" onClick="javascript:document.Login.reset()">
    
    	</TD>
    </TR>
    </TABLE>
    
    <BR><BR><BR>
    <TABLE WIDTH="100%">
    <TR>
    	<TD ALIGN=CENTER VALIGN=BOTTOM>
    	<a href="user_entername.html"><IMG BORDER="0" SRC="weblogos\change_password.gif"></a>
    	<FONT FACE="COMIC SANS MS" SIZE=1><BR>If you cannot remember your password,
    	<BR>click to change it.</FONT>
    	</TD>
    
    
    	<TD ALIGN=CENTER VALIGN=BOTTOM>
    	<a href="Registration.html"><IMG BORDER="0" SRC="weblogos\register.gif"></a>
    	<FONT FACE="COMIC SANS MS" SIZE=1><BR>Click if you haven't registered yet.<BR>&nbsp</FONT>
    	</TD>
    </TR>
    </TABLE>
    
    </FORM>
    </BODY>
    </HTML>
    ??? Anyone?

  6. #6
    SitePoint Wizard
    Join Date
    Oct 2001
    Location
    Tucson, Arizona
    Posts
    1,858
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Navelly, the problem arises because an input element with type="image" has the action submit assigned to it. To get around that, simply do this:
    Code:
    Change:
    <input type="image" src="weblogos\clear.gif" name="reset" onClick="java script:document.Login.reset()">
    
    To:
    <img src="weblogos\clear.gif" alt="" onclick="document.Login.reset();" />

  7. #7
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There is a much better way to handle this then what is mentioned above
    Code:
    <input type="image" src="clear.gif" alt="Reset" onClick="this.form.reset(); return false;" />
    <input type="image" src="send.gif" alt="Submit" />
    By using true INPUT type=image objects for the images instead of regular IMAGE objects we gain the power of using 'this', which removes the necessity of hard-coding the form's DOM name into the onClick() event. (this.form references the form the input is located in) Remember, portable code = better code.

    By simply adding 'return false();' to the onClick() event for the reset button, we cancel it's default action, which is to submit the form.
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  8. #8
    Currently Occupied; Till Sunda Andrew-J2000's Avatar
    Join Date
    Aug 2001
    Location
    London
    Posts
    2,475
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I thought there was a downfall to this method, but I can't think what it was, i think it was something to do with referencing the object or sumting like that

  9. #9
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by Andrew-J2000
    I thought there was a downfall to this method, but I can't think what it was, i think it was something to do with referencing the object or sumting like that
    If there is, post it here when you find it becuase I haven't the slightest what that is.
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  10. #10
    SitePoint Enthusiast
    Join Date
    Jun 2002
    Posts
    74
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks all, I had to leave this problem to the side for a while 'cos I had a bigger problem, still not solved!
    I got it working with this:
    Code:
    <input type="image" src="weblogos\log_in.gif" name="submit" onClick="javascript:document.Login.submit()">
    
    	&nbsp&nbsp&nbsp&nbsp
    	<img src="weblogos\clear.gif" alt="" onclick="document.Login.reset();" />
    It clears the form fine, and the other submit button still works fine!
    Thanks for you help!


Bookmarks

Posting Permissions

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