How to identify dynamic html objects in javascript?

Question

I have a html code like below. I would like to know how to identify the sessionEventsDecorator[0].startDateStr, sessionEventsDecorator[1].startDateStr dynamically in the javascript. The purpose is to make sure the user don't enter year value greater than 2013.

&lt;input id="sessionEventsDecorator[0].startDateStr" name="sessionEventsDecorator[0].startDateStr" class="text small" onchange="formDirty();" type="text" value="Mar 05, 2013"/&rt;


&lt;input id="sessionEventsDecorator[1].startDateStr" name="sessionEventsDecorator[1].startDateStr" class="text small" onchange="formDirty();" type="text" value="Mar 05, 2013"/&rt;

document.getElementById("sessionEventsDecorator[0].startDateStr") ... — crush
– crush, Commented Mar 5, 2013 at 18:49
When you say "identify dynamically", do you mean loop through all of the inputs and check each one? — talemyn
– talemyn, Commented Mar 5, 2013 at 18:51

Ben McCormick · Accepted Answer · 2013-03-05 19:24:15Z

1

document.getElementById("sessionEventsDecorator[0].startDateStr").value <=2013

That will check that for you. But I don't think you're understanding how ids work correctly. Ids are not dynamic and don't work as arrays, they serve as unique identifiers for individual html objects.

Something like "sessionEventDecoratorDate0" would be more normal.

If you want to loop over all of them and don't know how many there are, you can get the values by

var counter=0;
while (true){
  var element = document.getElementById("sessionEventsDecorator["+counter+"].startDateStr");
  if(element){
   counter++;
   //do logic here on element
  }
  else{
    break;
  }
}

edited Mar 5, 2013 at 19:24

answered Mar 5, 2013 at 18:49

Ben McCormick

25.8k12 gold badges56 silver badges71 bronze badges

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

4 Comments

the system Over a year ago

I think OP wants to use the text of the attributes to look up properties on an existing object. But I could be wrong.

Ben McCormick Over a year ago

@thesystem could be. It was a little unclear. Lets see if he has comments?

user1684535 Over a year ago

@ben336, I would want to get the values of all the startDateStr in the form in a javascript function. These startDateStr can be added dynamically to the form.

user1684535 Over a year ago

if you see the in the example code snippet there are two startDateStr fields sessionEventsDecorator[0].startDateStr, sessionEventsDecorator[1].startDateStr. There can be n no of startDateStr in the same form. How do I check the values of each of them in a javascript function?

talemyn · Accepted Answer · 2013-03-05 19:09:28Z

0

Okay, based on your comment to Sebas' answer, I think this is what you are looking for, based on what we can see of your code:

var loopIndex = 0;

while (document.getElementById("sessionEventsDecorator[" + loopIndex + "].startDateStr"))
{
    var inputField = document.getElementById("sessionEventsDecorator[" + loopIndex + "].startDateStr");

    . . . logic to check date . . .

    loopIndex++;
}

That being said, the naming convention for your divs is kind of confusing. Simplifying the ids would help in readability. Also, there are cleaner ways of doing the iteration if you can use JQuery and give all of these inputs a common class.

edited Mar 5, 2013 at 19:09

answered Mar 5, 2013 at 19:03

talemyn

8,0004 gold badges33 silver badges52 bronze badges

5 Comments

user1684535 Over a year ago

Thanks @talemyn. I would like to know how to do substring on the value of inputField variable here. It works fine when use something like inputField.value in Firefox but does not work in IE

talemyn Over a year ago

What substring are you looking for? Something like var fieldValue = inputField.value; will get the value of the field for you as a string (works in FF and IE) and then you can manipulate fieldValue however you like.

talemyn Over a year ago

Also, if you don't need to do anything with the field itself, you can also combine the two steps and just do var fieldValue = document.getElementById("sessionEventsDecorator[" + loopIndex + "].startDateStr").value;.

user1684535 Over a year ago

I have this piece of code var val=document.getElementById("sessionEventsDecorator[" + loopIndex + "].startDateStr"); var val2=val.value; when I put alert(val2) is not giving an alert in IE but works in FF.

talemyn Over a year ago

Okay, that is because val is just a string. It does not have a value property. When you created val you assigned it the value of the field. If that is what you want to see, then just use alert(val); and it should work in both browsers.

Ben McCormick · Accepted Answer · 2013-03-05 19:24:37Z

0

You should set the id and name attributes of your element to something MUCH more simple:

<input type="text" class="text small" onchange="formDirty()" name="dateDecorator0" id="dateDecorator0">

<input type="text" class="text small" onchange="formDirty()" name="dateDecorator1" id="dateDecorator1">

Now we have something easy to work with. So in our Javascript we can now access all of the inputs with document.getElementById("dateDecorator"+i).value. But I honestly don't even know why you want to do this when inside your formDirty() function it should look something like this:

function formDirty(){
    var val=this.value;
    if(val.substr(val.indexOf(",")+2) > 2013){
        this.value=val.substr(0,val.indexOf(",")+2)+"2013";
    };
}

edited Mar 5, 2013 at 19:24

Ben McCormick

25.8k12 gold badges56 silver badges71 bronze badges

answered Mar 5, 2013 at 19:04

Andrew

5365 silver badges17 bronze badges

Collectives™ on Stack Overflow

How to identify dynamic html objects in javascript?

3 Answers 3

4 Comments

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related