JSFiddle - React, Tailwind, and code Playground

by joabeAlex

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.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>

CSS

#dominioLabel{
  position: absolute;
  width: 130px;
  right: 0;
  color: #999;
}

form{
  position: relative;
  margin: 0 auto;
  border: 1px solid black;
  text-align: center;
  width: 340px;
}

JavaScript

$(document).ready(function(){
	$('input[name=unidade]').change(function(){
    let dominio = $('input[name=unidade]:checked').val();
  	$("#dominioLabel").text(dominio);
  });
});