javascript cannot call an element in array

Question

Ok, let me explain more... the goal is to make the checkbox checked if there's a change on select. The actual code was:

function checkit(date)
{
  document.forms[0].date.checked = true;
}


<input type="checkbox" name="date[]" value="2008-08-14">Aug 14, 2008<br> 
 <select name="slot[]" size="1" onchange="checkit(date[]);"/>
 <option value="2008-08-15;0900;1700">9am to 5pm</option>       
 <option value="2008-08-15;1330;1730">1:30pm to 5:30pm</option>
 </select>

  <input type="checkbox" name="date[]" value="2008-08-15">Aug 14, 2008<br> 
 <select name="slot[]" size="1" onchange="checkit(date[]);"/>
 <option value="2008-08-15;0900;1700">9am to 5pm</option>       
 <option value="2008-08-15;1330;1730">1:30pm to 5:30pm</option>
 </select>

<input type="checkbox" name="date[]" value="2008-08-16">Aug 14, 2008<br> 
 <select name="slot[]" size="1" onchange="checkit(date[]);"/>
 <option value="2008-08-15;0900;1700">9am to 5pm</option>       
 <option value="2008-08-15;1330;1730">1:30pm to 5:30pm</option>
 </select>

In PHP, if it sees a variable with [ ], it automatically creates an array. In Javascript, I expected that Javascript would recognize the [] and execute based on the current element. For example, if I select a value in the second checkbox, it should fire an event to check that element box. I don't want to name the variable like date1, date2, date3, date4... I hope this clarifies more. I know I am missing out something... I tried "this" keyword to make it "this current element" but it doesn't seem to work but it could be that I used the improper syntax.

What I expected was that onchange event, it should fire its argument which is "date[]" but I would assume that Javascript should know which element in date[] it will use instead of expliciting calling it date[1] and so on. The checkit function gets the "date[]" name and checks that date[] checkbox.

BTW, many thanks for the supplementary answers (I learned something new!)

Answer 1

What exactly are you trying to do with this code ?

According to your piece of code (which has some syntax errors), you are checking a checkbox, then calling a js function that will check the checkbox again...?

What exactly are you trying to achieve?

Try this code:

function checkit(date)
   {
    var date = document.getElementById(date);
    date.checked = true;
   }
<input type="checkbox" id="date[1]" value="2008-08-14" onchange="checkit('date[1]')");/>Aug 14, 2008<br /> 
<input type="checkbox" id="date[2]" value="2008-08-14" onchange="checkit('date[2]')");/>Aug 14, 2008<br /> 
<input type="checkbox" id="date[3]" value="2008-08-14" onchange="checkit('date[3]')");/>Aug 14, 2008<br />

Answer 2

What does happen?

Have you tried debugging it? Either with alerts to see if you are getting what you expect or more usefully, I think, with the firebug addon to firefox?

Answer 3

It doesn't work because (as dreas said) your HTML-code has errors and you are naming your variables in a way that conflicts with javascript syntax.

The name of your input is date[1] and the [ and ] have special meaning in javascript code.

In this code:

document.forms[0].date.checked = true;

you are trying to access the documents first form (document.forms[0]) and then tries to access a field called date, but there aren't any. According to your HTML-markup you have fields called "date[1]", "date[2]" and "date[3]".

But you can't access them like this:

document.forms[0].date[1].checked = true;

Why? Because date[1] tries to index the date with 1, and in this case your date is not an array.

You can access it if you enclose it in quotes:

document.forms[0]["date[1]"].checked = true;

Note that now "date[1]" is used as a string.

Answer 4

PHP has the syntax arr[] = something to put something at the next available index in an array.

Javascript doesn't have that syntax; if you want to put something at the next available index in an array use arr.push(something) instead.

But the portion of your example you're referring to is in HTML, not Javascript. Javascript accesses it but the form fields themselves are created in HTML... so you have to give it your own name rather than an automatically-incremented name.

If you are creating the HTML dynamically through DOM calls (e.g. for each input element, document.createElement('input'), assign attributes and then appendChild() to the main form), then you could automatically name the form fields... but that's a whole other method of generating HTML & has a bunch of pitfalls to watch out for.

Answer 5

First, you're wanting to use a PHP-specific feature in Javascript. No, there is no such feature so far as I can tell.

Second, I'd strongly advise not using HTML input names like "date[1]" ... that might be legal HTML (I'd have to try it in a few browsers to be sure it was effectively allowed), but it is almost 100% a likely source of errors in the maintenance cycle.

I'm assuming this code is either auto-generated for you or you just want to take a blok and copy/paste in your editor. If it is the former, I'd name the elements "date_1" in the autogen code and be done with it. If the latter then you can either maintain the number in your code (ie, manually type in date_1 through date_257) or use a Javascript document.write call to generate the HTML with less effort. I'd ONLY do the latter (document.write out HTML) if there is really no other way. If you're talking about 10-25 copies, handling this manually by hand is less likely to have a problem than using document.write; if you have more than 25 such instances then maybe it makes sense to automate the element generation.