CODEWITHSUNDEEP
phpjavascript
Mushfiqul Tuhin
Mushfiqul Tuhin

Reputation: 676

How to solve TypeError: getElementById null in javascript

I am trying to redirect users to another link via javascript. When users select an option from radio box and click on the button then javascript redirects user to a link like, sitename.com/events/text-which-user-selected-from-radio-box. I am fetching radiobox data from php.Here is my code,

<?php

foreach ($words as $word){   
         if($results > 3)
             echo "<input name='tuh' type='radio' id='".str_replace(' ', '-', $word->name)."' value='".$word->name."'/>". $word->name."|".get_permalink($word->ID)."\n"."<br/>";

        else
             echo "<input name='tuh' type='radio' id='".str_replace(' ', '-', $word->name)."' value='".$word->name."'/>".$word->name."\n"."<br/>"; 


    }

    ?>
<input type='button' value='write review' onclick="js_tuh()" />

This code returns HTML like this,

<input name='tuh' type='radio' id='Amsterdam-International-Salsa- Congress'     value='Amsterdam International Salsa Congress'/>Amsterdam International Salsa Congress|
<br/>
<input name='tuh' type='radio' id='Amsterdam-Salsa-&amp;-Zouk-Festival'          value='Amsterdam Salsa &amp; Zouk Festival'/>Amsterdam Salsa &amp; Zouk Festival|



I also used php inside javascript, Here is my javascript code,

<script type='text/javascript'>

        function js_tuh(){

        <?php

            foreach ($words as $word){

        ?>
            id_tuh=document.getElementById("<?php echo str_replace(' ', '-', $word->name); ?>");

             if(id_tuh.checked == true){
            // alert(id_tuh.value);
            window.location = "http://beta.salsatraveladvisor.com/events/"+id_tuh.id; 
             }
            <?php } ?>
            }

        </script>

And php returns javascript code like this,

    <script type='text/javascript'>

        function js_tuh(){

    id_tuh=document.getElementById("Amsterdam-  International-Salsa-Congress");

             if(id_tuh.checked == true){
             alert(id_tuh.value);
             //alert(id_tuh.value);
    //window.location.replace("http://www.salsatraveladvisor.com/events/"+id_tuh.value);
            window.location = "http://beta.salsatraveladvisor.com/events/"+id_tuh.id; 
             }
   id_tuh=document.getElementById("Amsterdam-Salsa-&amp;-Zouk-Festival");

             if(id_tuh.checked == true){
             alert(id_tuh.value);
             //alert(id_tuh.value);
    //window.location.replace("http://www.salsatraveladvisor.com/events/"+id_tuh.value);
            window.location = "http://beta.salsatraveladvisor.com/events/"+id_tuh.id; 
             }
                            }

        </script>

When I click first radio box and click on the button, it works fine. But when I select second radiobox and click on the submit button it returns

TypeError: id_tuh is null [Break On This Error]

if(id_tuh.checked == true){

Please give me a suggestion what should I do now.

Upvotes: 0

Views: 296

Answers (1)

Ry-
Ry-

Reputation: 225125

id_tuh=document.getElementById("Amsterdam-Salsa-&amp;-Zouk-Festival");

is the wrong ID. This HTML:

<input name='tuh' type='radio' id='Amsterdam-Salsa-&amp;-Zouk-Festival'          value='Amsterdam Salsa &amp; Zouk Festival'/>

produces the ID Amsterdam-Salsa-&-Zouk-Festival — HTML entities are still interpreted just fine in attributes — and so you need to use that.

The better solution, of course, would be to produce and use an actual slug that doesn’t contain ampersands or uppercase characters.

function slug($name) {
    return preg_replace('/[^a-z]+/', '-', strtolower($name));
}

echo '<input name="tuh" type="radio" id="', slug($word->name),
     '" value="', htmlspecialchars($word->name), '" />',
     htmlspecialchars($word->name, ENT_NOQUOTES), '|',
     get_permalink($word->ID), "\n<br/>";

Also, I had to swap the quotes for accuracy in htmlspecialchars, but it looks better that way anyways.

Upvotes: 1

Related Questions