0

JavaScript を使用してユーザーを別のリンクにリダイレクトしようとしています。ユーザーがラジオ ボックスからオプションを選択してボタンをクリックすると、javascript はユーザーを sitename.com/events/text-which-user-selected-from-radio-box のようなリンクにリダイレクトします。php.Here から radiobox データを取得しています。コードは次のとおりです。

<?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()" />

このコードは、次のような HTML を返します。

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



また、javascript 内で php を使用しました。これが私の javascript コードです。

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

そして、php は次のような JavaScript コードを返します。

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

最初のラジオ ボックスをクリックしてボタンをクリックすると、正常に動作します。しかし、2番目のラジオボックスを選択して送信ボタンをクリックすると、返されます

TypeError: id_tuh が null [このエラーでブレーク]

if(id_tuh.checked == true){

私が今何をすべきか提案してください。

4

1 に答える 1

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

間違ったIDです。この HTML:

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

は ID を生成しますAmsterdam-Salsa-&-Zouk-Festival— HTML エンティティは依然として属性で問題なく解釈されます — したがって、それを使用する必要があります。

もちろん、より良い解決策は、アンパサンドや大文字を含まない実際のスラッグを作成して使用することです。

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/>";

また、正確さのために引用符を交換する必要htmlspecialcharsがありましたが、とにかくその方が見栄えがします。

于 2013-07-15T16:30:52.487 に答える