Question

我正在尝试使用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;
}

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

Answer 1

由于您在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>

Answer 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");
        }
});

Answer 3

添加到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');
},

Answer 4

在表单中将代码更改为

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

希望它有所帮助。

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

4 个答案: