如何使用ajax调用更新多个表单元素

How to update multiple form elements with ajax call

本文关键字：表单 元素 更新 何使用 ajax 调用      更新时间：2023-09-26

我需要在ajax通过jQuery成功调用后更新表单div。我的页面上有一些表单元素。我想用ajax调用发回的值填充它。json格式。

而#inst_name是一个输入[type=text]，其中做两件事。

    通过jquery自动完成输入。作为脚本中mysql查询的名称参考。
HTML: 

<input type="text" name="inst_name" id="inst_name" />

<form method="post" action="">
<textarea name="inst_addr" id="inst_addr"></textarea>
<select name="inst_prov" id="inst_prov">
<option value="1">Bangkok</option>
<option value="2">Chiang Mai</option>
<option value="3">Samui</option>
<option value="4">Phuket</option>
</select>

<input type="text" name="inst_tel" id="inst_tel" />
<input type="text" name="inst_fax" id="inst_fax" />

<label><input type="radio" name="inst_dep" id="inst_dep1" value="1" />Dep 1</label>
<label><input type="radio" name="inst_dep" id="inst_dep2" value="2" />Dep 2</label>
<label><input type="radio" name="inst_dep" id="inst_dep3" value="3" />Dep 3</label>
</form>
jQuery: 

$('#inst_name').keyDown(function(){
    $.ajax({
        url: 'inc/form_institute.json.php',
        dataType:'json',
        data: {name:$('#inst_name').val()},
        success: function(data){
            $('#inst_addr').html(data.addr);
            $('#inst_prov').val(data.prov);
            $('#inst_zip').val(data.zip);
            $('#inst_tel').val(data.tel);
            $('#inst_fax').val(data.fax);
            $('#inst_dep').val(data.dep);
        }
    });
});
JSON: 

{
"addr":"123/4 Kitty Ave.",
"prov":"80",
"zip":"12345",
"tel":"0753245675",
"fax":"075123456",
"dep":"2"
}

尝试使用:

$(document).on("keyup", "#inst_name", function(){
    //you're ajax here
}

这样你输入的越多，回复就会越具体。

祝你好运

相关文章：