Setting an HTML button's onclick property client-side

Discussion in 'ASP .Net' started by Mark Rae, Jul 26, 2004.

  1. Mark Rae

    Mark Rae Guest

    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
     
    Mark Rae, Jul 26, 2004
    #1
    1. Advertising

  2. Mark Rae

    Steven Guest

    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" <> wrote in message
    news:...
    > 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, Jul 26, 2004
    #2
    1. Advertising

  3. Mark Rae

    Mark Rae Guest

    "Steven" <> wrote in message
    news:...

    > 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" ...
     
    Mark Rae, Jul 26, 2004
    #3
  4. Mark Rae

    bruce barker Guest

    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" <> wrote in message
    news:...
    > 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
    >
    >
     
    bruce barker, Jul 26, 2004
    #4
  5. Mark Rae

    Mark Rae Guest

    "bruce barker" <> wrote in message
    news:...

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


    Excellent! Works perfectly :)

    Thanks very much.
     
    Mark Rae, Jul 26, 2004
    #5
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. giant food
    Replies:
    2
    Views:
    11,831
    Chris Jackson
    Dec 12, 2003
  2. =?Utf-8?B?U2VkZWY=?=

    overriding client-side onclick of Button

    =?Utf-8?B?U2VkZWY=?=, Feb 19, 2004, in forum: ASP .Net
    Replies:
    2
    Views:
    756
    Peter Blum
    Feb 21, 2004
  3. Zoe Hart
    Replies:
    1
    Views:
    383
    Scott Wisniewski
    Jan 8, 2004
  4. bredal Jensen

    Access a radio button "Checked" property on the client side.

    bredal Jensen, Apr 26, 2004, in forum: ASP .Net Web Controls
    Replies:
    1
    Views:
    234
    Vidar Petursson
    May 14, 2004
  5. Replies:
    2
    Views:
    269
Loading...

Share This Page