CODEWITHSUNDEEP
javascriptphphtml
Walse
Walse

Reputation: 71

Simple javascript call is failing

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.

Upvotes: 1

Views: 56

Answers (4)

Venkat.R
Venkat.R

Reputation: 7736

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.

Upvotes: 1

user5066707
user5066707

Reputation:

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.

Upvotes: 0

user2377528
user2377528

Reputation:

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>

Upvotes: 2

ckimbrell
ckimbrell

Reputation: 527

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>';

Upvotes: 0

Related Questions