CODEWITHSUNDEEP
phpjqueryajax
user3733831
user3733831

Reputation: 2926

Populating the '<input>' value based on the selected value of a dropdown list

I am trying to display an <input> value base on a selected value of a dropdown list using jquery ajax.

This is the markup for my form - 

<div class="form-group">
    <label for="" class="control-label">District</label>
    <div class="element">
        <select class="form-control" id="district">
            <?php echo $option; ?>
        </select>                               
    </div>
</div>  

<div class="form-group">
    <label for="" class="control-label">Province</label>
    <div class="element">
        <input type="text" class="form-control province" placeholder="Province" value="" disabled>
    </div>
</div>

Just I need to display province input's value When selecting a district from above dropdown.

This is my ajax code - 

$("#district").change(function(event) {
    var id = $("#district").val(); 
    //alert(data);

    /* Send the data using post and put the results in a div */
    $.ajax({
            url: "./includes/process_province.php",
            type: "post",
            data: id,
            success: function(){
                alert('Submitted successfully');
            },
            error:function(){
                alert("failure");
            }
    });

    // Prevent default posting of form
    event.preventDefault();
});

When I selecting a district from the dropdown its going to this alert alert('Submitted successfully');. But I am not sure how to display PHP processing value in my text field.

This is my PHP code from proccess_province.php

// Require the configuration file before any PHP code:
require('./configuration.inc.php');

// Need the database connection:
require('../'.MYDB);

if(isset($_POST['id'])) {

    $province_id = (int)$_POST['id'];

        // Select exsiting data for an user and display them in the form for modify 
    $prep_stmt = " SELECT province
                                 FROM province 
                                 WHERE province_id = ?";

    $stmt = $mysqli->prepare($prep_stmt);

    if ($stmt) {
        // Bind "$userId" to parameter.
        $stmt->bind_param('i', $province_id);  
        // Execute the prepared query.
        $stmt->execute();    
        $stmt->store_result();

        // get variables from result.
        $stmt->bind_result($province);
        // Fetch all the records:
        $stmt->fetch();

        $db_province     = filter_var($province, FILTER_SANITIZE_STRING);
        //echo $province;

    } else {
        echo 'Database error';
    }   

    echo $db_province;
}

Hope somebody may help me out. Thank you.

Upvotes: 2

Views: 1061

Answers (4)

jqheart
jqheart

Reputation: 767

In the the form change the code as,

<div class="form-group">
    <label for="" class="control-label">Province</label>
    <div class="element">
        <input type="text" id="province" class="form-control province" placeholder="Province" value="">
    </div>
</div>

In script section use, 

<script type="text/javascript">
$("#district").change(function(event) {
    var id = $("#district option:selected").val(); 

    /* Send the data using post and put the results in a div */
    $.ajax({
            url: "./includes/process_province.php",
            type: "post",
            data: {id : id},
            dataType: "json",
            success: function(){
                $('#province').val(data.province);
                alert('Submitted successfully');
            },
            error:function(){
                alert("failure");
            }
    });

    // Prevent default posting of form
    event.preventDefault();
});
</script>

In the proccess_province.php file, instead of

echo $db_province;

use,

echo json_encode(array('province' => $db_province));

Hope it helps.

Upvotes: 1

Aditya
Aditya

Reputation: 1261

Since you echo the value of the province in the ajax file, you need to set the value based on that response. Try this:

     $.ajax({
            url: "./includes/process_province.php",
            type: "post",
            data: id,
            success: function(data){
                $('#province').val(data);
                alert('Submitted successfully');
            },
            error:function(){
                alert("failure");
            }
    });

And your markup:

<div class="form-group">
    <label for="" class="control-label">Province</label>
    <div class="element">
        <input id="province" type="text" class="form-control province" placeholder="Province" value="">
    </div>
</div>

Upvotes: 3

Chirag Mongia
Chirag Mongia

Reputation: 555

If you want to set the value of input same as your select option value, you can change your success callback to this-

$.ajax({
        url: "./includes/process_province.php",
        type: "post",
        data: id,
        success: function(){
            $('.province').val(id);
        },
        error:function(){
            alert("failure");
        }
});

Or, if you are bothered about the ajax response and populate the value of input based on the ajax response, you can access the data being returned as follows-

$.ajax({
        url: "./includes/process_province.php",
        type: "post",
        data: id,
        success: function(data){
            // access data here and do something
        },
        error:function(){
            alert("failure");
        }
});

Upvotes: 2

Sougata Bose
Sougata Bose

Reputation: 31739

Add to php file - 

$db_province = filter_var($province, FILTER_SANITIZE_STRING);
echo json_encode($db_province);

at the end.

On the html page - 

<input type="text" id="province" class="form-control province" placeholder="Province" value="" readonly>

then set the response to the field value - 

success: function(response){
    $('#province').val(response)
    alert('Submitted successfully');
},

Upvotes: 1

Related Questions