Question

我在html中有一个隐藏的字段值。用户只能看到用户名/密码并设置这些值，但是当用户设置用户名值时，如何更改隐藏字段中的值？

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

假设用户在登录页面中输入user1 / pass1中的用户名/密码。我有下面隐藏的字段。我希望此字段以name = user1的形式提交。如果用户设置了user2 / pass2，我希望将下面的这个字段作为name = user2提交。我该怎么做？

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

而不是替换整个用户名，它必须是这样的。如果用户设置堆栈，则必须是＆＃39; name =＆＃39; stack＆＃39;

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

下面

<html>
    <head>
        <title>Please Log In</title>
        <link rel="stylesheet" href="static/style.css">
            <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    </head>

    <body>
        <form action="http" method="POST" form id="form1">


            <div class="login">
                <div class="login-screen">
                    <div class="app-title">
                        <h1> Login</h1>
                    </div>
                    <input class="form-control" type="text" 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" id="hiddenUsername">
                                <p><input type="submit" value="Log In" /></p>
        </form>



        <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. ");
                                                            window.setTimeout(function(){window.location.href = "http/"},5000);},
                                                            error: function(data, status, xhr) {
                                                            $('form').trigger("reset");
                                                            alert("Failed to login.");
                                                            }
                                                            });

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

$('#username').keyup(function() {
    $('#hiddenUsername').val("name%3d" + $('#username').val());
});
                              });

            </script>

    </body>
</html>

Answer 1

以下是使用纯JavaScript的示例：

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

<script type="text/javascript">
    var username = document.getElementById("username");
    var hidden = document.getElementById("hiddenUsername");
    username.addEventListener("keyup", function () {
        hidden.value = "name%3d" + username.value;
    });
</script>

如果您已在其他地方使用jQuery并想使用它，那么这里是jQuery版本（尽管纯JavaScript版本会更高效）：

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

<script type="text/javascript">
    $('#username').keyup(function() {
        $('#hiddenUsername').val("name%3d" + $('#username').val());
    });
</script>

请注意我在您的第一个和第三个id代码中添加了input属性。 id属性允许JavaScript识别DOM（或Document Object Model）的唯一元素，以便我们可以与它进行交互。

此代码将keyup事件侦听器绑定到用户名字段。这将有效地镜像用户名字段和隐藏的用户名字段，并在每次在用户名输入字段内释放密钥时更新。

从隐藏字段

1 个答案: