Javascript 从用户设置的隐藏字段值中获取字段值_Javascript_Html_Ajax_Post

Javascript 从用户设置的隐藏字段值中获取字段值

javascript html ajax post

Javascript 从用户设置的隐藏字段值中获取字段值,javascript,html,ajax,post,Javascript,Html,Ajax,Post,我在html中有一个隐藏字段值。用户只能查看用户名/密码并设置这些值，但当用户设置用户名值时，如何更改隐藏字段中的值 <input class="form-control" type="text" required name="username" placeholder="Username"> <input class="form-control" type="password" required name="password" placeholder="Password"&

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

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

下面


请登录
登录

$（文档）.ready（函数（）{
$（'form#form1'）。提交（函数（）{
$.ajax（{type:“Post”，
url:$（'form'）.attr（'action'），
数据：$（this）.serialize（），
成功：功能（数据、状态、xhr）{
警报（“登录成功”）；
setTimeout（function（）{window.location.href=“http/”}，5000）；}，
错误：函数（数据、状态、xhr）{
$（'form'）。触发器（“重置”）；
警报（“登录失败”）；
}
});
返回false；
警报（“AJAX请求已成功完成”）；
});
$（'#username'）.keyup（函数（）{
$（'hiddenUsername'）.val（“名称%3d”+$（'hiddenUsername'）.val（））；
});
});

下面是一个使用纯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>


var username=document.getElementById（“用户名”）；
var hidden=document.getElementById（“hiddenUsername”）；
username.addEventListener（“keyup”，函数（）{
hidden.value=“name%3d”+username.value；
});

如果您已经在其他地方使用并希望使用它，那么以下是jQuery版本（尽管纯JavaScript版本会更高效）：


$（'#username'）.keyup（函数（）{
$（'hiddenUsername'）.val（“名称%3d”+$（'hiddenUsername'）.val（））；
});

请注意，我在第一个和第三个

input

标记中添加了

id

属性。

id

属性允许JavaScript识别DOM（or）的唯一元素，以便我们可以与之交互

此代码将

keyup

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

谢谢。我编辑了这篇文章以反映我的需要。它必须是这样的，而不是替换整个用户名。您是否可以在jquery中修改它？如果用户设置堆栈，那么它必须是'name='stack'用户名=堆栈密码=userset arg='name=stack'@user17651，我理解。我已经编辑了我的答案。如果你是这个意思，请告诉我。谢谢。然而，它似乎不起作用。你能看到我的代码并可能添加缺少的内容吗？我正在试着打一个电话，它需要这样的东西。username=stack password=userset arg='name=stack'我想问题可能是

没有被编码，导致浏览器混乱。我已经通过URL编码

符号纠正了这个问题。请让我知道这是否有效。如果没有，请提供一些输出来帮助我调试它。您可以查看我的代码来调试可能出现的错误吗？它似乎不起作用。所以，若它是一个文本字段，并且用户必须输入它，那个么他将输入“name=stack”。

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>

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

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