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

Question

I am trying to join a username and a password into one field once I have encoded them into base64. My problem comes when creating a hidden type input, when I send the form, it only sends username and password (both encoded) but it does not join them. The following code is where I have the problem, I think the problem is in the script below the form.

//Jade file

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;


            }

I would assume the form is submitting before the JS code is being run? Consider preventing the default action and then submitting the form after the hidden input value has been populated? — evolutionxbox, Mar 01 '21 at 16:37
I need this because it is a login form. The form is submitted before beacuse when I introduce credentials, the function does its job because the username and the password come encoded, my problem is that the hidden field (that contains both username and password decoded) used for coding ```username:password``` in base64, is not sent — Alvaro Garcia, Mar 01 '21 at 17:13
I've explained why I think that is. This may help https://stackoverflow.com/questions/3350247/how-to-prevent-form-from-being-submitted — evolutionxbox, Mar 01 '21 at 17:14

score 0 · Answer 1 · answered Mar 01 '21 at 16:43

0

Can you try using toString() and then join

answered Mar 01 '21 at 16:43

Gorakh Wagh

1
2

Sadly this won't help. `input.value` is already a string. – evolutionxbox Mar 01 '21 at 17:10
Yes I have tried that and don´t do anything – Alvaro Garcia Mar 01 '21 at 17:13

score 0 · Accepted Answer · answered Mar 03 '21 at 17:47

So i solved my problem. The only thing i did was adding name field when creating the input type hidden, because if you dont put a name to that input it isn`t sent in the form. The following code is my final code:


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


            }

I found the information here: https://www.w3.org/TR/html401/interact/forms.html#h-17.2

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

2 Answers2