Take an input value without Submit

Question

I need to keep the value one input radio to concatenate into a href later, but before making the Submit.

My form code:

 <form action="recuperarsenha.php" method="POST" onsubmit="displayWaitMessage()">
       <div class="form-group">
            <label for="labelemail">Email</label>
            <input name="email" class="form-control" placeholder="example@example" autofocus required >
       </div>
       <div class="form-group">
       <center>
            <input name="tipo" value="candidato" type="radio" checked> Candidato
            <input name="tipo" value="professor" type="radio"> Professor
            <input name="tipo" value="secretario" type="radio"> Secretaria
       </center>
       </div>
       <center>
            <a class="btn btn-danger" href='../candidato/index.php'>Voltar</a>
            <input class="btn btn-primary" type="submit" value="Enviar">
       </center>
       </form>

My Java:

<script type="text/javascript"> 
        var x = document.getElementsByName("tipo");
        if(x == 'candidato'){
             var endereco = '../candidato/index.php';
        }else if(x == 'secretario'){
             var endereco = '../secretaria/index.php';
        }else if(x == 'professor'){
             var endereco = '../professor/index.php';
 </script>

How do I get this var endereco and put in the <a class="btn btn-danger" href='../candidato/index.php'>Voltar</a>

Answer 1

You can capture the address value every time the radio changes and already change the value of href using jquery’s 'attr'.

$('input[name=tipo]').change(function(){
      var endereco = "../"+$('input[name=tipo]:checked').val()+"/index.php";
      $('#link').attr("href",endereco);
    });

Here you can see some of the change event (triggers whenever a change occurs): https://api.jquery.com/change/

and here you can see a little bit about the attr of jquery, used to make changes of attributes, it takes as first argument the attribute to be changed, and second the new value of the attribute: http://api.jquery.com/attr/

Answer 2

With a Jquery would be much easier, but with seems not to be using will an alternative solution.

The bid is able to identify which radio is selected checked

var tipos = document.getElementsByName("tipo")
var endereco = ''

tipos.forEach(function(tipo){
  if(tipo.checked){
  
    if(tipo.value=='candidato'){
      endereco = '../candidato/index.php';
    }else if(tipo.value=='secretario'){
      endereco = '../secretaria/index.php';
    }else if(tipo.value=='professor'){
      endereco = '../professor/index.php';
    }
  }
});


document.getElementById('link').href = endereco

console.log(document.getElementById('link').href)

<form action="recuperarsenha.php" method="POST" onsubmit="displayWaitMessage()">
       <div class="form-group">
            <label for="labelemail">Email</label>
            <input name="email" class="form-control" placeholder="example@example" autofocus required >
       </div>
       <div class="form-group">
       <center>
            <input name="tipo" id="candidato" value="candidato" type="radio" checked> Candidato
            <input name="tipo" id="professor" value="professor" type="radio"> Professor
            <input name="tipo" id="secretario" value="secretario" type="radio"> Secretaria
       </center>
       </div>
       <center>
       <div class="g-recaptcha"  style="padding-bottom: 10px; " data-sitekey="6LddhRIUAAAAAH6tQ5Sqbco_LF7zWoN3ZXPdODQV"></div>
       <a class="btn btn-danger" id="link" href='../candidato/index.php'>Voltar</a>
       <input type="submit" value="Enviar" class="btn btn-primary">
       </center>
       </form>

There are several other ways to do this, I left so to be as close to the code as you already have.

Answer 3

You can get the same result as you would with jQuery:

const anchor = document.querySelector('a')

for(const item of document.querySelectorAll('input[name=tipo]')){
  item.addEventListener('change', () => {
    if(item.checked)
      anchor.setAttribute('href', `../${item.value}/index.php`)
  })
}

<div class="form-group">
  <center>
    <input name="tipo" value="candidato" type="radio" checked> Candidato
    <input name="tipo" value="professor" type="radio"> Professor
    <input name="tipo" value="secretario" type="radio"> Secretaria
  </center>
</div>

<a href='../candidato/index.php'>Voltar</a>