Lydia
Lydia

Reputation: 2117

populate text boxes depend on drop-down selection in php

I research in google and stack overflow for this answer there are lot of answer but i cannot able to get what i want.

I have two drop down menus and three text boxes.

PHP Code :

    <select onchange="FirstDropDownClick()"> </select>

script code :

            <script type="text/javascript">
           function FirstDropDownClick() {

var selectDwn = document.getElementById("ID_dwn");
var selectedValue = selectDwn.options[selectBox.selectedIndex].value;

                 }

In "FirstDropDownClick()" i want the codes for the following :

1.select data from database according to the selected value.

2.Fill the text boxes with that.

3.Fill second drop down according to value of first drop-down menu.

I need an example codes. Because am stuck , dont know how to do .

Thanks in Advance.

Upvotes: 2

Views: 5607

Answers (3)

Navneet Garg
Navneet Garg

Reputation: 1374

If you want to do it with ajax and php HTML

<select name="select_number" id="select_number">
    <option value="1">Number1</option>
    <option value="2">Number2</option>
    <option value="3">Number3</option>
</select>
<input type="text" name="number_value" id="number_value">

JQuery

$(document).ready(function(){
    $('#select_number').change(function(){
        var number_value = $(this).val();
        $.ajax({
            method: 'POST',
            url: "test.php",
            data: {
                'number_value' : number_value
            },
            dataType:'json',
            success: callback = function(data, textStatus, xhr)
            {
                $('#number_value').val(data.number_value);
            }
        });

    });
});

php (test.php)

<?php
echo json_encode($_POST);
?>

Upvotes: 1

Navneet Garg
Navneet Garg

Reputation: 1374

why you need php for that you can do it only with jquery or javascript

HTML

<select name="select_number" id="select_number">
    <option value="1">Number1</option>
    <option value="2">Number2</option>
    <option value="3">Number3</option>
</select>
<input type="text" name="number_value" id="number_value">

Jquery

$(document).ready(function(){
    $('#select_number').change(function(){
      var number_value = $(this).val();
      $('#number_value').val(number_value);
    });
});

Upvotes: 0

Vishal Wadhawan
Vishal Wadhawan

Reputation: 1085

your html code

    <select name="reg_number" id="reg_number">
       <option value="1">Reg1</option>
       <option value="2">Reg2</option>
       <option value="3">Reg3</option>
    </select>
    <input type="text" name="first_name" id="first_name">

your jquery(make sure you include jquery file)

 $(document).ready(function(){
   $('#reg_number').change(function(){
   var reg_number = $(this).val();
   var data_String;
    data_String = 'reg_number='+reg_number;
    $.post('ajax_file.php',data_String,function(data){
          var data= jQuery.parseJSON(data);
           $('#first_name').val(data.first_name)
       });
   });
 });

your php code (ajax_file.php)

 <?php
       $reg_number =$_POST['reg_number']; 
       //run your query here to fetch the result and store it in a variable $data
     echo json_encode($data);
     exit();`

 ?>

Upvotes: 1

Related Questions