HTML5 concatenate checkbox with text name

Asked

Viewed 212 times

0

Good morning, you guys, I have done several researches on the subject and found nothing that refers to my environment. Come on, I have a Portal Captive in the company but I have two domains in the AD, the system of Captive Portal cannot differentiate from which domain each user is, it is necessary to log in to @dominio. As a solution I put in the site of authentication of the Portal a checkbox for the person to choose the domain, but I am not able to include the two information in the user, I would like it to be transparent the inclusion of the domain. For example, when the person chooses the domain, the domain itself HTML put the information in the login field, user@domain. Follows the HTML with the checkbox attempt:

<!DOCTYPE HTML>
<!--
    Eventually by HTML5 UP
    html5up.net | @ajlkn
    Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
    <head>
        <title>Bem vindo ao Portal Guest</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
        <!--[if lte IE 8]><script src="assets/js/ie/html5shiv.js"></script><![endif]-->
        <link rel="stylesheet" href="assets/css/main.css" />
        <!--[if lte IE 8]><link rel="stylesheet" href="assets/css/ie8.css" /><![endif]-->
        <!--[if lte IE 9]><link rel="stylesheet" href="assets/css/ie9.css" /><![endif]-->
    </head>
    <body>
        <!-- Header -->
            <header id="header">
                <h1>Bem Vindo</h1>
                <p>Para acesso a rede Wifi Guest, por favor fazer login<br /> </p>
                <font size="4">Selecione sua unidade</font><br/> </p>
            </header>

            <script type="text/javascript">
            var elementoPaises = document.getElementById('paises')
            var paisesElegidos = []

            function elegirPais(element){
            if (element.checked) {
                paisesElegidos.push(element.value)
            }else{
                paisesElegidos.splice( paisesElegidos.indexOf( element.value ), 1 )
            }
            elementoPaises.innerHTML = paisesElegidos.join(', ')
            }
            </script>

        <!-- Signup Form -->
    <form method="post" action="$PORTAL_ACTION$">
        <div>
                <input type="radio" id="contactChoice1"
                name="unidade" value="@dominioX">
                <label for="contactChoice1">Unid I, III ou IV</label>

                <input type="radio" id="contactChoice2"
                name="unidade" value="@dominioY">
                <label for="contactChoice2">Unid II</label>

                <input type="radio" id="contactChoice3"
                name="unidade" value="@dominioX">
                <label for="contactChoice3">Visitante</label>
            </div>

    </fieldset>
                <! -- <input type="hidden" name="pegardados" id="pegardados" value=""> -->
                <input style=width:320px name="auth_user" id="auth_user" type="text" placeholder="Usuario" required> <br>
                <input style=width:320px name="auth_pass" type="password" placeholder="Senha" required> <br>
                <!--<input name="auth_voucher" type="text"> -->
                <input name="redirurl" type="hidden" value="$PORTAL_REDIRURL$">
                <input name="zone" type="hidden" value="$PORTAL_ZONE$">
                <input name="accept" type="submit" value="Entrar" onclick="concatenar()">
            </form>


            <script src="assets/js/main.js"></script>

    </body>
</html>
html5 checkbox string-concatenation

  • You either put the "@dom" inside the input field, or you go by type: "<input> @gift" with the text outside the input (would be input with the text that will change on the right side for example)

  • I want the domain information to come from the checkbox, and transparently include in the user field.

  • Transparent? How so transparent??

  • The client (user) selects the domain in the checkbox and then puts the user and password, the selected domain is hidden to the client, and through the code he would do it cliente@dominioY

2 answers

0

I suggest using the example of BOL Mail. use a placeholder that changes with user selection. Requires less validation and the visual effect is similar to what you want.

I took a sample here: https://jsfiddle.net/joabeAlex/2fv578gm/

$(document).ready(function(){
	$('input[name=unidade]').change(function(){
    let dominio = $('input[name=unidade]:checked').val();
  	$("#dominioLabel").text(dominio);
  });
});
#dominioLabel{
  position: absolute;
  width: 130px;
  right: 0;
  color: #999;
}

form{
  position: relative;
  margin: 0 auto;
  border: 1px solid black;
  text-align: center;
  width: 340px;
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>


<form method="post" action="$PORTAL_ACTION$">
        <div>
                <input type="radio" id="contactChoice1"
                name="unidade" value="@dominioX">
                <label for="contactChoice1">Unid I, III ou IV</label>

                <input type="radio" id="contactChoice2"
                name="unidade" value="@dominioY">
                <label for="contactChoice2">Unid II</label>

                <input type="radio" id="contactChoice3"
                name="unidade" value="@dominioX">
                <label for="contactChoice3">Visitante</label>
            </div>

                <label id="dominioLabel"></label>
                <input style=width:320px name="auth_user" id="auth_user" type="text" placeholder="Usuario" required> <br>
                
                <input style=width:320px name="auth_pass" type="password" placeholder="Senha" required> <br>
                <!--<input name="auth_voucher" type="text"> -->
                <input name="redirurl" type="hidden" value="$PORTAL_REDIRURL$">
                <input name="zone" type="hidden" value="$PORTAL_ZONE$">
                <input name="accept" type="submit" value="Entrar" onclick="concatenar()">
            </form>

  • Joabe took the liberty of putting his direct code in the answer, because answer with link is just not indicated here on Stackoverflow

  • Thank you Hugo, I don’t know yet how you put directly here to perform :)

  • Give a read here that will help you: https://answall.com/editing-help

0

You can thus concatenate the value of the radio input chosen with the user name as follows with Javascript pure:

function concatenar(){
   var inputs = document.querySelectorAll('input[type=radio]:checked')[0];
   var usuario = document.getElementById('auth_user').value;
   
   var dominio = inputs.value;
   console.log(usuario+dominio);      
}
<div>
   <input type="radio" id="contactChoice1" name="unidade" value="@dominioX">
   <label for="contactChoice1">Unid I, III ou IV</label>

   <input type="radio" id="contactChoice2" name="unidade" value="@dominioY">
   <label for="contactChoice2">Unid II</label>

   <input type="radio" id="contactChoice3" name="unidade" value="@dominioZ">
   <label for="contactChoice3">Visitante</label>
</div>

   <input type="hidden" name="pegardados" id="pegardados" value="">
   <input style=width:320px name="auth_user" id="auth_user" type="text" placeholder="Usuario" required> <br>
   <input style=width:320px name="auth_pass" type="password" placeholder="Senha" required> <br>
                
   <input name="redirurl" type="hidden" value="$PORTAL_REDIRURL$">
   <input name="zone" type="hidden" value="$PORTAL_ZONE$">
   <input name="accept" type="submit" value="Entrar" onclick="concatenar()">

In the var inputs - I get the selected radio input.

In the var usuario - I take the entered value in the user field.

In the var dominium - I take the value of the selected input.

Then I just put the two values together.

  • Thank you so much for helping Andrade, but he is not including @dominio on login

  • Where would be this login I’m not seeing in the question code?

  • Just so you understand, in the system that controls Captive, it shows me the users who are logged in, with this code that Voce sent me, it is not including @dominioY, only going to the client account.

  • the two information should go together when click the enter button.

  • But this is simple to just create a variable with the two values the same way I did on the console.log. It would look like this: var pessoa = usuario+dominio.

  • Sorry to bother you Andrade, but it didn’t work, the user is entering the system only with his user without checkbox selection;

  • No problem Alan, man I made a code totally independent of your code presented in the question, so I don’t know how you’re using there. If the question was to concatenate the input value of the user with the value of the selected radio, I believe my answer made the expected result. I’d need to see your code.

  • Good morning Andrade, then, I used only your code in the capitve system, but then I log in by mobile and I will look at the controller, only my user is without @dominio, it should include the two data (alan@dominioY) Thanks

  • Alan like I said, I’d have to see your code, if you’re doing what I’m doing, then it’s supposed to work. See if the variables are with right names, the inputs and if you are concatenating the variables correctly like this: usuario+dominio.

Show 4 more comments

Browser other questions tagged html5 checkbox string-concatenation

You are not signed in. Login or sign up in order to post.