OnClick and onSubmit

M

Mike

I have 2 functions:
One checks that 2 password fields have the same value and one runs the
form fields though some AJax to a php file.
OnSubmit never seems to run:


<form name="Acct" onSubmit="process(Email.value,Password.value)">
<p class="LoginFont">
E-mail said:
<DIV ID="email_result">&nbsp;</DIV>
Password <input name="Password" id="password1" size="30"
type="password" /><br />
Password Again <input name="Password2" id="password2" size="30"
type="password" /><br />
<DIV ID="password_result">&nbsp;</DIV>
</p>
<label>
<input type="button" name="LoginButton" id="LoginButton"
value="Login" onClick="validatePwd()" /></form>
 
E

Evertjan.

Mike wrote on 22 mrt 2010 in comp.lang.javascript:
I have 2 functions:
One checks that 2 password fields have the same value and one runs the
form fields though some AJax to a php file.
OnSubmit never seems to run:


<form name="Acct" onSubmit="process(Email.value,Password.value)">

onSubmit="return process(Email.value,Password.value)"

forget about the onclick
 
T

Thomas 'PointedEars' Lahn

Mike said:
Mike wrote on 22 mrt 2010 in comp.lang.javascript:
I have 2 functions:
One checks that 2 password fields have the same value and one runs the
form fields though some AJax to a php file.
OnSubmit never seems to run:
<form name="Acct" onSubmit="process(Email.value,Password.value)">

onSubmit="return process(Email.value,Password.value)"

forget about the onclick
[...]

What about validatePw?

You can call it before process(), or process() can call it. In any case,

<... onSubmit="process(Email.value,Password.value) ...>

is not supposed to work. Change to

<... onsubmit="return process(this.elements['Email'].value,
this.elements['Password'].value)" ...>

(note the character case, and remove the newline.) It can get even shorter
if you pass the form object reference and go from there:

<... onsubmit="return process(this)" ...>

See also <http://validator.w3.org/>. (Observing the results might lead you
to the correct conclusion to better not use XHTML, especially not with DOM
scripting.)


PointedEars
 
M

Mike

Mike said:
Mike wrote on 22 mrt 2010 in comp.lang.javascript:
I have 2 functions:
One checks that 2 password fields have the same value and one runs the
form fields though some AJax to a php file.
OnSubmit never seems to run:
<form name="Acct" onSubmit="process(Email.value,Password.value)">
onSubmit="return process(Email.value,Password.value)"
forget about the onclick
[...]
What about validatePw?

You can call it before process(), or process() can call it.  In any case,

  <... onSubmit="process(Email.value,Password.value) ...>

is not supposed to work.  Change to

  <... onsubmit="return process(this.elements['Email'].value,
this.elements['Password'].value)" ...>

(note the character case, and remove the newline.)  It can get even shorter
if you pass the form object reference and go from there:

  <... onsubmit="return process(this)" ...>

See also <http://validator.w3.org/>.  (Observing the results might leadyou
to the correct conclusion to better not use XHTML, especially not with DOM
scripting.)

PointedEars
--
Danny Goodman's books are out of date and teach practices that are
positively harmful for cross-browser scripting.
 -- Richard Cornford, cljs, <[email protected]> (2004)- Hide quoted text -

- Show quoted text -

Can you do an onSubmit and an onClick?
Does one take precedence?
 
T

Thomas 'PointedEars' Lahn

Mike said:
Thomas said:
Mike said:
:
Mike wrote:
I have 2 functions:
One checks that 2 password fields have the same value and one runs
the form fields though some AJax to a php file.
OnSubmit never seems to run:

<form name="Acct" onSubmit="process(Email.value,Password.value)">

onSubmit="return process(Email.value,Password.value)"

forget about the onclick
[...]
What about validatePw?
You can call it before process(), or process() can call it. [...]

Can you do an onSubmit and an onClick?

In a sense, yes.
Does one take precedence?

I beg your pardon?

<form ... onsubmit="...">
...
<input type="submit" ...>
...
</form>

See also <http://www.w3.org/TR/html401/interact/forms.html#edef-INPUT>.

Please trim your quotes to the relevant minimum:

<http://jibbering.com/faq/#posting> pp.


PointedEars
 
M

Mike

Mike said:
Thomas said:
Mike wrote:
:
Mike wrote:
I have 2 functions:
One checks that 2 password fields have the same value and one runs
the form fields though some AJax to a php file.
OnSubmit never seems to run:
<form name="Acct" onSubmit="process(Email.value,Password.value)">
onSubmit="return process(Email.value,Password.value)"
forget about the onclick
[...]
What about validatePw?
You can call it before process(), or process() can call it.  [...]
Can you do an onSubmit and an onClick?

In a sense, yes.
Does one take precedence?

I beg your pardon?

  <form ... onsubmit="...">
    ...
    <input type="submit" ...>
    ...
  </form>

See also <http://www.w3.org/TR/html401/interact/forms.html#edef-INPUT>.

Please trim your quotes to the relevant minimum:

<http://jibbering.com/faq/#posting> pp.

PointedEars
--
Prototype.js was written by people who don't know javascript for people
who don't know javascript. People who don't know javascript are not
the best source of advice on designing systems that use javascript.
  -- Richard Cornford, cljs, <[email protected]>- Hide quoted text -

- Show quoted text -

I still dont understand why this doesnt work:I'd like an explanation.
MAIN FILE

<script src="CheckEmailaddress.js"></script>
<SCRIPT LANGUAGE="JavaScript">
<!-- Original: Russ Swift ([email protected]) -->

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
function validatePwd() {
var invalid = " "; // Invalid character is a space
var minLength = 6; // Minimum length
var pw1 = document.Acct.Password.value;
alert (document.Acct.Password.value);
var pw2 = document.Acct.Password2.value;
// check for a value in both fields.
if (pw1 == '' || pw2 == '') {
alert('Please enter your password twice.');
return false;
}
// check for minimum length
if (document.Acct.Password.value.length < minLength) {
alert('Your password must be at least ' + minLength + ' characters
long. Try again.');
return false;
}
// check for spaces
if (document.Acct.Password.value.indexOf(invalid) > -1) {
alert("Sorry, spaces are not allowed.");
return false;
}
else {
if (pw1 != pw2) {
alert ("You did not enter the same new password twice. Please re-enter
your password.");
return false;
}
else {
alert('Nice job.');
return true;
}
}
}
// End -->
</script>

</head>
<body>
<table width="500" border="1px" align="center" cellpadding="0"
cellspacing="0" id="mainOne">
<tr>
<td>
<form name="Acct" onsubmit="process(Email.value,Password.value)">
<p class="LoginFont">
E-mail <input type="text" name="Email" id="Email" size="30"
value="a"/> said:
<DIV ID="email_result">&nbsp;</DIV>
Password <input name="Password" id="password1" size="30"
type="password" value="aaaaaa" /><br />
Password Again <input name="Password2" id="password2" size="30"
type="password" value="aaaaaa" /><br />
<DIV ID="password_result">&nbsp;</DIV>
</p>
<label>
<input type="submit" name="LoginButton" id="LoginButton"
value="Login" /></form>
<div id="ttHint"></div>
</td>
</tr>
</table>
</body>
</html>


CHECKEMAILADDRESS.JS

var xmlHttp;
var a;
var b;
function process(a,b)
{ alert ("help1");
if(validatePwd())
{
alert ("help2");
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request");
return
}
var url="CheckEmailAddress.php";
url=url+"?Email="+a+"&Password="+b;
alert(url);
xmlHttp.open("GET",url,true);
alert ("help3");
xmlHttp.send(null);
alert ("help4");
xmlHttp.onreadystatechange=stateChanged;
}
function stateChanged()
{
alert(xmlHttp.readyState)
if (xmlHttp.readyState==4)
{
if (xmlHttp.responseText == "<p>This Username or E-mail address is
Already registered</p>")
{
document.getElementById("ttHint").innerHTML=xmlHttp.responseText;
}
else{
var emailurl="";
var emailurl = "CreateNewUserEmail.php"
emailurl=(emailurl+"?Email="+document.Acct.Email.value
+"&Password="+document.Acct.Password.value);
alert ("The URL is "+emailurl);
window.location = emailurl
}
}

}
function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
//Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
} }


BUT THIS VERSION OF THE MAIN FILE DOES:


<script src="CheckEmailaddress.js"></script>
<SCRIPT LANGUAGE="JavaScript">
<!-- Original: Russ Swift ([email protected]) -->

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
function validatePwd() {
var invalid = " "; // Invalid character is a space
var minLength = 6; // Minimum length
var pw1 = document.Acct.Password.value;
alert (document.Acct.Password.value);
var pw2 = document.Acct.Password2.value;
// check for a value in both fields.
if (pw1 == '' || pw2 == '') {
alert('Please enter your password twice.');
return false;
}
// check for minimum length
if (document.Acct.Password.value.length < minLength) {
alert('Your password must be at least ' + minLength + ' characters
long. Try again.');
return false;
}
// check for spaces
if (document.Acct.Password.value.indexOf(invalid) > -1) {
alert("Sorry, spaces are not allowed.");
return false;
}
else {
if (pw1 != pw2) {
alert ("You did not enter the same new password twice. Please re-enter
your password.");
return false;
}
else {
alert('Nice job.');
return true;
}
}
}
// End -->
</script>

</head>
<body>
<table width="500" border="1px" align="center" cellpadding="0"
cellspacing="0" id="mainOne">
<tr>
<td>
<form name="Acct" onSubmit="validatePwd()">
<p class="LoginFont">
E-mail said:
<DIV ID="email_result">&nbsp;</DIV>
Password <input name="Password" id="password1" size="30"
type="password" /><br />
Password Again <input name="Password2" id="password2" size="30"
type="password" /><br />
<DIV ID="password_result">&nbsp;</DIV>
</p>
<label>
<input type="button" name="LoginButton" id="LoginButton"
value="Login" onClick="process(Email.value,Password.value)" /></form>
<div id="ttHint"></div>
</td>
</tr>
</table>
</body>
</html>


Thnaks
 
D

David Mark

Mike said:
Mike said:
Thomas 'PointedEars' Lahn wrote:
Mike wrote:
:
Mike wrote:
I have 2 functions:
One checks that 2 password fields have the same value and one runs
the form fields though some AJax to a php file.
OnSubmit never seems to run:
<form name="Acct" onSubmit="process(Email.value,Password.value)">
onSubmit="return process(Email.value,Password.value)"
forget about the onclick
[...]
What about validatePw?
You can call it before process(), or process() can call it. [...]
Can you do an onSubmit and an onClick?
In a sense, yes.
Does one take precedence?
I beg your pardon?

<form ... onsubmit="...">
...
<input type="submit" ...>
...
</form>

See also <http://www.w3.org/TR/html401/interact/forms.html#edef-INPUT>.

Please trim your quotes to the relevant minimum:

<http://jibbering.com/faq/#posting> pp.

PointedEars
--
Prototype.js was written by people who don't know javascript for people
who don't know javascript. People who don't know javascript are not
the best source of advice on designing systems that use javascript.
-- Richard Cornford, cljs, <[email protected]>- Hide quoted text -

- Show quoted text -

I still dont understand why this doesnt work:
http://www.jibbering.com/faq/faq_notes/clj_posts.html#ps1DontWork

I'd like an explanation.
MAIN FILE

<script src="CheckEmailaddress.js"></script>
<SCRIPT LANGUAGE="JavaScript">

Oops, that indicates either complete incompetence or a creation date in
the previous century.
<!-- Original: Russ Swift ([email protected]) -->

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

Oops, again. There's no way that a JavaScript (sic) repository with a
name that ends in "!!" is going to be worthwhile. :)
<!-- Begin
function validatePwd() {
var invalid = " "; // Invalid character is a space
var minLength = 6; // Minimum length
var pw1 = document.Acct.Password.value;

Three strikes. Be very careful with free scripts you find on the Web.
The author of this one clearly did not know what he was doing. Likely
he copied, pasted, tested in a few browsers, observed that it seemed to
work and concluded that he got it right. Such strategies virtually
never lead to solid cross-browser results (see jQuery, Dojo, etc. for
the same sort of crap in much larger piles).
 
S

SAM

Le 3/24/10 5:53 PM, Mike a écrit :
I still dont understand why this doesnt work:I'd like an explanation.
MAIN FILE

because you don't use the right function ? (validatePwd() )

In your 1st test :
<form name="Acct" onsubmit="process(Email.value,Password.value)">

Process must return false (all times)
if not, the form will be submitted
(as there is nothing to submit,that will refresh the page)

<form name="Acct" action="#"
onsubmit="return process(Email.value,Password.value)">

or :
<form name="Acct" action="#"
onsubmit="process(Email.value,Password.value);return false">



Perhaps could you to do not use validatePwd() in process()

<form name="Acct" action="#"
onsubmit="if(validatePwd())
process(Email.value,Password.value);
return false">

CHECKEMAILADDRESS.JS

var xmlHttp;
var a;
var b;

function process(a,b)
{ alert ("help1");
if(!validatePwd())
{
alert ("not good !");
return false;
}
else
{
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
{
.... blah ...

function process(a,b) {
alert ("help1");
if(validatePwd())
{
alert ("help2");
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request");
return
}
var url="CheckEmailAddress.php";
url += "?Email="+a+"&Password="+b;
alert(url);
xmlHttp.open("GET",url,true);
alert ("help3");
xmlHttp.send(null);
alert ("help4");
xmlHttp.onreadystatechange=stateChanged;
}
function stateChanged()
{
alert(xmlHttp.readyState)
if (xmlHttp.readyState==4)
{
if (xmlHttp.responseText == "<p>This Username or E-mail address is
Already registered</p>")
{
document.getElementById("ttHint").innerHTML=xmlHttp.responseText;
}
else
{
var emailurl="";
var emailurl = "CreateNewUserEmail.php"
emailurl=(emailurl+"?Email="+document.Acct.Email.value +
"&Password="+document.Acct.Password.value);
alert ("The URL is "+emailurl);
window.location = emailurl
}
}
}
function GetXmlHttpObject() {
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
//Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
}
 
M

Mike

Le 3/24/10 5:53 PM, Mike a crit :




because you don't use the right function ? (validatePwd() )

In your 1st test :


Process must return false (all times)
if not, the form will be submitted
(as there is nothing to submit,that will refresh the page)

<form name="Acct" action="#"
  onsubmit="return process(Email.value,Password.value)">

or :
<form name="Acct" action="#"
  onsubmit="process(Email.value,Password.value);return false">

Perhaps could you to do not use validatePwd() in process()

<form name="Acct" action="#"
  onsubmit="if(validatePwd())
            process(Email.value,Password.value);
            return false">



function process(a,b)
{   alert ("help1");
     if(!validatePwd())
     {
        alert ("not good !");
        return false;
     }
     else
    {
       xmlHttp=GetXmlHttpObject();
       if (xmlHttp==null)
       {
... blah ...

function process(a,b) {
alert ("help1");
if(validatePwd())
     {
     alert ("help2");
     xmlHttp=GetXmlHttpObject();
     if (xmlHttp==null)
        {
        alert ("Browser does not support HTTP Request");
        return
        }
    var url="CheckEmailAddress.php";
    url += "?Email="+a+"&Password="+b;
    alert(url);
    xmlHttp.open("GET",url,true);
    alert ("help3");
    xmlHttp.send(null);
    alert ("help4");
    xmlHttp.onreadystatechange=stateChanged;
    }
function stateChanged()
    {
     alert(xmlHttp.readyState)
     if (xmlHttp.readyState==4)
     {
     if (xmlHttp.responseText == "<p>This Username or E-mail address is
Already registered</p>")
         {
     document.getElementById("ttHint").innerHTML=xmlHttp.responseText;
         }
         else
        {
        var emailurl="";
        var emailurl =  "CreateNewUserEmail.php"
        emailurl=(emailurl+"?Email="+document.Acct.Email.value +
                "&Password="+document.Acct.Password.value);
        alert ("The URL is "+emailurl);
        window.location = emailurl
        }
     }
    }
function GetXmlHttpObject() {
   var xmlHttp=null;
   try
     {
     // Firefox, Opera 8.0+, Safari
     xmlHttp=new XMLHttpRequest();
     }
   catch (e)
    {
    //Internet Explorer
    try
      {
       xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
       }
    catch (e)
       {
       xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
       }
    }
   return xmlHttp;
   }



}- Hide quoted text -

- Show quoted text -

I have taken ValidatePw from both scenerios and removed it from the js
file.
The first one runs everything up tp "Test4" , but does not seam to run
statechanged ( I dont get the readystate).
But the second one does and runs the php file succesfully..
The only difference is:
File 1:Doesnt work
<form name="Acct" onsubmit="process(Email.value,Password.value)" >
.....
<input type="submit" name="LoginButton" id="LoginButton"
value="Login" /></form>



File 2 Works
<form name="Acct">
.....
<input type="button" name="LoginButton" id="LoginButton"
value="Login" onClick="process(Email.value,Password.value)" /></form>
 
S

SAM

Le 3/24/10 7:50 PM, Mike a écrit :
I have taken ValidatePw from both scenerios and removed it from the js
file.
The first one runs everything up tp "Test4" , but does not seam to run
statechanged ( I dont get the readystate).

certainly you get it (or at least it is sent)
but too late
the page has been refreshed (I expect)
But the second one does and runs the php file succesfully..
The only difference is:
File 1:Doesnt work
<form name="Acct" onsubmit="process(Email.value,Password.value)" >
....
<input type="submit" name="LoginButton" id="LoginButton"
value="Login" /></form>

Could you try with :

<form name="Acct" action="#"
onsubmit="return process(Email.value,Password.value)">


function process(a,b) {
alert ("help1");
if(!validatePwd())
{
alert ("not good !");
return false;
}
// are a and b existing ?
alert ("help2" +"\na = "+a+"\nb = "+b);
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request");
return false;
}
var url="CheckEmailAddress.php";
url += "?Email="+a+"&Password="+b;
alert(url);
xmlHttp.open("GET",url,true);
alert ("help3");
xmlHttp.send(null);
alert ("help4");
xmlHttp.onreadystatechange=stateChanged;
alert ("help5");
return false;

function stateChanged()
{
alert(xmlHttp.readyState)
if (xmlHttp.readyState==4)
{
if (xmlHttp.responseText == "<p>This Username or E-mail address is
Already registered</p>")
{
document.getElementById("ttHint").innerHTML=xmlHttp.responseText;
}
else
{
var emailurl="";
var emailurl = "CreateNewUserEmail.php"
emailurl=(emailurl+"?Email="+document.Acct.Email.value +
"&Password="+document.Acct.Password.value);
alert ("The URL is "+emailurl);
window.location = emailurl
}
}
}
function GetXmlHttpObject() {
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
//Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
}
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,769
Messages
2,569,582
Members
45,071
Latest member
MetabolicSolutionsKeto

Latest Threads

Top