Combining two OnClick Events

[EviL KerneL]

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!

 

[Michael Winter]

[snip]

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'>

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.

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

<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

 

[EviL KerneL]

[snip]

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'>

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.

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

<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

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!

 

[Michael Winter]

[snip]

It sure did! A million thanks man.

You're welcome.

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

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