CODEWITHSUNDEEP
javascriptphpjquery
mpdc
mpdc

Reputation: 3570

Update text input on select option change (where both are initially populated from a database)

A dropdown select box is populated from a database and the selected option is matched against a variable $comp_cntry currently on the page:

<select name="country">
    <option value="--" disabled>Please Select...</option>
    <option value="--" disabled>- - - - -</option>
    <?php
    // Populate Country Dropdown
    $country_query = mysql_query("SELECT country_name FROM ukipdata.ukip_countries
        ORDER BY country_name ASC");
    while ($cq = mysql_fetch_assoc($country_query)) {
        $country = $cq['country_name'];
        // Select Current Country
        if ($country == $comp_cntry) {
            ?>
            <option value"<?=$country?>" selected><?=$country?></option>
            <?php
        }
        else {
            ?>
            <option value"<?=$country?>"><?=$country?></option>
            <?php
        }
    }
    ?>
</select>

Then later on a telephone prefix (dialling code) box is populated from the same database, matching the dialling code to the country:

<?php
// Get Dialling Codes
$telephone_query = mysql_query("SELECT country_name, dialling_code FROM ukipdata.ukip_countries
    ORDER BY country_name ASC");
while ($tq = mysql_fetch_assoc($telephone_query)) {
    $country = $tq['country_name'];
    // Show Prefix
    if ($country == $comp_cntry) {
        $prefix = $tq['dialling_code'];
    }
}
?>
<input type="text" name="telephone_prefix" value="+<?=$prefix?>" readonly>

How, using JavaScript, can I get the telephone prefix to automatically change on page when a new option is chosen from the country dropdown? I have no real knowledge of JavaScript at all, unfortunately, but assume I would need to somehow convert my PHP associated array in to JSON so that I can use it?

I know I haven't provided any JavaScript code to show that I've made a start on this part of the problem, but if someone could point me in the right direction that would be swell.

Disclaimer: please ignore my terrible use of the mysql_ extension

Upvotes: 0

Views: 1740

Answers (4)

Mike Brant
Mike Brant

Reputation: 71424

My suggestion would be to saving a javascript object which maps countries to phone codes, so when your country select has a change, you can trigger a change to the telephone prefix via javascript.

So let's assume you have a map (associative array) in javascript that is something like this:

$country_to_phone_prefix_map = array(
    'country name A' => 'phone prefix A',
    'country name B' => 'phone prefix B',
    ...
);

This could be built in your query while loop:

$country_to_phone_prefix_map = array();
while ($tq = mysql_fetch_assoc($telephone_query)) {
    $country_to_phone_prefix_map[$tq['country_name']] = $tq['dialing_code'];
}

Then when rendering the page, inject this map into javascript

<script type="text/javascript">
var countryToPhonePrefixMap = <?php echo json_encode($country_to_phone_prefix_map); ?>;
</script>

Now, you build a change event listener on the country dropdown to change the value:

$('select[name="country"]').change(function() {
    // get phone prefix from map
    var selectedCountry = $(this).val();
    var phonePrefix = countryToPhonePrefixMap[selectedCountry];
    // change value of telephone prefix input
    $('input[name="telephone_prefix"]').val(phonePrefix);
}

Upvotes: 0

Wilmer
Wilmer

Reputation: 2511

Simply pass the prefix as an attribute of the select options:

<select id="country-select" name="country">
    <option value="--" disabled>Please Select...</option>
    <option value="--" disabled>- - - - -</option>
    <?php
    // Populate Country Dropdown
    $country_query = mysql_query("SELECT country_name, dialling_code FROM ukipdata.ukip_countries
        ORDER BY country_name ASC");
    while ($cq = mysql_fetch_assoc($country_query)) {
        $country = $cq['country_name'];
        $prefix = $tq['dialling_code'];
        // Select Current Country
        if ($country == $comp_cntry) {
            ?>
            <option value"<?=$country?>" prefix="<?=$prefix?>" selected><?=$country?></option>
            <?php
        }
        else {
            ?>
            <option value"<?=$country?>"><?=$country?></option>
            <?php
        }
    }
    ?>
</select>

<input id="prefix-input" type="text" name="telephone_prefix" value="" readonly>

JAVASCRIPT

Then add a change handler to your select to get the prefix attribute of the selected option and set the text input:

$(function(){
    $("#country-select").change(function(){
        var prefix = $(this).find("option:selected").attr("prefix");
        $("#prefix-input").val(prefix);
    });
});

Upvotes: 1

Nicolas Zimmer
Nicolas Zimmer

Reputation: 424

I would add a data attribute (here it might be called data-prefix) to the element, like

<option value='country' data-prefix='+44'/>

and get this when the onChange event is fired for the select. In jQuery you could do something like

$('[name="country"]').change(function(){
    $('[name="telephone_prefix"]').val($(this).find(':selected').data('prefix'));
});

which would update the value accordingly.

Upvotes: 2

ndee
ndee

Reputation: 59

I would say the best way of doing this would be joining the two PHP codes like this:

<select name="country">
    <option value="--" disabled>Please Select...</option>
    <option value="--" disabled>- - - - -</option>
    <?php
    // Populate Country Dropdown
    $country_query = mysql_query("SELECT country_name, dialling_code FROM ukipdata.ukip_countries ORDER BY country_name ASC");
    while ($cq = mysql_fetch_assoc($country_query)) {
        $country = $cq['country_name'];
        $prefix = $cq['dialling_code'];

        // Select Current Country
        echo "<option data-prefix='{$prefix}' value='{$country}' ";
        if($country == $comp_cntry) echo "selected";
        echo ">{$country}</option>";
    }
    ?>
</select>

<input type="text" name="telephone_prefix" value="" readonly>

And this would return a list of the countries in a dropdown each with a data-prefix attribute of the appropriate prefix that they have.

We would then need to trigger jQuery on change and update the value, and this would look something like:

$("select[name=country]").on('change', function() {
    var prefix = $("option:selected", this).attr('data-prefix');
    $("input[name=telephone_prefix]").attr('value', prefix);
})

And this would have the following effect: http://jsfiddle.net/Tm75y/1/

I hope that's what you need.

Upvotes: 1

Related Questions