Setting an HTML button's onclick property client-side

[Mark Rae]

Hi,

VS.NET 2003 on WinXPPro, both with all the latest patches and updates,
etc...

I've got a very simple WebForm which is used either to add a new record to a
SQL Server database or edit a record. Depending on whether I'm adding or
editing, I need to do slightly different validation, so I'm trying to set
the form's Save button's onclick property dynamically at run-time
client-side with JavaScript, as follows:

document.frmCalendar.cmdSave.onClick = "javascript:validateForm('Add');";

or

document.frmCalendar.cmdSave.onClick = "javascript:validateForm('Edit');";

function validateForm(pstrMode)
{
switch (pstrMode)
{
case "Add" :
{
//validate the form and add the record
break;
}
case "Edit" :
{
//validate the form and edit the record
}
}
}

Problem is that the button does not respond to the onClick event. If I
create another button and set its onClick to
"javascript:alert(document.frmCalendar.cmdSave.onClick);" it shows the
correct string in the first button's onClick property. It's almost like the
first button doesn't know to respond to the click event.

I have found at least five ways to achieve the same effect using different
functionality. I'm just interested to know if the above is possible, more
from an intellectual exercise and for my own interest.

Thanks,

Mark Rae

 

[Steven]

If the button is an object in a control that implements INamingContainer
then you need to retreive the control Id by using the ClientId property.

The best way to do this is in your code.

C#:
btnBtnName.Attributes.Add("onClick", "validateForm('Edit');");

If you needed to make a reference to that button then you would do:
btnBtnName.Attributes.Add("onClick", "doSomething(" + btnBtnName.ClientId +
");");

 

[Mark Rae]

If the button is an object in a control that implements INamingContainer
then you need to retreive the control Id by using the ClientId property.

The best way to do this is in your code.

C#:
btnBtnName.Attributes.Add("onClick", "validateForm('Edit');");

If you needed to make a reference to that button then you would do:
btnBtnName.Attributes.Add("onClick", "doSomething(" + btnBtnName.ClientId +
");");

Like I said, "dynamically at run-time client-side with JavaScript" ...

 

[bruce barker]

javascript and the dom are case sensitive (while html isn't), also the
onclick property of an html element wants a reference to a function, not a
string.

document.frmCalendar.cmdSave.onClick =
"javascript:validateForm('Add');";

while valid javascript, creates a new property named onClick, whose value is
the string "javascript:validateForm('Add');" instead try:

document.frmCalendar.cmdSave.onclick = function() { return
validateForm('Add');};

which set the builtin onclick property to a function reference. note: a new
wrapper function is required to pass the 'Add' arg to validateForm, if
validateForm needed no arguments, then it could have been referenced
directly.

-- bruce (sqlwork.com)

 

[Mark Rae]

document.frmCalendar.cmdSave.onclick = function() { return
validateForm('Add');};

Excellent! Works perfectly

Thanks very much.