具有多个输入字段的表单上的 Ajax/jquery

Question

我对 ajax/jquery 很陌生，并且正在尝试做一些非常简单的事情：在用户输入密码时动态回显用户新密码的长度（在段落标签中，我分配了一个“测试”的 id ）。一方面，我有以下脚本和表单：<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script><script>  $(document).ready(function() {        $("input").keyup(function() {            var npassword = $("input").val();            $.post("pwd_ajax.php",{                password: npassword             }, function(data,status) {                $("#test").html(data);            });         });  });</script>    <p id = "test"></p>    <form action="" method="post">        <table class="layout-tables">            <tr>                <th class="text-right">Current Password <span class="small">(needed)</span>: </th>                <td><input type="password" name="cpassword" value="" size="30" /></td>            </tr>            <tr>                <th class="text-right">New Password <span class="small">(optional)</span>: </th>                <td><input type="password" name="npassword" value="" size="30" />                </td>            </tr>            <tr>                <th class="text-right">New Password Again: </th>                <td><input type="password" name="napassword" value="" size="30" /></td>            </tr>这是来自我的外部文件 pwd_ajax.php<?php$new_pwd = $_POST['password'];echo strlen($new_pwd);?>但是，我始终将“0”作为输出。我哪里出错了？任何帮助将不胜感激，谢谢！

Answer 1

声明 id 属性 (id="npassword" )

<script>

  $(document).ready(function() {

        $("#npassword").keyup(function() {

            var npassword = $("#npassword").val();

alert(npassword);

            $.post("pwd_ajax.php",{

                password: npassword 

            }, function(data,status) {

                $("#test").html(data);

            }); 

        });

  });

</script>

  <tr>

            <th class="text-right">New Password <span class="small">(optional)</span>: </th>

            <td><input type="password" id="npassword" name="npassword" value="" size="30" />

            </td>

        </tr>