How to refer to the control in javascript function in the content page

[Peter Afonin]

Hello,

I'm using the javascript Calendar in my aspx pages. I'm having troubles
using it with the Master-Content pages.

In the regular aspx page I'm referring to the textbox like this:

var cal2 = new calendar2(document.forms['form1'].elements['txtEndDate']);

Obviously, this doesn't work in the Content page. In the source of this page
the textbox looks like this:

ctl00_ContentPlaceHolder1_txtEndDate

So I tried to use it. This works fine if I refer to the control directly,
like this:

ctl00_ContentPlaceHolder1_txtEndDate.focus(); instead of
document.form1.txtEndDate.focus();

However, in the javascript function it still doesn't work:

var cal2 = new calendar2(ctl00_ContentPlaceHolder1_txtEndDate);

gives me a message that control ctl00_ContentPlaceHolder1_txtEndDate is
undefuned.

Just in case, here is the function calendar2:

function calendar2(obj_target) {

// assing methods
this.gen_date = cal_gen_date2;
this.gen_time = cal_gen_time2;
this.gen_tsmp = cal_gen_tsmp2;
this.prs_date = cal_prs_date2;
this.prs_time = cal_prs_time2;
this.prs_tsmp = cal_prs_tsmp2;
this.popup = cal_popup2;

// validate input parameters
if (!obj_target)
return cal_error("Error calling the calendar: no target control
specified");
if (obj_target.value == null)
return cal_error("Error calling the calendar: parameter specified is not
valid tardet control");
this.target = obj_target;
this.time_comp = BUL_TIMECOMPONENT;
this.year_scroll = BUL_YEARSCROLL;

// register in global collections
this.id = calendars.length;
calendars[this.id] = this;
}

Does anyone knows what is the trick here, how should I refer to this control
in the js function? I'm not an expert in js and would appreciate your
comments.

Thank you.

 

[Guest]

Hello,

I'm using the javascript Calendar in my aspx pages. I'm having troubles
using it with the Master-Content pages.

In the regular aspx page I'm referring to the textbox like this:

var cal2 = new calendar2(document.forms['form1'].elements['txtEndDate']);

Obviously, this doesn't work in the Content page. In the source of this page
the textbox looks like this:

ctl00_ContentPlaceHolder1_txtEndDate

Use document.getElementById('<%=txtEndDate.ClientID%>')

where txtEndDate.ClientID returns id on the client
(ctl00_ContentPlaceHolder1_txtEndDate)

Must be

So I tried to use it. This works fine if I refer to the control directly,
like this:

ctl00_ContentPlaceHolder1_txtEndDate.focus(); instead of
document.form1.txtEndDate.focus();

However, in the javascript function it still doesn't work:

var cal2 = new calendar2(ctl00_ContentPlaceHolder1_txtEndDate);

must be

var cal2 = new calendar2('ctl00_ContentPlaceHolder1_txtEndDate');

because ctl00_ContentPlaceHolder1_txtEndDate is a name

Hope this helps

 

[Peter Afonin]

Thank you very much, Alexey, it worked!

Still a bit strange to me why ctl00_ContentPlaceHolder1_txtEndDate didn't
work. It seems to be an ID, the name is
ctl00$ContentPlaceHolder1$txtEndDate:

<input name="ctl00$ContentPlaceHolder1$txtEndDate" type="text"
id="ctl00_ContentPlaceHolder1_txtEndDate" style="width:75px;" />

But - it works now.

Peter

Hello,

I'm using the javascript Calendar in my aspx pages. I'm having troubles
using it with the Master-Content pages.

In the regular aspx page I'm referring to the textbox like this:

var cal2 = new calendar2(document.forms['form1'].elements['txtEndDate']);

Obviously, this doesn't work in the Content page. In the source of this
page
the textbox looks like this:

ctl00_ContentPlaceHolder1_txtEndDate

Use document.getElementById('<%=txtEndDate.ClientID%>')

where txtEndDate.ClientID returns id on the client
(ctl00_ContentPlaceHolder1_txtEndDate)

Must be

So I tried to use it. This works fine if I refer to the control directly,
like this:

ctl00_ContentPlaceHolder1_txtEndDate.focus(); instead of
document.form1.txtEndDate.focus();

However, in the javascript function it still doesn't work:

var cal2 = new calendar2(ctl00_ContentPlaceHolder1_txtEndDate);

must be

var cal2 = new calendar2('ctl00_ContentPlaceHolder1_txtEndDate');

because ctl00_ContentPlaceHolder1_txtEndDate is a name

Hope this helps

 

[Guest]

Thank you very much, Alexey, it worked!

Still a bit strange to me why ctl00_ContentPlaceHolder1_txtEndDate didn't
work.

Well, because

var cal2 = new calendar2(document.forms['form1'].elements
['txtEndDate']);

is not equal to

var cal2 = new calendar2(ctl00_ContentPlaceHolder1_txtEndDate);

The general syntax for accessing a form element is:

document.forms[number].elements[number]

So, to make that code work you should try something like this

var cal2 = new calendar2(document.forms['form1'].elements
['ctl00_ContentPlaceHolder1_txtEndDate']);

When you use document.getElementById it will search the whole DOM
structure for an element with the given id and then returns its value.

 

[Guest]

Thank you very much, Alexey, it worked!

Still a bit strange to me why ctl00_ContentPlaceHolder1_txtEndDate didn't
work.

Well, because

var cal2 = new calendar2(document.forms['form1'].elements
['txtEndDate']);

is not equal to

var cal2 = new calendar2(ctl00_ContentPlaceHolder1_txtEndDate);

The general syntax for accessing a form element is:

document.forms[number].elements[number]

So, to make that code work you should try something like this

var cal2 = new calendar2(document.forms['form1'].elements
['ctl00_ContentPlaceHolder1_txtEndDate']);

When you use document.getElementById it will search the whole DOM
structure for an element with the given id and then returns its value.

How to get the value of a form element using JavaScript
http://www.javascript-coder.com/javascript-form/javascript-get-form.htm

 

[Peter Afonin]

Thank you, this makes sense.

Peter

Thank you very much, Alexey, it worked!

Still a bit strange to me why ctl00_ContentPlaceHolder1_txtEndDate
didn't
work.

Well, because

var cal2 = new calendar2(document.forms['form1'].elements
['txtEndDate']);

is not equal to

var cal2 = new calendar2(ctl00_ContentPlaceHolder1_txtEndDate);

The general syntax for accessing a form element is:

document.forms[number].elements[number]

So, to make that code work you should try something like this

var cal2 = new calendar2(document.forms['form1'].elements
['ctl00_ContentPlaceHolder1_txtEndDate']);

When you use document.getElementById it will search the whole DOM
structure for an element with the given id and then returns its value.

How to get the value of a form element using JavaScript
http://www.javascript-coder.com/javascript-form/javascript-get-form.htm