Get control in javascript

Question

I have a couple of textboxes that will contain dates only. If one textbox has a date and the user tries to submit without entering a date in the other date textbox they will be stopped before submit. The way I want to do this is with the following javascript function:

function ClientValidate(sender, args) {
       // Get Both form fields
       var txtdate1 = document.getElementById('<%=txtdate1.ClientID%>');
       var txtdate2 = document.getElementById('<%=txtdate2.ClientID %>');

    // do you client side check to make sure they have something
       if (txtdate1.value != '' && txtdate2.value == '') {

        args.IsValid = false;
    }
    else
    {
        args.IsValid = true;
    }
    if (txtdate2.value != '' && txtdate1.value == '') {

        args.IsValid = false;

    }
    else {
        args.IsValid = true;
    }
}

The creation of the textboxes and date stuff is as follows.

Dim bttndate1 As New ImageButton
    bttndate1.ID = "bttndate1"

    Dim txtdate1 As New TextBox
    txtdate1.ID = "txtdate1"
    txtdate1.Width = 65

    Dim calex1 As New AjaxControlToolkit.CalendarExtender
    calex1.TargetControlID = "txtdate1"
    calex1.Format = "MM/dd/yyyy"
    calex1.PopupButtonID = "bttndate1"

    '**************** date box2 ***************

    Dim bttndate2 As New ImageButton
    bttndate2.ID = "bttndate2"
    bttndate2.Style.Add("cursor", "pointer")

    Dim txtdate2 As New TextBox
    txtdate2.ID = "txtdate2"
    txtdate2.Width = 65


    Dim calex2 As New AjaxControlToolkit.CalendarExtender
    calex2.TargetControlID = "txtdate2"
    calex2.Format = "MM/dd/yyyy"
    calex2.PopupButtonID = "bttndate2"

Here is the Validator

    Dim custval As New CustomValidator
    custval.ID = "ValidPage"
    custval.ClientValidationFunction = "ClientValidate"
    custval.ErrorMessage = "You Must Enter a 'From' Date and a 'To' Date"
    custval.ErrorMessage = "You Must Select a Vendor"
    custval.SetFocusOnError = True
    custval.ControlToValidate = "txtdate1"
    custval.EnableClientScript = True

MY problem is that the javascript isn't finding the two textboxes because i create them in code any ideas?

Joel Etherton · Accepted Answer · 2010-01-24 00:38:05Z

1

I'm an opponent of the ClientScriptManager. The solutions above will probably work, but an alternate method would be to declare a couple of variables in JavaScript outside of your ClientValidate() method.

var textdate1;
var textdate2;

Put a literal in your page somewhere (you can really put it anywhere as long as it has the runat="server" attribute).

<asp:Literal ID="litJSVars" runat="server" />

Then in event where you're creating the textboxes and stuff, add the following code:

this.litJSVars.Text = "textdate1 = document.getElementById('" + txtdate1.ClientID + "');\\n";
this.litJSVars.Text += "textdate2 = document.getElementById('" + txtdate2.ClientID + "');";

It isn't better or worse than the ideas above, it's just a different way of going about it.

answered Jan 24, 2010 at 0:38

Joel Etherton

37.5k10 gold badges92 silver badges106 bronze badges

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

Comments

Jeff S · Accepted Answer · 2009-08-12 16:16:18Z

1

I think that besides tying the validator to the control as Chalkey recommended, you need to generate script in the code-behind to get the references to your controls.

The problem is that you are trying to add a reference to a control that doesn't exist until the site runs. In other words, you are trying to create the javascript to reference date text boxes before the date text boxes exist (they don't exist until the page is generated). So the lines:

`var txtdate1 = document.getElementById('<%=txtdate1.ClientID%>');       
`var txtdate2 = document.getElementById('<%=txtdate2.ClientID %>');

will not work as you expect (they might not even compile).

I'd add these two lines in the method creating the date text boxes so that you have your jscript references:

Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "var txtdate1 = document.getElementById('" + txtdate1.ClientID + "');", true);
Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "var txtdate2 = document.getElementById('" + txtdate2.ClientID + "');", true);

This will create the two javascript variables, txtdate1 and txtdate2, that can be used to reference the date elements.

The difference is that the script to find the controls is generated in the code behind at the same time the controls are being created.

edited Aug 12, 2009 at 16:16

answered Aug 11, 2009 at 22:09

Jeff S

7,49432 silver badges32 bronze badges

2 Comments

Eric Over a year ago

can you give me more details? I'm not sure I understand fully but it seems legit.

Jeff S Over a year ago

Changed the explanation to something that is (hopefully) clearer.

user110714 · Accepted Answer · 2009-08-11 22:04:16Z

0

Try this in your validator code...

custval.ControlToValidate = txtdate1.ClientID

answered Aug 11, 2009 at 22:04

user110714

Comments

Joel Coehoorn · Accepted Answer · 2009-08-11 22:09:38Z

0

Use the ClientScript manager to register your javascript at the same time you create the calendar controls.

answered Aug 11, 2009 at 22:09

Joel Coehoorn

418k114 gold badges582 silver badges820 bronze badges

Comments

Jamal · Accepted Answer · 2009-09-07 09:06:59Z

I dont know exactly where you define your controls but they should be defined in the page class as protected properties something like this:

Protected txtdate1 As New TextBox
Protected txtdate2 As New TextBox

Protected bttndate1 As New ImageButton
Protected bttndate2 As New ImageButton

Protected Overrides Sub OnLoad(ByVal e As System.EventArgs)

    bttndate1.ID = "bttndate1"
    Page.Form.Controls.Add(bttndate1)

    txtdate1.ID = "txtdate1"
    txtdate1.Width = 65
    Page.Form.Controls.Add(txtdate1)

    Dim calex1 As New AjaxControlToolkit.CalendarExtender
    calex1.TargetControlID = "txtdate1"
    calex1.Format = "MM/dd/yyyy"
    calex1.PopupButtonID = "bttndate1"

    '**************** date box2 ***************

    bttndate2.ID = "bttndate2"
    bttndate2.Style.Add("cursor", "pointer")
    Page.Form.Controls.Add(bttndate2)

    txtdate2.ID = "txtdate2"
    txtdate2.Width = 65
    Page.Form.Controls.Add(txtdate2)

    Dim calex2 As New AjaxControlToolkit.CalendarExtender
    calex2.TargetControlID = "txtdate2"
    calex2.Format = "MM/dd/yyyy"
    calex2.PopupButtonID = "bttndate2"


    MyBase.OnLoad(e)
End Sub

Collectives™ on Stack Overflow

Get control in javascript

5 Answers 5

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related