根据下拉列表的选定值填充“<input />”值

时间:2015-01-30 08:13:26

标签: php jquery ajax

我正在尝试使用jquery ajax在下拉列表的选定值上显示<input>值。

这是我表单的标记 -

<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>

我需要显示省输入的值从上面的下拉列表中选择一个区域。

这是我的ajax代码 -

$("#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();
});

当我从下拉列表中选择一个区域时,它将转到此警报alert('Submitted successfully');。但我不知道如何在我的文本字段中显示PHP处理值。

这是PHP

中的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;
}

希望有人可以帮助我。 谢谢。

4 个答案:

答案 0 :(得分:3)

由于您在ajax文件中回显了省的值,因此您需要根据该响应设置值。试试这个:

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

你的标记:

<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>

答案 1 :(得分:2)

如果要将输入值设置为与选择选项值相同,则可以将成功回调更改为 -

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

或者,如果您对ajax响应感到困扰并根据ajax响应填充输入值,则可以按如下方式访问返回的数据 -

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

答案 2 :(得分:1)

添加到php文件 -

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

最后。

在html页面上 -

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

然后将响应设置为字段值 -

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

答案 3 :(得分:1)

在表单中将代码更改为

<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>

在脚本部分使用中,

<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>

在proccess_province.php文件中,而不是

echo $db_province;

使用,

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

希望它有所帮助。