如何将表单的两个字段合并为一个？

Question

我尝试将用户名和密码编码成 base64 后将其加入一个字段。我的问题出现在创建隐藏类型输入时，当我发送表单时，它只发送用户名和密码（均已编码）但不会加入它们。以下代码是我遇到问题的地方，我认为问题出在表单下面的脚本中。

//玉档

extends ./layout.jade 
block contenido
    div(class="d-flex justify-content-center center-block big-top-space")
        form(class="col-md-6" action="/user/login" method="POST" id="formData" name="myform")
            div(class="form-group")
                label(for="username") Usuario
                input(type="text" name="username" placeholder="Usuario" id="username" class="form-control")
            div(class="form-group")
                label(for="password") Contraseña
                input(type="password" name="password" placeholder="Contraseña" id="password" class="form-control")

            div(class="row top-space")
                div(class="col-xs-12 col-sm-6")
                    input(type="submit" value="Iniciar sesión" class="btn btn-info" onclick="toBase64()")
                div
                    input(type="hidden" id="joint")
                div(class="col-xs-12 col-sm-6 text-right")
                    a(href="/signup") No tengo cuenta

        script.
            function toBase64(){

                var username = btoa(document.getElementById("username").value);
                var password = btoa(document.getElementById("password").value);

                document.getElementById("joint").value = username+":"+password;


            }

Answer 1

你可以尝试使用 toString() 然后加入

Answer 2

所以我解决了我的问题。我唯一做的就是在创建隐藏的输入类型时添加名称字段，因为如果您不为该输入输入名称，它就不会在表单中发送。下面的代码是我的最终代码：


extends ./layout.jade 
block contenido
    div(class="d-flex justify-content-center center-block big-top-space")
        form(class="col-md-6" action="/user/login" method="POST" id="formData" name="myform")
            div(class="form-group")
                label(for="username") Usuario
                input(type="text" placeholder="Usuario" id="username" class="form-control")
            div(class="form-group")
                label(for="password") Contraseña
                input(type="password" placeholder="Contraseña" id="password" class="form-control") 
                input(type="hidden" name="authHeader" id="authHeader" class="form-control")    
            div(class="row top-space")
                div(class="col-xs-12 col-sm-6")
                    input(type="submit" value="Iniciar sesión" class="btn btn-info" onclick="toBase64()")
                div(class="col-xs-12 col-sm-6 text-right")
                    a(href="/signup") No tengo cuenta

    script.
        function toBase64(){

                  document.getElementById('authHeader').value = "Authorization: Basic "+btoa(document.getElementById('username').value+":"+document.getElementById('password').value);


            }

我在这里找到了信息：https://www.w3.org/TR/html401/interact/forms.html#h-17.2

如何将表单的两个字段合并为一个？

How can I join two fields of a form into one?

html

javascript

pug