question about getting an element by id

@chris32680Oct 15.2008

Hi All,
probably a stupid question, and i imagine it’s as simple as a getelementbyid call, but i’ll ask anyways.

I’m trying to modify the “SpiffyCalendar” for a popup calendar
(source can be seen here if interested ~~[url]~~http://simplythebest.net/scripts/DHTML_scripts/javascripts/javascript_48.html[/url]).

What is does basically is you call a function which takes in a few parameters
control name
form name
input name
button name
default date

and it creates a text input box with a button to the right of it to activate the popup calendar.

The problem i’ve come across is that on some of our pages, since they’re displayed dynamically from a DB, that multiple rows may need text input boxes with the same “name” attribute (the called procedure takes these in a varray). So with this calendar it appears to break when there are more than one calendar control with the same “input name”.

I’m thinking that it could be changed to take in an “id” attribute and use that and we could create a unique id for each input box, but i’m just not sure how to do that.

There are lot’s of places in the code that do something similar to this:

[code] eval(‘document.’+this.formName+’.’+this.textBoxName).className = “cal-TextBox”; [/code]

and i believe the

[code] document.’+this.formName+’.’+this.textBoxName [/code]

could be changed to somehow reference by the id instead of the this.textBoxName (which is the input name attribute)…i’m just not exactly sure how to do it.

Any ideas? is this possible?

Thanks

to post a comment

JavaScript

3 Comments(s) _↴

@DokOct 15.2008 — #Not really sure what you mean - I guess it depends on where the eval statment is executed. Try this instead - can't see what the eval is for...
[CODE]document.getElementById('myId').className = "cal-TextBox";[/CODE]

@toicontienOct 15.2008 — #On line 490 in spiffyCal.js, add a parameter at the very end:
function ctlSpiffyCalendarBox( ... , [B]intTextBoxIndex[/B]) {
This is the index at which the text box resides in the document.FORM_NAME.elements.TEXT_BOX array. If you have 5 date text boxes, you would supply numbers 0 through 4 when instantiating a ctlSpiffyCalendarBox object. The intTextBoxIndex parameter is optional. You may omit it.

On line 698 of spiffyCal.js, add a method to the class:

 /* METHODS ===============================================================
 *
 */
 
 <i>	</i>[B]this.getTextBox = function() {
 <i>	</i>	if (this.intTextBoxIndex &lt; 0) {
 <i>	</i>		return document.forms[this.strFormName].elements[this.strTextBoxName];
 <i>	</i>	} else {
 <i>	</i>		return document.forms[this.strFormName].elements[this.strTextBoxName][this.intTextBoxIndex];
 <i>	</i>	}
 <i>	</i>};[/B]

This is a function that allows you to easily get a DOM node reference to the text box.

Next, add this property in the ctlSpiffyCalendarBox function:
this.intTextBoxIndex = (typeof(intTextBoxIndex) == "number") ? intTextBoxIndex : -1;

Now, replace all occurences of the code below
eval('document.'+this.formName+'.'+this.textBoxName)
With this code:
this.getTextBox()
Let's say all your date text boxes are named "date" and it resides in a form named "test". You have 5 date boxes. To instantiate the calendars:

var cal;
 cal = new ctlSpiffyCalendarBox("cal", "test", "date", "button_name", "10/15/2008", 0, [B]0[/B]);
 cal = new ctlSpiffyCalendarBox("cal", "test", "date", "button_name", "10/15/2008", 0, [B]1[/B]);
 cal = new ctlSpiffyCalendarBox("cal", "test", "date", "button_name", "10/15/2008", 0, [B]2[/B]);
 cal = new ctlSpiffyCalendarBox("cal", "test", "date", "button_name", "10/15/2008", 0, [B]3[/B]);
 cal = new ctlSpiffyCalendarBox("cal", "test", "date", "button_name", "10/15/2008", 0, [B]4[/B]);

Try that out. The example code for instantiating calendar objects is just to get you started. You should be able to adopt it to your needs.

@chris32680authorOct 16.2008 — #amazing.

thanks for the help.

resolved.

Also in #JavaScript _↴

changing src by id, folder destination Ajax and php in one file What is the unique identifier for a DOM element/node

Success!

Help @chris32680 spread the word by sharing this article on Twitter...

Tweet This

question about getting an element by id

3 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

question about getting an element by id

3 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

3 Comments(s) _↴

Also in #JavaScript _↴