我需要制作一个表单，当用户从下拉列表中选择一个选项时，该表单会自动填充其他字段。在这里做了很多搜索，做了这样的代码:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<form method="POST" action="form-ajax.php">
<label for="username">Username: </label>
<select name="username" id="username"><option value="user1">user1</option><option value="user2">user2</option><option value="user3">user3</option></select>
<button id="fetchFields">fetch</button>
<label for="posts">Posts: </label>
<input type="text" size="20" name="posts" id="posts">
<label for="joindate">Joindate: </label>
<input type="text" size="20" name="joindate" id="joindate">
<p><input type="submit" value="Submit" name="submitBtn"></p>
</form>
<script type="text/javascript">
$(document).ready(function() {
function myrequest(e) {
var name = $('#username').val();
$.ajax({
method: "POST",
url: "autofill.php",
dataType: 'json',
cache: false,
data: {
username: name
},
success: function( responseObject ) {
$('#posts').val( responseObject.posts );
$('#joindate').val(responseObject.joindate);
}
});
}
$('#fetchFields').click(function(e) {
e.preventDefault();
myrequest();
});
})
</script>
</body>
</html>
我还有autofill.php文件，它从 MySQL 数据库中选择数据并使用 json_encode 返回它。一切正常。
但是，当用户从下拉列表中选择一个项目时，我需要自动填充字段，因此他不需要单击 fetch按钮。所以我很自然地替换了<select name="username" id="username">至:
<select name="username" id="username" onchange="myrequest();">
但是，这不起作用。我还应该修改什么？
最佳答案
将函数 myRequest 移到文档之外。如果您想在其他地方访问它，请准备好
如果您在加载函数中附加事件处理程序，它仍然可用
$(function() {
function myrequest(e) {
var name = $('#username').val();
$.ajax({
method: "POST",
url: "autofill.php",
dataType: 'json',
cache: false,
data: {
username: name
},
success: function(responseObject) {
$('#posts').val(responseObject.posts);
$('#joindate').val(responseObject.joindate);
}
});
}
$('#fetchFields').click(function(e) {
e.preventDefault();
myrequest();
});
$('#username').on("change", myrequest);
})
关于javascript - 从 onclick 更改为 onchange 不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42650315/