...

View Full Version : 2 Onsubmit functions in same form, HOW?



radbe
06-23-2004, 06:54 PM
I have a script in which I would like to disable the submit button to prevent multiple submission,
Ive found a script that will do this for me the problem is my form already have an onsubmit function pertaining to passwords
Is there a way I can still incorporate the two without problems..

Here is the form and the code I would like to incorporate..

The Form


<html>

<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>Member Login</title>

<style>
<!--
INPUT.button { background-color:#eeeeee;font:verdana;font-weight:bold;color:#000080;font-size:10pt; }
-->
</style>

<style type="text/css"><!-- #surveyDiv {position:absolute; height:1; width:1; top:0; left:0;} --></style>


</head>

<body>

<form method="POST" action="login.cgi" name=form1 onSubmit="return SetPass();">
<input type=hidden name=command value="login">
<div align="center">
<center>
<table cellpadding="0" width="100%" height="100%" border="0" cellspacing="0"><tr><td valign="middle" align="center">
<table border="1" cellpadding="5" cellspacing="0" bordercolorlight="#000000" bordercolordark="#FFFFFF" bgcolor="#FFFFFF">
<tr>
<td bgcolor="#000000">
<div align="center">

<div align="center">
<table border="0" cellpadding="2" cellspacing="0">
<tr>
<td align="center" colspan="2">
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="100%">
<table border="1" cellpadding="5" cellspacing="0" bordercolorlight="#000000" bordercolordark="#FFFFFF" bgcolor="#FFFFFF" width="100%">
<tr>
<td width="100%" valign="middle" align="right"><p align="center"><font color="#FFFFFF" face="Tahoma"><b><img border="0" src="http://www.cgiscript.net/spacer.gif" width="1" height="1"><img border="0" src="login.jpg" width="360" height="272">&nbsp;</b></font></p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="#C09133">
<table border="0" cellpadding="5" cellspacing="0" bordercolorlight="#000000" bordercolordark="#FFFFFF" bgcolor="#FFFFFF" width="100%">
<tr>
<td width="100%" valign="middle" align="center" bgcolor="#C09133">
<table border="0" cellspacing="0" cellpadding="3">
<tr>
<td align="right" bgcolor="#C09133"><font size="2" face="verdana,arial,helvetica"><b>Username</b></font><font face="verdana,arial,helvetica"><b><font size="2">:
</font></b></font></td>
<td bgcolor="#C09133"><input type="text" name="UserName" size="30"></td>
</tr>
<tr>
<td align="right" bgcolor="#C09133"><font face="verdana,arial,helvetica"><b><font size="2">Password:
</font></b></font></td>
<td bgcolor="#C09133"><input type="password" name="PassWord" size="30"></td>
</tr>
<tr>
<td align="right" bgcolor="#C09133"><font face="verdana,arial,helvetica"><b><font size="2">Select Folder:
</font></b></font></td>
<td bgcolor="#C09133"><select size="1" name="dir">
in(options)
</select></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td valign="bottom" bgcolor="#C09133">
<font size="2">
<input CLASS="button" type="submit" value="Login" name="B1" style="font-size: 10px">
&nbsp;&nbsp;&nbsp; </font>
</td>
</tr>
</center>
<tr>
<td align="center" colspan="2" bgcolor="#000000">
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="100%">
<table border="1" cellpadding="5" cellspacing="0" bordercolorlight="#000000" bordercolordark="#FFFFFF" bgcolor="#FFFFFF" width="100%">
<tr>
<td width="100%" valign="middle" align="right" bgcolor="#C09133"><p align="center"><img border="0" src="http://www.cgiscript.net/spacer.gif" width="1" height="1"></p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>

</div>
</td>
</tr>
</table>
</td></tr></table>
</div>
</form>

</body>
<script language=javascript>
document.form1.UserName.focus();
function SetPass(){
var UserName = document.form1.UserName.value;
var PassWord = document.form1.PassWord.value;
if(!UserName){
alert("Error. Please enter a username");
return false;
}
if(!PassWord){
alert("Error. Please enter a password");
return false;
}
document.cookie = "UserName="+UserName+";path=/";
document.cookie = "PassWord="+PassWord+";path=/";
return true;
}
</script>
</html>

Here's the Code for the submit once validation form
(being placed in the head of the page)


<script>

function submitonce(theform){
//if IE 4+ or NS 6+
if (document.all||document.getElementById){
//screen thru every element in the form, and hunt down "submit" and "reset"
for (i=0;i<theform.length;i++){
var tempobj=theform.elements[i]
if(tempobj.type.toLowerCase()=="submit"||tempobj.type.toLowerCase()=="reset")
//disable em
tempobj.disabled=true
}
}
}
</script>

And the required onsubmit function to be added to the Form


<form method="POST" onSubmit="submitonce(this)">

homerUK
06-23-2004, 07:01 PM
you can either make a new function, eg:



function submitIt(ctrl)
{
SetPass();
submitonce(ctrl);
}
}


and put

<form method="POST" onSubmit="return submitIt(this);">

or use

<form method="POST" onSubmit="submitonce(this); return SetPass();">

Roy Sinclair
06-23-2004, 07:32 PM
HomerUK is almost right except if the password is missing the user will be unable to submit again because the submitonce function has already disabled the submit button.

I suggest you add a call to the submitonce function just before the "return true" in the SetPass function. Make sure you provide the form object in that call since the submitonce function requires it.

homerUK
06-23-2004, 08:14 PM
ah yes, didn't notice that!
you think something like



function submitIt(ctrl)
{
if (SetPass()) {
submitonce(ctrl);
}
}

would work? if the setPass is returned true, it will then submit... would that work the same as you said?

Roy Sinclair
06-23-2004, 09:12 PM
ah yes, didn't notice that!
you think something like



function submitIt(ctrl)
{
if (SetPass()) {
submitonce(ctrl);
}
}

would work? if the setPass is returned true, it will then submit... would that work the same as you said?

You still need to return a value from the submitIt function reflecting the return value from the setpass function, otherwise the submit will occur even if the SetPass function tries to cancel it.

For using an additional function the following would work:


function submitIt(ctrl)
{
var YeaOrNay = SetPass();
if (YeaOrNay) {
submitonce(ctrl);
return YeaOrNay;
}
}

glenngv
06-24-2004, 04:42 AM
You can combine the two functions without an extra function.

onsubmit="return SetPass() && submitonce(this)"

For efficiency and consistency, you can also pass the form reference to the SetPass() function as submitonce() function did.

onsubmit="return SetPass(this) && submitonce(this)"

And then changing the SetPass to this:


function SetPass(frm){
var UserName = frm.UserName.value;
var PassWord = frm.PassWord.value;
if(!UserName){
alert("Error. Please enter a username");
frm.UserName.focus();
return false;
}
if(!PassWord){
alert("Error. Please enter a password");
frm.Password.focus();
return false;
}
document.cookie = "UserName="+escape(UserName)+";path=/";
document.cookie = "PassWord="+escape(PassWord)+";path=/";
return true;
}

I further improved the function by changing/adding appropriate codes.
Escaping the cookie value preserves the special characters in it.
If you are also using javascript to retrieve the cookie, you should unescape() the value.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum