CODEWITHSUNDEEP
phphtml
Jacob Mutale
Jacob Mutale

Reputation: 57

making a selection from a dropdown list without a submit button and auto refreshes the data

I am trying to get a value from a dropdown list and the then display the data from a xml I am supposed to use php to retrieve the data from the xml like this:

enter image description here

here is my xml:

<?xml version="1.0" encoding="UTF-8"?>
<People>
   <Person>
      <name>Ahmet</name>
      <surname>Guler</surname>
      <age>37</age>
      <gender>M</gender>
      <phone>111-111-1111</phone>
   </Person>
   <Person>
      <name>Tom</name>
      <surname>Sawyer</surname>
      <age>57</age>
      <gender>M</gender>
      <phone>222-222-2222</phone>
   </Person>
   <Person>
      <name>Sue</name>
      <surname>Myers</surname>
      <age>18</age>
      <gender>F</gender>
      <phone>333-333-3333</phone>
   </Person>
</People>

here is my php of where I made the drop down:

<form method="get">

            <select name='person'>
                <?php
                $xml = simplexml_load_file('a.xml');
                echo "<option value=''>Select an option:</option>";
                foreach ($xml->Person as $person) {
                    echo "<option value='" . $person->name . "'>" . $person->name . "</option>";
                } ?>
            </select> <br>


        </form>

I need to achieve this functionality without a submit button and it should auto refresh the data when a different person is selected.

Upvotes: 1

Views: 941

Answers (1)

Andrea Olivato
Andrea Olivato

Reputation: 2545

Ajax is one way to solve this as suggested by Ken Lee but in this case it would mean that every time you change the select, you need to perform and ajax call, which is not performing and causes additional traffic to the server.

Instead, you can use data attributes to store all the info of the people xml directly in the <option> of your select and then simply read them with javascript.

1. Populate data attribute in the options

The first edit you need to make is to add all the info of each person in each option. You can either create one data attribute for each property (so you would have 5 properties: name, surname etc...) or you can store the whole object as a JSON. The latter is what I chose in the example below:

foreach ($xml->Person as $person) {
    echo '<option value="'.$person->name.'" data-info="'.htmlentities(json_encode($person)).'">'.$person->name.'</option>';
}

htmlentities is important not to break the HTML attributes quotes, and json_encode transforms the object into a JSON string that can then be parsed by the Javascript.

2. Read and parse the JSON when the select changes

Start an onchange event to listen for changes to the select. When you have an option selected that is not the default one, then you can parse the JSON from the data attribute.

document.getElementsByName("person")[0].onchange = function(){
    if(this.value) {
        var info = JSON.parse(this.options[this.selectedIndex].dataset.info)
        console.log(info)
    }
}

If you run this, the code will show in your JS console the person information you had previously stored.

this.options[this.selectedIndex] contains the option that you currently selected

dataset.info is the way to access the JSON string from the data attribute we set at the previous step

JSON.parse( reconverts the string into an object that you can use

3. Populate the results

Instead of the console.log you can now use the var info to populate the information on the page as per your example.

document.getElementById("fname").innerText = info.name

And repeat for all the attributes. Of course you need to prepare the HTML before for cleanliness of code, so for example

<strong>Fname=</strong> <span id="fname"></span><br />

4. Full Working Code

<form method="get">

    <select name='person'>
        <?php
        $xml = simplexml_load_file('a.xml');
        echo "<option value=''>Select an option:</option>";
        foreach ($xml->Person as $person) {
            echo '<option value="'.$person->name.'" data-info="'.htmlentities(json_encode($person)).'">'.$person->name.'</option>';
        } ?>
    </select> <br>

    <div id="personinfo" style="display: none;">
        <strong>Fname=</strong> <span id="fname"></span><br />
        <strong>Sname=</strong> <span id="sname"></span><br />
        <strong>Age=</strong> <span id="age"></span><br />
        <strong>Gender=</strong> <span id="gender"></span><br />
        <strong>Phone=</strong> <span id="phone"></span>
    </div>

    <script>
        document.getElementsByName("person")[0].onchange = function(){
            if(this.value) {
                var info = JSON.parse(this.options[this.selectedIndex].dataset.info)
                document.getElementById("fname").innerText = info.name
                document.getElementById("sname").innerText = info.surname
                document.getElementById("age").innerText = info.age
                document.getElementById("gender").innerText = info.gender
                document.getElementById("phone").innerText = info.phone
                document.getElementById("personinfo").style.display = "block"
            } else {
                document.getElementById("personinfo").style.display = "none"
            }
        };
    </script>

</form>

Upvotes: 2

Related Questions