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:

I am not able to select any values from the dropdown.
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>";
    }
?>

halfer · Accepted Answer · 2011-12-05 11:47:40Z

3

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.

answered Dec 5, 2011 at 11:47

halfer

20.2k20 gold badges110 silver badges207 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Shantha Kumara · Accepted Answer · 2011-12-05 11:47:58Z

0

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

answered Dec 5, 2011 at 11:47

Shantha Kumara

3,4194 gold badges42 silver badges52 bronze badges

Comments

martincarlin87 · Accepted Answer · 2011-12-05 11:55:38Z

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>

craig1231 · Accepted Answer · 2011-12-05 12:54:04Z

0

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

edited Dec 5, 2011 at 12:54

answered Dec 5, 2011 at 11:48

craig1231

3,8884 gold badges33 silver badges34 bronze badges

7 Comments

craig1231 Over a year ago

The thing you have to keep in mind PHP is a server side language, whereas Javascript is a client side language

Shantha Kumara Over a year ago

What about spaces in id field? Can you get the element which is identified by "OTHER THAN INDIA"?

craig1231 Over a year ago

india/notindia would be better, altho it is encased by a string I dont think it matters

Shantha Kumara Over a year ago

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 Over a year ago

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.

|

Collectives™ on Stack Overflow

PHP code inside javascript

4 Answers 4

Comments

Comments

Comments

7 Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

7 Comments

Related