Combining two OnClick Events

Hi -

I am working on a survey project which has a next button that takes
you to the next set of questions and so on. It does this by means of
an OnClick event which takes the answers from the questions and adds
them to a database while taking you to the next page. I have a second
onclick event I would like to combine with the above which changes the
value of the button to "please wait" (to prevent the user from click
on the buton more than once). When I try these events individualy they
work just fine, but for the life of me I cannot figure out how to
combine them.

*Here is the 1st click event:
--------------------------------------------------------------------
<input class="submit-button" type="submit" name="next" value="Next"

onclick="document.PdcSurvey.PdcButtonPressed.value ='next';" />
--------------------------------------------------------------------

*Here is the 2nd onclick event:
--------------------------------------------------------------------
onClick='PdcSurvey.next.value="Please Wait...";return true'>
--------------------------------------------------------------------

I have tried adding a semicolon to divide them both but that does not
seem to work. Here is what I did:

<input class="submit-button" type="submit" name="next" value="Next"

onclick="document.PdcSurvey.PdcButtonPressed.value ='next';" /;
'PdcSurvey.next.value="Please Wait...";return true'>

I have tried several ways to do this but I cannot seem to get them to
work together. Can anyone shed some light?

Thanks!

re: Combining two OnClick Events

On 13 Feb 2004 06:23:37 -0800, EviL KerneL <fsck66@yahoo.com> wrote:

[snip]
[color=blue]
> I have tried adding a semicolon to divide them both but that does not
> seem to work. Here is what I did:
>
> <input class="submit-button" type="submit" name="next" value="Next"
>
> onclick="document.PdcSurvey.PdcButtonPressed.value ='next';" /;
> 'PdcSurvey.next.value="Please Wait...";return true'>[/color]

1) The whole event string needs to be in a single set of double quotes.
You have split them.
2) The string must be on one line, just like any other HTML attribute
value. New lines can only appear between attribute/value pairs.
[color=blue]
> I have tried several ways to do this but I cannot seem to get them to
> work together. Can anyone shed some light?[/color]

<input class="submit-button" type="submit" name="next" value="Next"
onclick="this.form.PdcButtonPressed.value='next';
this.value='Please wait...';">

The last line should not be wrapped, but line length limits forced me to
do it.

You should notice that I shortened the string slightly using the "this"
operator. In an intrinsic event, "this" refers to the current element; in
this case, the submit button "next". This allows you to change the value
of the button simply using "this.value='...'". Furthermore, all form
controls have the property, "form", which refers to the containing form
element. Instead of "document.PdcSurvey", you can use "this.form".
Finally, I removed the return statement: unless you are returning false,
it is not required.

Hope that helps,
Mike

--
Michael Winter
M.Winter@blueyonder.co.invalid (replace ".invalid" with ".uk" to reply)

re: Combining two OnClick Events

Michael Winter <M.Winter@blueyonder.co.invalid> wrote in message news:<opr3bdentd5vklcq@news-text.blueyonder.co.uk>...[color=blue]
> On 13 Feb 2004 06:23:37 -0800, EviL KerneL <fsck66@yahoo.com> wrote:
>
> [snip]
>[color=green]
> > I have tried adding a semicolon to divide them both but that does not
> > seem to work. Here is what I did:
> >
> > <input class="submit-button" type="submit" name="next" value="Next"
> >
> > onclick="document.PdcSurvey.PdcButtonPressed.value ='next';" /;
> > 'PdcSurvey.next.value="Please Wait...";return true'>[/color]
>
> 1) The whole event string needs to be in a single set of double quotes.
> You have split them.
> 2) The string must be on one line, just like any other HTML attribute
> value. New lines can only appear between attribute/value pairs.
>[color=green]
> > I have tried several ways to do this but I cannot seem to get them to
> > work together. Can anyone shed some light?[/color]
>
> <input class="submit-button" type="submit" name="next" value="Next"
> onclick="this.form.PdcButtonPressed.value='next';
> this.value='Please wait...';">
>
> The last line should not be wrapped, but line length limits forced me to
> do it.
>
> You should notice that I shortened the string slightly using the "this"
> operator. In an intrinsic event, "this" refers to the current element; in
> this case, the submit button "next". This allows you to change the value
> of the button simply using "this.value='...'". Furthermore, all form
> controls have the property, "form", which refers to the containing form
> element. Instead of "document.PdcSurvey", you can use "this.form".
> Finally, I removed the return statement: unless you are returning false,
> it is not required.
>
> Hope that helps,
> Mike[/color]


It sure did! A million thanks man. One question though, what did the
"/" do for the previous line? It seems to be working fine without it
so I am wondering.

In any case, thanks again for your help!

re: Combining two OnClick Events

On 19 Feb 2004 05:39:23 -0800, EviL KerneL <fsck66@yahoo.com> wrote:

[snip]
[color=blue]
> It sure did! A million thanks man.[/color]

You're welcome.
[color=blue]
> One question though, what did the "/" do for the previous line? It
> seems to be working fine without it so I am wondering.[/color]

I assume you mean the slash at the end of the first line below?

onclick="document.PdcSurvey.PdcButtonPressed.value ='next';" /;
'PdcSurvey.next.value="Please Wait...";return true'>

It does nothing. The onclick attribute value ends at the second double
quote (next';"). The browser will then attempt to find another
attribute/value pair. The rest of the tag, from "/;" onwards, is invalid
HTML so the browser should just ignore it.

Mike

--
Michael Winter
M.Winter@blueyonder.co.invalid (replace ".invalid" with ".uk" to reply)