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

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

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

然后附加一个函数以侦听更改，并使用inputDomObject.addEventListener("change", functionToHandleChanges);交换placeholder的新值inputDomObject.addEventListener("change", functionToHandleChanges);

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

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

Answer 2

您可以尝试使用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>