PHP code inside javascript

Question

I have no idea about how javascript works, but I was able to write the following code by copying from different sites.

My aim is to have 2 radio boxes (1 = India, 2 = Other than India) and if Other than India is selected, then a dropdown box is displayed which shows names of all countries.

The dropdown is selected from a database and it is achieved by a custom php function.

I am able to make the code display the dropdown based on my radio box selection.

What I am unable to do is as follows:

1. I am not able to select any values from the dropdown.
2. I'm not able to make the dropdown hide if I change the choice in the radio box

Here is the code of the form:

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

Here is the code for the custom PHP dropdown function:

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

A few things that come to mind:

• Don't put spaces in id values. I recommend that you use lower case as well, so you could have "india" and "not-india" instead.
• Use Firefox/Firebug or similar to see if you have any JavaScript errors when you run this
• Consider using jQuery or similar to catch change events - it is easy to use and uses the 'unobtrusive' method of adding JS functionality to your page.

Answer 2

Id field of an element can not have space. Just try removing spaces in "OTHER THAN INDIA" or replace to looks like OTHER_THAN_INDIA

Answer 3

Try this:

$(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();
 });
});

You will also have to include jQuery in your page.

Fiddle: http://jsfiddle.net/EN4jB/6/

Please note that I used the following markup - particular attention is due to the id of this div.

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

Answer 4

To clear the selection if India is chosen

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');?>';
 }
}

• craig1231: The thing you have to keep in mind PHP is a server side language, whereas Javascript is a client side language
• Shantha Kumara: What about spaces in id field? Can you get the element which is identified by "OTHER THAN INDIA"?
• craig1231: india/notindia would be better, altho it is encased by a string I dont think it matters
• Shantha Kumara: But naming rules in W3schools : Id - 1)Must begin with a letter A-Z or a-z 2)Can be followed by: etters (A-Za-z), digits (0-9), hyphens ("-"), 3) underscores ("_") and In HTML, all values are case-insensitive
• Chinmay Kamat: Hi Craig1231, I did as you specified (i.e. added the line document.getElementById('OTHER THAN INDIA').innerHTML = ''?). But now nothing is happening, none of the javascript code is working. Pls help.