HTML5 concatenate checkbox with text name

Navigation
0

Good morning everyone, I've done a lot of research on the subject and I did not find anything referring to my environment. Come on, I have a Portal Captive in the company, but I have two domains in AD , the Captive Portal system can not differentiate which domain each user is from, so it is necessary to put @domain. As a solution, I placed a checkbox on the Portal's authentication website for the person to choose the domain, but I am not able to include the two information in the user, I would like the inclusion of the domain to be transparent. For example, when the person chooses the X domain, the HTML himself places the information in the login field, user @ domainX. Follow HTML with 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>
    
asked by anonymous 31.08.2018 / 13:49

2 answers

0

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

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 var inputs - I get the selected radio input.

     

In var user - I get the value typed in the user field.

     

In var domain - I get the value of the selected input.

     

Then only the two values together.

    
31.08.2018 / 16:02
0

I suggest using the example BOL Mail . use a placeholder that changes according to the user's selection. It requires less validation and the visual effect is similar to what you want.

I've done a sample here: link 

$(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><formmethod="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>
    
31.08.2018 / 15:38
Setting up and navigating homescreen for iphone with views made in ASP.NET MVC Html5 Canvas - Positioning elements (scale)