使用 PHP Ajax 完成的自动表单



我有两个文本框,即no_id和customer_name,当用户输入no_id时,customer_name会自动填充。

形式

<form>
<input type="text" name="no_id" onkeyup="autofill()" id="no_id">
<input type="text" name="customer_name" id="customer_name" readonly>
<!--textbox customer_name is readonly-->
</form>

爪哇语

<script type="text/javascript">
function autofill(){
var no_id = $("#no_id").val();
$.ajax({
url: 'ajax.php',
data:"no_id="+no_id ,
}).success(function (data) {
var json = data,
obj = JSON.parse(json);
$('#customer_name').val(obj.customer_name);
});
}
</script>

阿贾克斯.php

include 'conn.php';
$npwp = $_GET['no_id'];
$query = mysqli_query($conn, "select * from ms where no_id='$no_id'");
$ms = mysqli_fetch_array($query);
$data = array(
'customer_name'      =>  $ms['customer_name']);
echo json_encode($data);

上面的脚本对我有用。

现在我想修改它。 当输入的no_id存储在数据库中时,customer_name框属性变为readonly=false,因此用户可以填写customer_name框。

你可以在no_id输入上使用jquery onChange方法来发送no_id值并搜索它是否存储在数据库中,并返回true或false(0或1(,如以下代码:

$('#no_id')onchange(function(){
var no_id = $(this).val();
$.ajax({
url: 'ajax.php',
data:"no_id="+no_id ,
}).success(function (data) {
if(data == true){
$('#customer_name').attr('readonly');
}else if(data == false){
$('#customer_name').removeAttr('readonly');
}
});
});

我更喜欢为 onChange 方法创建另一个函数no_id

在这里我正在计算mysql中的rows,如果行== 0,则删除readonly属性

爪哇语

<script type="text/javascript">
function autofill(){
var no_id = $("#no_id").val();
$.ajax({
url: 'ajax.php',
data:"no_id="+no_id ,
success : function (data) {
var json = data;
obj = JSON.parse(json);
if(obj.success=='true') {
$('#customer_name').val(obj.customer_name).attr("readonly", true);
} else {
$('#customer_name').val("").attr("readonly", false);
}
}
})
}
</script>

阿贾克斯.php

include 'conn.php';
$npwp = $_GET['no_id'];
$query = mysqli_query($conn, "select * from ms where no_id='$npwp'");
if(mysqli_num_rows($query) >= 1 ) {
$ms = mysqli_fetch_array($query);
$data = array('customer_name' =>  $ms['customer_name'], 'success'=>'true');
echo json_encode($data); 
} else {
$data = array('success'=>'false');
echo json_encode($data);
}

最新更新