HTML表单发布调用隐藏字段

Question

我正在尝试为登录页面进行后期调用。用户手动输入用户名/密码。但是，我希望在用户输入他/她的用户名时将以下字段设置为 name=username。

我在下面有这些字段。我有一个隐藏字段，想用用户手动输入的用户名替换用户名位。

<input class="form-control" type="hidden" required name="username" placeholder="Username">
<input class="form-control" type="password" required name="password" placeholder="Password">

<input class="form-control" type="hidden" required name="arg" placeholder="name">

应该是这样的

username=stack
password=userset
arg='name=stack'

Answer 1

您可以尝试使用 jQuery。在这里，我有一个用户仍未提交表单的示例。

$(document).ready(function() {

    $("input[name='username']").keyup(function() {
         $("input[name='arg']").val("'name=" + $(this).val() + "'");
    });

});

如果你真的想得到 $_POST 值，你必须使用一些 php 序列化它们。

<script type="text/javascript">
    var $post = <?php echo json_encode($_POST); ?>;
</script>

然后您可以使用 $post["username"] 访问您的变量。但我不明白你为什么要使用这个解决方案，因为你可以使用普通的 php 来做到这一点。

在您的代码中应该如下所示：

<script type="text/javascript">

     $(document).ready(function() {
        $('form#form1').submit(function(){
            $.ajax({type: "Post",
                    url: $('form').attr('action'),
                    data: $(this).serialize(),
                    success: function(data, status, xhr) {
                        alert("Login successful. Please press OK to be redirected. Redirecting in 5 seconds.");
                        window.setTimeout(function(){window.location.href = "/login"},5000);},
                        error: function(data, status, xhr) {
                            $('form').trigger("reset");
                            alert("Failed to login. Please try again.");
                        }
                    });

                return false;
                alert("AJAX request successfully completed");
            });



          $("input[name='username']").keyup(function() {
              $("input[name='arg']").val("'name=" + $(this).val() + "'");
          });
     });

</script>

Answer 2

如果我正确理解您想要做什么，听起来您想要获取 input DOM 对象并在每次用户更改用户名文本输入框中的值时更改其占位符属性。

您可以使用getElementsByName('NAME')[0] 获取 DOM 元素（假设名称是唯一的，或者更好地使用 ID 代替以确保它们是唯一的）。

然后附加一个函数来监听变化并使用inputDomObject.addEventListener("change", functionToHandleChanges);交换placeholder的新值

您可以使用 placeholderDomObject.setAttribute("placeholder", "thingToSetItTo"); 在输入的 DOM 对象（因此在页面上）设置 placeholder 值

如果您需要任何澄清，请发表评论:)