JavaScript中的PHP代碼

Question

我不知道javascript的工作原理，但是我能夠通過從不同站點進行復制來編寫以下代碼。

我的目標是要有2個單選框（1 =印度，2 =印度以外的其他國家），如果選擇“印度以外的其他國家”，則會顯示一個下拉框，其中顯示了所有國家/地區的名稱。

從數據庫中選擇下拉菜單，並通過自定義php函數實現。

我可以根據我的單選框選擇使代碼顯示下拉列表。

我無法做的事情如下：

1. 我無法從下拉列表中選擇任何值。
2. 如果我在單選框中更改選擇，則無法隱藏下拉菜單

這是表格的代碼：

<form action="<?php $_SERVER['PHP_SELF']?>" method="post">
    <fieldset>
        <br />

        <script type="text/javascript">
            function onclickradio(entry){
                if (entry === true) {
                    alert("YOU HAVE CHOSEN INDIA");
                }
                else { 
                    document.getElementById('OTHER THAN INDIA').innerHTML = '</br><?php dropdown('country');?>';
                }
            }
        </script>

        Country: </br>
        <input onclick="onclickradio(document.getElementById('INDIA').checked);" id="INDIA" name="country" type="radio" checked="checked"/> INDIA
        <input onclick="onclickradio(document.getElementById('INDIA').checked);" id="OTHER THAN INDIA" name="country" type="radio"/> OTHER THAN INDIA

        <br /><br /><br />

        State: <input type="text" name="State" maxlength="30"/><br />
        Line1: <input type="text" name="Line1" maxlength="50" /><br />
        Line2: <input type="text" name="Line2" maxlength="50" /><br />
        City: <input type="text" name="City" maxlength="40" /><br />
        PIN Code: <input type="text" name="PIN_Code" maxlength="8" /><br />
        <input type="submit" name="submit_address" value="Submit Address" />
    </fieldset>
</form>

這是自定義PHP下拉功能的代碼：

<?php
    function dropdown($tablename) /*remember to add single quote around the input*/ 
    {
        $sql="SELECT * FROM ".$tablename;

        $result=mysqli_query($GLOBALS["connection"], $sql)
        or die('Error in running SELECT query');

        $options=""; //initialising the variable, so that it can be concatenated later

        while ($row=mysqli_fetch_array($result))
        {
            $x=0;   /*$x is the index of the field in a row (it has to start with $x=0;
                    because the first index is 0 in php*/ 

            $rowstr=" # ";  /*initialising the variable,
                            so that it can be concatenated later*/

            while ($x+1<=mysqli_num_fields($result))    /*mysqli_num_fields gives the actual number of fields, and not the index. 
                                                        Since the index starts with 0, it is to be incremented by 1 
                                                        before comparison with the mysqli_num_fields*/ 
            {
                $rowstr.= $row[$x]." # "; //concatenation operator
                $x=$x+1;
            }
            $options.="<option value=".$rowstr.">".$rowstr."</option>"; //concatenation operator
        }

        Echo "<select>".$options."</select>";
    }
?>

Answer 1

我想到了幾件事：

• 不要在id值中放置空格。 我建議您也使用小寫字母，因此可以使用“印度”和“非印度”來代替。
• 使用Firefox / Firebug或類似工具運行此腳本時，是否有JavaScript錯誤
• 考慮使用jQuery或類似方法捕獲更改事件-它易於使用，並使用向頁面添加JS功能的“不顯眼”方法。

Answer 2

元素的ID字段不能有空格。 只需嘗試刪除"OTHER THAN INDIA"空格或替換為OTHER_THAN_INDIA

Answer 3

如果選擇了印度，則清除選擇

function onclickradio(entry) {
    if(entry===true) {
        alert("YOU HAVE CHOSEN INDIA");
        document.getElementById('OTHER THAN INDIA').innerHTML = '';
    }
    else {
        document.getElementById('OTHER THAN INDIA').innerHTML = '<br/><?php dropdown('country');?>';
    }
}

Answer 4

嘗試這個：

$(document).ready(function() {
    // hide address inputs
    $('#address').hide();

    // show address inputs if the not india button is pressed
    $('#not-india').click(function() {
        $('#address').show();
    });

    // re-hide address inputs if india is selected
    $('#india').click(function() {
        $('#address').hide();
    });

});

您還必須在頁面中包含jQuery。

小提琴： http : //jsfiddle.net/EN4jB/6/

請注意，我使用了以下標記-特別要注意的是此div的ID。

<input id="india" name="country" type="radio" checked="checked"/> India
<input id="not-india" name="country" type="radio" /> Not India

<br />

<div id="address">
<p><select>
    <option>USA</option>
    <option>UK</option>
    <option>Ireland</option>
    <option>etc...</option>
</select>
</p>

<p>State: <input type="text" name="State" maxlength="30"/></p>
<p>Line1: <input type="text" name="Line1" maxlength="50" /></p>
<p>Line2: <input type="text" name="Line2" maxlength="50" /></p>
<p>City: <input type="text" name="City" maxlength="40" /></p>
</div>