How to add JavaScript event handler to dynamically generated TextBoxes on ASP control

Question

We have conditions that will dynamically add TextBoxes to an ASP User Control like this:

if (conditionIsTrue) {
    TextBox textField = new TextBox();
    Panel.controls.Add(textField);
}

I would like to add an event listener that left-pads the TextBox value when the user unfocuses or is done editing the TextBox.

I have tried the following C# implementation but for some reason the values are not being handled by the listener.

if (conditionIsTrue) {
    TextBox textField = new TextBox();
    textField.TextChanged += new EventHandler(LeadingZero_Handler);
    Panel.controls.Add(textField)
}

public void LeadingZero_Handler(object sender, EventArgs e)
{
    int FieldLength = 10;
    if((TextBox)sender.Text.Length < FieldLength)
    {
        (TextBox)sender.Text = (TextBox).sender.Text.PadLeft(FieldLength,'0');
    }
}

Is there is a way that I could implement the event listener in JavaScript on the ASP Control, but add the JavaScript listener attribute during/when the TextBox is being dynamically generated in the C# code?

Add textField.AutoPostBack = true;

VDWWD
– VDWWD

2018-05-24 17:27:49 +00:00
Commented May 24, 2018 at 17:27 — VDWWD
– VDWWD, Commented May 24, 2018 at 17:27

VDWWD · Accepted Answer · 2018-05-24 17:49:48Z

1

Add this to the code behind.

textField.AutoPostBack = true;

But if all you do is add some zero padding, and you are doing nothing else in LeadingZero_Handler, I would recommend a front-end approach. That saves you a PostBack.

<script type="text/javascript">
    function LeadingZero(element) {
        var str = element.value;
        var padding = "0000000000";
        if (str.length < 10) {
            element.value = padding.substring(0, padding.length - str.length) + str;
        }
    }
</script>

And then add the script to the TextBox instead of the AutoPostBack and the TextChanged handler.

textField.Attributes.Add("onblur", "LeadingZero(this)");

answered May 24, 2018 at 17:49

VDWWD

35.7k23 gold badges67 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

dave Over a year ago

I have tried this implementation and it seems that "onblur" doesn't work well with IE 11 or or there is something fundamentally wrong with this approach. However, it does seem that the method is being applied to my elements which is exactly what I was asking for.

Collectives™ on Stack Overflow

How to add JavaScript event handler to dynamically generated TextBoxes on ASP control

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related