Ajax / jquery в формах с несколькими полями ввода

Question

Я очень плохо знаком с ajax / jquery и пытаюсь сделать что-то очень простое: динамически отображать длину нового пароля пользователя по мере его ввода (в теге абзаца, который я назначил id "test").

С одной стороны у меня есть следующий скрипт и форма:

<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>