[英]How to update multiple form elements with ajax call
I need to update the form divs after an ajax was successfully called via jQuery. 在通过jQuery成功调用ajax之后,我需要更新div表单。 There're some form elements on my page.
我的页面上有一些表单元素。 And I'd like to fill it with the values sent back from ajax call.
我想用从ajax调用返回的值来填充它。 Which is in json format.
这是json格式。
While #inst_name is an input[type=text] in which doing 2 things. #inst_name是输入[type = text],其中有2件事。
HTML : 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 : 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 : JSON:
{
"addr":"123/4 Kitty Ave.",
"prov":"80",
"zip":"12345",
"tel":"0753245675",
"fax":"075123456",
"dep":"2"
}
Try using: 尝试使用:
$(document).on("keyup", "#inst_name", function(){
//you're ajax here
}
That way the more you type the more specific the response will be. 这样,您输入的内容越多,响应将越具体。
Good luck :) 祝好运 :)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.