具有多個輸入字段的表單上的 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>