Simple javascript call is failing

Question

So here is my problem i have some checkboxes and i want to trigger some behaviour when they are checked or unchecked. So i put a simple javascript function onchange. But i run a test both mozilla and and chrome report a syntax error from a the line where i call my function but i can't find the error. This is so simple it drives me crazy, if u can help me find my error i'd greatly apreciate it. Here is my code :

The php function in which the HTML lines for the checkbox is generated:

 public function addClassToTable(){
 $res='';
 foreach($tab=classes::findAll() as $c){
 $string=$c->__get('niveau').$c->__get("section").$c->__get("division");
 $id=$c->__get('id').$string;
 $res.='<tr><td>'.$string.'</td><td><input type="checkbox" id="'.$id.'" onchange="addClasse('.$id.')"></td></tr>';
 }
 return $res;
 }

The Js function addClasse :

 function addClasse(val){
 var inputElements = document.getElementById(val);
 if(inputElements.checked){
 document.getElementById('selectClasse').style.display="block";
 }
 else{
 document.getElementById('selectClasse').style.display="block";
 }
 }

And here is the Html from which i get the error

 <fieldset>
 <legend>Ajouter une Classe</legend>
 <table>
 <tr>
 <th>Classe</th>
 <th>Selectionner</th>
 </tr>
 <tr><td>12A</td><td><input type="checkbox" id="112A" onchange="addClasse(112A)"></td></tr><tr><td>12A</td><td><input type="checkbox" id="212A" onchange="addClasse(212A)"></td></tr><tr><td>12A</td><td><input type="checkbox" id="312A" onchange="addClasse(312A)"></td></tr>
 </table>
 </fieldset>

The syntax error mention a missing ) after argument list in chrome and identifier starts immediately after numeric literal in mozilla firefox.

• antlersoft: The (112A) has to be in quotes, try: onchange="addClasse('112A')"
• Venkat.R: Add single quote for your parameter. onchange="'addClasse(112A)'"
• Venkat.R: i don't find the id in your html selectClasse. please add it
• Walse: Thanks for quick answer,@antlersoft answer worked fine. i guess i'm tired for not seing this one by myself ! Thanks @Venkatraman, but the js was just a test to see if my function is called, it's ok it work now, Thx to you
• Venkat.R: check my answer for 1 line code snippet and accessing the whole element

Answer 1

wrap your string like this in onChange Functions argument.

<fieldset>
 <legend>Ajouter une Classe</legend>
 <table>
 <tr>
 <th>Classe</th>
 <th>Selectionner</th>
 </tr>
 <tr>
 <td>12A</td>
 <td><input id="112A" onchange="addClasse('112A')" type=
 "checkbox"></td>
 </tr>
 <tr>
 <td>12A</td>
 <td><input id="212A" onchange="addClasse('212A')" type=
 "checkbox"></td>
 </tr>
 <tr>
 <td>12A</td>
 <td><input id="312A" onchange="addClasse('312A')" type=
 "checkbox"></td>
 </tr>
 </table>
</fieldset>

Answer 2

There is no need passing id parameter to the addClasse method. Pass this context to access the whole element properties.

Try the below code snippet.

PHP Code: pass the this context

$res.='<tr><td>'.$string.'</td><td><input type="checkbox" id="'.$id.'" onchange="addClasse(this)"></td></tr>';

JS Code

function addClasse(el) {
 document.getElementById('selectClasse').style.display = (el.checked) ? "block" : "none";
}

Note: you missed none string and you can use ternary operator for these kind of conditions.

Answer 3

Try to place the ID in quotes within the javascript function call, like below.

$res.='<tr><td>'.$string.'</td><td><input type="checkbox" id="'.$id.'" onchange="addClasse(\''.$id.'\')"></td></tr>';

Answer 4

addClasse(112A) - the error is because you used letters in an "Integer". You've to make it an "String" using quotes, like: addClasse('112A') (when you call it)

It's correct use \" or \' (if you're using quotes like " in the string) to generate a quote inside the tag attribute (depending if you're doing the attribute with " or ') in the echo string.