HTML5 concatenate checkbox with name text
Good Morning folks,
I've done a lot of research on the subject and found nothing that related to my environment. Come on, I have a Portal Captive
in the company but I have two domains in AD
, the system Captive Portal
can not differentiate which domain is each user, being necessary to put login @domain. As a solution I put in the Portal authentication site 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 the inclusion of the domain to be transparent. For example, when the person chooses dominioX, the same HTML
put the information in the login field, user@dominioX.
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>
2 answers
Can thus concatenate the value of the chosen radio input with the user name as follows with pure 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()">
Na var inputs - I pick up the selected radio input.
Na var user - I get the value typed in the user field.
In var domain - I get the value of the selected input.
Then only together the two values.
I suggest using the example of Bol Mail. use a placeholder that changes according to user selection. It requires less validation and the visual effect is similar to what you want.
I made 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>