CODEWITHSUNDEEP
phpjqueryajax
SR1092
SR1092

Reputation: 565

Populate a text box based on a dynamic drop down box

I am trying to populate a text box based on a dynamic dropbox that is populated from the database.

My Code is as Below :

index.php

<?php
    include "../conn.php";
?>
<html>
    <head>
    <title>Changing textbox value based on dropdown list using Ajax and PHP</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <script>
    function getXMLHTTP() { 
            var xmlhttp=false;  
            try{
                xmlhttp=new XMLHttpRequest();
            }
            catch(e)    {       
                try{            
                    xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
                }
                catch(e){
                    try{
                    xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
                    }
                    catch(e1){
                        xmlhttp=false;
                    }
                }
            }

            return xmlhttp;
        }



    function getCurrencyCode(strURL){       
        var req = getXMLHTTP();     
        if (req){
            //function to be called when state is changed
            req.onreadystatechange = function(){
                //when state is completed i.e 4
                if (req.readyState == 4) {          
                    // only if http status is "OK"
                    if (req.status == 200){                     
                        document.getElementById('cur_code').value=req.responseText;                     
                    } else {
                        alert("There was a problem while using XMLHTTP:\n" + req.statusText);
                    }
                }               
            }           
            req.open("GET", strURL, true);
            req.send(null);
        }           
    }
    </script>
    </head>

    <body style="font: 12px Verdana, Arial, Helvetica, sans-serif;">

    <form style="text-align:center" method="post" action="" name="form1">
    <p style="color:#000099 ">When you change the dropdown list, the respective currency code of the country will be displayed in the textbox which is fetched from PHP using Ajax. </p>
    <p>Department :                             <?PHP
                                    echo "<select name= 'Department' class='form-control selectpicker' onChange='getCurrencyCode('find_ccode.php?country='+this.value)' Required>";
                                    echo '<option value="">'.'--Please Select Department--'.'</option>';
                                    $sql = "SELECT ID,Name FROM Departments";
                                    $query = sqlsrv_query($conn,$sql);
                                    $query_display = sqlsrv_query($conn,$sql);
                                    while($row=sqlsrv_fetch_array($query_display,SQLSRV_FETCH_ASSOC)){
                                    echo "<option value='". $row['Name']."'>".$row['Name']. '</option>';
                                    }
                                    echo "</select>";
                                ?>
    ID :   <input type="text" name="cur_code" id="cur_code" ></p>
    </form>
    </body>
</html>

find_ccode.php

        <?php 

    $country=$_REQUEST['country'];
    include '../conn.php';

    $sql = "SELECT ID,Name FROM Departments Name='$country'";
            $fetched=sqlsrv_query($conn,$sql) ; 
        if( $fetched === false ) { die( print_r( sqlsrv_errors(), true ));}
            while($sno=sqlsrv_fetch_array($fetched,SQLSRV_FETCH_ASSOC))
            {
                echo $formno=$sno['ID'];
            }
    }

    ?>

What I have

enter image description here

What I want :

The ID number of that particular department that is selected in the drop down should display in the text box. I have also attached an extract of what I am trying to do

enter image description here

But it doesn't seem to work. Where do you think I have gone wrong? Appreciate any help :)

Upvotes: 3

Views: 1435

Answers (1)

guradio
guradio

Reputation: 15555

FIDDLE

$('#sel').change(function() {
    $('#qwe1').val($('#sel option:selected').val());

})

for dynamic value

FIDDLE

Use .change to select and get its value then put it to input box.

UPDATE

FIDDLE

var data = var data = [{
    "id": "342-432-423-000","name": "name1"
}, {
    "id": "342-432-423-001","name": "name2"
}, {
    "id": "342-432-423-002","name": "name3"
}, {
    "id": "342-432-423-003","name": "name4"
}, {
    "id": "342-432-423-004","name": "name5"
}, {
    "id": "342-432-423-005","name": "name6"
}, {
    "id": "342-432-423-006","name": "name7"
}, {
    "id": "342-432-423-007","name": "name8"
}]


for (var i = 0; i < data.length; i++) {
        $('#sel').append('<option id=' + data[i].id + ' data-id="' + data[i].id + '">' + data[i].name + '</option>');
    }

    $('#sel').change(function () {
        $('#qwe1').val($('#sel option:selected').data('id'));

    })

Assuming I have the data from php I set the department name as option name and I set the department id asdata-id. Then from select change event i will get the value of data-id and set it as value of the input.

Upvotes: 1

Related Questions