Javascript onClick question

M

Mtek

Hi,

We have a form defined with buttons like this:

<a class="save_menu" href="javascript:document.Detail_Screen.action =
'savedata.php?screen=EDIT';document.Detail_Screen.submit();">Update</
a>

The form also has an onSubmit action to vall a validation routine:

<FORM name='Detail_Screen' action="savedata.php" METHOD="POST"
onsubmit='return formvalidation(this)'>

The problem is that the formvalidation routine is not being fired.

I'm at a loss here. Can anyone help us with this? At the end of the
javascript validation routine, we have this:

thisform.submit();

So, the form seems to submit, but not the way we want it to. We want
it to execute the validation routine first.....

Thank you.

John.
 
D

Dan Rumney

<FORM name='Detail_Screen' action="savedata.php" METHOD="POST"
onsubmit='return formvalidation(this)'>

The problem is that the formvalidation routine is not being fired.

I'm at a loss here. Can anyone help us with this? At the end of the
javascript validation routine, we have this:

thisform.submit();
Click to expand...

formvalidation should return TRUE or FALSE, depending on whether the
form's content is valid, or not.

If that doesn't help, please provide a more detailed code sample; an
ideal example would be a URL to a page demonstrating the problem
 
P

Peter Michaux

Hi,

We have a form defined with buttons like this:

<a class="save_menu" href="javascript:document.Detail_Screen.action =
'savedata.php?screen=EDIT';document.Detail_Screen.submit();">Update</
a>
Click to expand...

Why are you using an anchor element to submit a form? A submit input
or button would be the appropriate choice and works with JavaScript
disabled.
The form also has an onSubmit action to vall a validation routine:

<FORM name='Detail_Screen' action="savedata.php" METHOD="POST"
onsubmit='return formvalidation(this)'>
Click to expand...

Single quotation marks around attribute values are not valid.
The problem is that the formvalidation routine is not being fired.

I'm at a loss here. Can anyone help us with this? At the end of the
javascript validation routine, we have this:

thisform.submit();
Click to expand...

remove that
So, the form seems to submit, but not the way we want it to. We want
it to execute the validation routine first.....
Click to expand...

How about something straight forward like this

<form name="Detail_Screen" action="savedata.php"
method="post" onsubmit="return formvalidation(this);">

<input type="submit" name="screen" value="EDIT">
</form>

If you really must have a link trigger the form submission then you
can do that but it seems very odd.

Peter
 
P

Peter Michaux

formvalidation should return TRUE or FALSE, depending on whether the
form's content is valid, or not.
Click to expand...

JavaScript will type convert the return value of the onsubmit handler
to be a boolean. That type converted value will be used to determine
if the form should be submitted or not.
If that doesn't help, please provide a more detailed code sample; an
ideal example would be a URL to a page demonstrating the problem
Click to expand...

Where that page is self-complete and only 30 to 40 lines long.

Peter
 
M

Mtek

JavaScript will type convert the return value of the onsubmit handler
to be a boolean. That type converted value will be used to determine
if the form should be submitted or not.


Where that page is self-complete and only 30 to 40 lines long.

Peter
Click to expand...


Well, the client wants the inmage button. And, as you can see, it is
not really an image, but a class. That is what they want, so that is
how I have to code it. The page submits and the data is saved, it
just does not call the javascript validation routine. That is where
my issue is.......

Making it a SUBMIT will not work since it is not a 'real' button.
Here is a clip of the code:

<FORM name='Detail_Screen' action="savedata.php" METHOD="POST"
onsubmit='return formvalidation(this)'>
.
.
<table class="menu" cellspacing=0>
<TR>
<td class="menu1"><a class="save_menu"
href="javascript:document.Detail_Screen.action = 'savedata.php?
screen=EDIT';document.Detail_Screen.submit();">Update</a></td>
<td style="width:1px"><img src="../images/admin2/
separator_27h.gif"></td>
<td class="menu1"><a class="save_menu"
href="javascript:document.Detail_Screen.action = 'savedata.php?
screen=DELETE';document.Detail_Screen.submit();">Delete</a></td>
<td style="width:1px"><img src="../images/admin2/
separator_27h.gif"></td>
</tr>
</table>
.
.
</FORM>

Thanks for everyone's help so far.....

John
 
M

Mtek

Can you provide the source for 'formvalidation'?
Click to expand...


Here you go, and thanks!!

function formvalidation(thisform) {
if (emptyvalidation(thisform.CustName.value,"Customer Name is
empty")==false) {thisform.CustName.focus(); return false;};
if (emailvalidation(thisform.CustEmail.value,"Illegal E-
mail")==false) {thisform.CustEmail.focus(); return false;};

if (thisform.CellPhone.value==null || thisform.CellPhone.value==""
|| thisform.CellPhone.value==" ") {
thisform.CellPhone.value="000-000-0000";
} else {
if (phonevalidation(thisform.CellPhone.value,"Please enter a
valid cell phone")==false) {
thisform.CellPhone.focus(); return false;
};
};
thisform.submit();
}
 
P

Peter Michaux

Well, the client wants the inmage button. And, as you can see, it is
not really an image, but a class. That is what they want, so that is
how I have to code it.
Click to expand...

You can style a <button type="submit"> element.

Peter
 
M

Mtek

Here you go, and thanks!!
Click to expand...
function formvalidation(thisform) {
    if (emptyvalidation(thisform.CustName.value,"Customer Name is
empty")==false) {thisform.CustName.focus(); return false;};
    if (emailvalidation(thisform.CustEmail.value,"Illegal E-
mail")==false) {thisform.CustEmail.focus(); return false;};
Click to expand...
    if (thisform.CellPhone.value==null || thisform.CellPhone.value==""
|| thisform.CellPhone.value==" ") {
       thisform.CellPhone.value="000-000-0000";
    } else {
       if (phonevalidation(thisform.CellPhone.value,"Please enter a
valid cell phone")==false) {
          thisform.CellPhone.focus(); return false;
       };
    };
    thisform.submit();
}
Click to expand...

Change "thisform.submit()" to "return true"

However, Reading you original post again, you wrote:

 > <a class="save_menu"
 >
href="javascript:document.Detail_Screen.action='savedata.php?screen=EDIT';
 >     document.Detail_Screen.submit();">Update</>a>

[snip]

 > At the end of the javascript validation routine, we have this:
 >
 > thisform.submit();
 >
 > So, the form seems to submit, but not the way we want it to.  We want
 > it to execute the validation routine first.

So, I think you're saying "Why isn't validation performed when the user
clicks on Update?"

So, I believe this is an accurate description of what's happening. I've
looked for something to back it up, but all I can find are unreferenced
comments on the web.

The onSubmit Event Handler is is used to execute specified JavaScript
code whenever the *user* submits a form.

I believe the problem you have is that Javascript aclling the submit()
function is *not* the same as the user submitting the form. Thus the
onSubmit handler is not invoked.

In fact, this is why you calling submit() in your onSubmit handler does
not cause an infinite loop.

The resolution would be an explicit call to formvalidation()
... something like:

<a class="save_menu"
href="javascript:document.Detail_Screen.action='savedata.php?screen=EDIT';
formvalidation(document.Detail_Screen) &&
document.Detail_Screen.submit();">Update</>a>- Hide quoted text -

- Show quoted text -
Click to expand...


Wow Dan! Almost perfect. After it displays the error message though,
it opens a blank page with the word 'false' on it.

Can you explain to me how that works with the &&???

Thanks, and, why does it open up a page with 'false'??

John
 
M

Mtek

Here you go, and thanks!!
Click to expand...
function formvalidation(thisform) {
    if (emptyvalidation(thisform.CustName.value,"Customer Name is
empty")==false) {thisform.CustName.focus(); return false;};
    if (emailvalidation(thisform.CustEmail.value,"Illegal E-
mail")==false) {thisform.CustEmail.focus(); return false;};
Click to expand...
    if (thisform.CellPhone.value==null || thisform.CellPhone.value==""
|| thisform.CellPhone.value==" ") {
       thisform.CellPhone.value="000-000-0000";
    } else {
       if (phonevalidation(thisform.CellPhone.value,"Please enter a
valid cell phone")==false) {
          thisform.CellPhone.focus(); return false;
       };
    };
    thisform.submit();
}
Click to expand...

Change "thisform.submit()" to "return true"

However, Reading you original post again, you wrote:

 > <a class="save_menu"
 >
href="javascript:document.Detail_Screen.action='savedata.php?screen=EDIT';
 >     document.Detail_Screen.submit();">Update</>a>

[snip]

 > At the end of the javascript validation routine, we have this:
 >
 > thisform.submit();
 >
 > So, the form seems to submit, but not the way we want it to.  We want
 > it to execute the validation routine first.

So, I think you're saying "Why isn't validation performed when the user
clicks on Update?"

So, I believe this is an accurate description of what's happening. I've
looked for something to back it up, but all I can find are unreferenced
comments on the web.

The onSubmit Event Handler is is used to execute specified JavaScript
code whenever the *user* submits a form.

I believe the problem you have is that Javascript aclling the submit()
function is *not* the same as the user submitting the form. Thus the
onSubmit handler is not invoked.

In fact, this is why you calling submit() in your onSubmit handler does
not cause an infinite loop.

The resolution would be an explicit call to formvalidation()
... something like:

<a class="save_menu"
href="javascript:document.Detail_Screen.action='savedata.php?screen=EDIT';
formvalidation(document.Detail_Screen) &&
document.Detail_Screen.submit();">Update</>a>- Hide quoted text -

- Show quoted text -
Click to expand...


Wow Dan! Almost perfect. After it displays the error message though,
it opens a blank page with the word 'false' on it. Also, now when it
calls the email validation function, I get an error: "entered.value
has no properties"

function emailvalidation(entered, alertbox) {
apos=entered.indexOf("@");
dotpos=entered.value.lastIndexOf(".");
lastpos=entered.length-1;
if (apos<1 || dotpos-apos<2 || lastpos-dotpos>3 || lastpos-
dotpos<2)
{if (alertbox) {alert(alertbox);} return false;}
else {return true;}
}

Thanks for everyone's help so far.

John
 
M

Mtek

Here you go, and thanks!!
Click to expand...
function formvalidation(thisform) {
    if (emptyvalidation(thisform.CustName.value,"Customer Name is
empty")==false) {thisform.CustName.focus(); return false;};
    if (emailvalidation(thisform.CustEmail.value,"Illegal E-
mail")==false) {thisform.CustEmail.focus(); return false;};
Click to expand...
    if (thisform.CellPhone.value==null || thisform.CellPhone.value==""
|| thisform.CellPhone.value==" ") {
       thisform.CellPhone.value="000-000-0000";
    } else {
       if (phonevalidation(thisform.CellPhone.value,"Please enter a
valid cell phone")==false) {
          thisform.CellPhone.focus(); return false;
       };
    };
    thisform.submit();
}
Click to expand...

Change "thisform.submit()" to "return true"

However, Reading you original post again, you wrote:

 > <a class="save_menu"
 >
href="javascript:document.Detail_Screen.action='savedata.php?screen=EDIT';
 >     document.Detail_Screen.submit();">Update</>a>

[snip]

 > At the end of the javascript validation routine, we have this:
 >
 > thisform.submit();
 >
 > So, the form seems to submit, but not the way we want it to.  We want
 > it to execute the validation routine first.

So, I think you're saying "Why isn't validation performed when the user
clicks on Update?"

So, I believe this is an accurate description of what's happening. I've
looked for something to back it up, but all I can find are unreferenced
comments on the web.

The onSubmit Event Handler is is used to execute specified JavaScript
code whenever the *user* submits a form.

I believe the problem you have is that Javascript aclling the submit()
function is *not* the same as the user submitting the form. Thus the
onSubmit handler is not invoked.

In fact, this is why you calling submit() in your onSubmit handler does
not cause an infinite loop.

The resolution would be an explicit call to formvalidation()
... something like:

<a class="save_menu"
href="javascript:document.Detail_Screen.action='savedata.php?screen=EDIT';
formvalidation(document.Detail_Screen) &&
document.Detail_Screen.submit();">Update</>a>- Hide quoted text -

- Show quoted text -
Click to expand...


Thanks Dan.

When I put your code in and submit the form, I get the validation
error message I am supposed to, but then the page changes with only
the word 'false' on it.

Also, when it executes the routine to validate the email, I get this
"entered.value has no properties"

function emailvalidation(entered, alertbox) {
apos=entered.value.indexOf("@");
dotpos=entered.value.lastIndexOf(".");
lastpos=entered.length-1;
if (apos<1 || dotpos-apos<2 || lastpos-dotpos>3 || lastpos-
dotpos<2)
{if (alertbox) {alert(alertbox);} return false;}
else {return true;}
}

Thanks again for your help.

John
 
M

Mtek

Here you go, and thanks!!
Click to expand...
function formvalidation(thisform) {
    if (emptyvalidation(thisform.CustName.value,"Customer Name is
empty")==false) {thisform.CustName.focus(); return false;};
    if (emailvalidation(thisform.CustEmail.value,"Illegal E-
mail")==false) {thisform.CustEmail.focus(); return false;};
Click to expand...
    if (thisform.CellPhone.value==null || thisform.CellPhone.value==""
|| thisform.CellPhone.value==" ") {
       thisform.CellPhone.value="000-000-0000";
    } else {
       if (phonevalidation(thisform.CellPhone.value,"Please enter a
valid cell phone")==false) {
          thisform.CellPhone.focus(); return false;
       };
    };
    thisform.submit();
}
Click to expand...

Change "thisform.submit()" to "return true"

However, Reading you original post again, you wrote:

 > <a class="save_menu"
 >
href="javascript:document.Detail_Screen.action='savedata.php?screen=EDIT';
 >     document.Detail_Screen.submit();">Update</>a>

[snip]

 > At the end of the javascript validation routine, we have this:
 >
 > thisform.submit();
 >
 > So, the form seems to submit, but not the way we want it to.  We want
 > it to execute the validation routine first.

So, I think you're saying "Why isn't validation performed when the user
clicks on Update?"

So, I believe this is an accurate description of what's happening. I've
looked for something to back it up, but all I can find are unreferenced
comments on the web.

The onSubmit Event Handler is is used to execute specified JavaScript
code whenever the *user* submits a form.

I believe the problem you have is that Javascript aclling the submit()
function is *not* the same as the user submitting the form. Thus the
onSubmit handler is not invoked.

In fact, this is why you calling submit() in your onSubmit handler does
not cause an infinite loop.

The resolution would be an explicit call to formvalidation()
... something like:

<a class="save_menu"
href="javascript:document.Detail_Screen.action='savedata.php?screen=EDIT';
formvalidation(document.Detail_Screen) &&
document.Detail_Screen.submit();">Update</>a>- Hide quoted text -

- Show quoted text -
Click to expand...


Hi Dan,

Your suggestion seems to work. I had to change a few things. But
when I submit the form, it something fails the validation, it gives
the proper error message, but then a new page appears with only the
word 'false' on it........

On another note, I do not understand why sometimes I can refer to a
parameter by name, and other times I need parameter.value.........

Thanks again!!!

John
 
T

Thomas 'PointedEars' Lahn

Peter said:
formvalidation should return TRUE or FALSE, depending on whether the
form's content is valid, or not.
Click to expand...

JavaScript will type convert the return value of the onsubmit handler
to be a boolean. [...]
Click to expand...

How would you know?


PointedEars
 
D

Dan Rumney

Change "thisform.submit()" to "return true"
Click to expand...
However, Reading you original post again, you wrote:
<a class="save_menu"
href="javascript:document.Detail_Screen.action='savedata.php?screen=EDIT';
Click to expand...
[snip]
Click to expand...
At the end of the javascript validation routine, we have this:

thisform.submit();

So, the form seems to submit, but not the way we want it to. We want
it to execute the validation routine first.
Click to expand...
Click to expand...
So, I think you're saying "Why isn't validation performed when the user
clicks on Update?"
Click to expand...
So, I believe this is an accurate description of what's happening. I've
looked for something to back it up, but all I can find are unreferenced
comments on the web.
Click to expand...
The onSubmit Event Handler is is used to execute specified JavaScript
code whenever the *user* submits a form.
Click to expand...
I believe the problem you have is that Javascript aclling the submit()
function is *not* the same as the user submitting the form. Thus the
onSubmit handler is not invoked.
Click to expand...
In fact, this is why you calling submit() in your onSubmit handler does
not cause an infinite loop.
Click to expand...
The resolution would be an explicit call to formvalidation()
... something like:
Click to expand...
<a class="save_menu"
href="javascript:document.Detail_Screen.action='savedata.php?screen=EDIT';
formvalidation(document.Detail_Screen) &&
document.Detail_Screen.submit();">Update</>a>- Hide quoted text -
Click to expand...
- Show quoted text -
Click to expand...

Hi Dan,

Your suggestion seems to work. I had to change a few things. But
when I submit the form, it something fails the validation, it gives
the proper error message, but then a new page appears with only the
word 'false' on it........
Click to expand...

Try:
<a class="save_menu"
href="javascript:function()
{document.Detail_Screen.action='savedata.php?screen=EDIT';
formvalidation(document.Detail_Screen) &&
document.Detail_Screen.submit();}">Update</a>

Or, better still
<span class="save_menu"
onClick="function(){document.Detail_Screen.action='savedata.php?
screen=EDIT';
formvalidation(document.Detail_Screen) &&
document.Detail_Screen.submit();}">Update</span>

Or, style a submit button as Peter suggests...
On another note, I do not understand why sometimes I can refer to a
parameter by name, and other times I need parameter.value.........
Click to expand...

Probably best to start a new post for that question
 

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

Similar Threads

Submit Question 5
Check forms With JavaScript 1
Jquery not triggering / acting as expected. 0
JavaScript Challenge: Validating Email Addresses 1
How can I remove the specific error message after regex validation is done? 1
Decrypting using Javascript 0
Javascript DOM 1
Decrypting in Javascript 8

Members online

Total: 26 (members: 1, guests: 25)
Robots: 141

Forum statistics

Threads
473,777
Messages
2,569,604
Members
45,234
Latest member
SkyeWeems

Latest Threads

Top