具有多个输入字段的表单上的 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>&nbsp; $(document).ready(function() {&nbsp; &nbsp; &nbsp; &nbsp; $("#npassword").keyup(function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var npassword = $("#npassword").val();alert(npassword);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $.post("pwd_ajax.php",{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; password: npassword&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }, function(data,status) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $("#test").html(data);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; });</script>&nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <th class="text-right">New Password <span class="small">(optional)</span>: </th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td><input type="password" id="npassword" name="npassword" value="" size="30" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; &nbsp; </tr>