Question

当用户从下拉列表中选择一个选项时，我需要创建一个自动填充其他字段的表单。在这里做了很多搜索，制作了这样的代码：

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

然而，这不起作用。我还应该修改什么？

Answer 1

如果您想在其他地方访问，请将函数myRequest移到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();
  });
  $('#username').on("change", myrequest);
})

从onclick更改为onchange不起作用

1 个答案: