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

  • Thread starter Thread starter Peter Afonin
  • Start date Start date
P

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.
 
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
Click to expand...


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);
Click to expand...


must be

var cal2 = new calendar2('ctl00_ContentPlaceHolder1_txtEndDate');

because ctl00_ContentPlaceHolder1_txtEndDate is a name

Hope this helps
 
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
Click to expand...


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);
Click to expand...


must be

var cal2 = new calendar2('ctl00_ContentPlaceHolder1_txtEndDate');

because ctl00_ContentPlaceHolder1_txtEndDate is a name

Hope this helps
 
Thank you very much, Alexey, it worked!

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

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.
 
Thank you very much, Alexey, it worked!
Click to expand...
Still a bit strange to me why ctl00_ContentPlaceHolder1_txtEndDate didn't
work.
Click to expand...

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.
Click to expand...

How to get the value of a form element using JavaScript
http://www.javascript-coder.com/javascript-form/javascript-get-form.htm
 
Thank you, this makes sense.

Peter

Thank you very much, Alexey, it worked!
Click to expand...
Still a bit strange to me why ctl00_ContentPlaceHolder1_txtEndDate
didn't
work.
Click to expand...

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.
Click to expand...

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