Change button link according to an option

Asked

Viewed 146 times

0

Guys good afternoon.

How to do a javascript function to get the input value and according to the input redirect to the link I want.

Turma 1 - Option 1
Turma 2 - Option 2

Link turma1 ex: google.com
Link turma2 ex: yahoo.com.br

I want my button to grab the link according to the choice option.

How do I do ?

<div class="escolha-turma">
  <input type="radio" class="radiu" id="turma1" value="google.com">
  <div class="col-md-5 box">
    <strong>Inicio</strong>
    <span>08/05/2018</span>
  </div>
  <div class="col-md-5 box">
    <strong>Termino</strong>
    <span>08/05/2018</span>
  </div>
</div>

<div class="escolha-turma">
  <input type="radio" class="radiu" id="turma2" value="yahoo.com.br">
  <div class="col-md-5 box">
    <strong>Inicio</strong>
    <span>08/05/2018</span>
  </div>
  <div class="col-md-5 box">
    <strong>Termino</strong>
    <span>08/05/2018</span>
  </div>
</div>

<a href="#">Pega o link do input radio escolhido</a>

javascript html

4 answers

1


Can use addEventListener for the radios.

But you have to put one name equal for each input radio, as made in the example below. Also put a class in the <a> so the code doesn’t catch another tag <a> page.

let radios = document.body.querySelectorAll(".radiu");
for(let x=0; x<radios.length; x++){
   radios[x].addEventListener("click", e => {
      document.querySelector(".link_a").href = "http://"+e.target.value;
   });
}
<div class="escolha-turma">
  <input name="radiu" type="radio" class="radiu" id="turma1" value="google.com">
  <div class="col-md-5 box">
    <strong>Inicio</strong>
    <span>08/05/2018</span>
  </div>
  <div class="col-md-5 box">
    <strong>Termino</strong>
    <span>08/05/2018</span>
  </div>
</div>

<div class="escolha-turma">
  <input name="radiu" type="radio" class="radiu" id="turma2" value="yahoo.com.br">
  <div class="col-md-5 box">
    <strong>Inicio</strong>
    <span>08/05/2018</span>
  </div>
  <div class="col-md-5 box">
    <strong>Termino</strong>
    <span>08/05/2018</span>
  </div>
</div>

<a class="link_a" href="#">Pega o link do input radio escolhido</a>

  • I tested here on the site worked, but I played on my file on the server and it didn’t work, have to call some library? thanks

  • No library required, it’s pure Javascript.

  • I’ll update the answer.

  • I put a class in <a>, maybe that’s the error. Take a look at the reply update.

  • Uncaught Typeerror: Cannot read Property 'querySelectorAll' of null. When you call the class '.radiu', you presented this error on the console

  • You have to put the code after the HTML.

  • Now it’s gone, thank you very much for your attention!

Show 2 more comments

1

Would that be your question?

I entered two examples in javascript and using the jQuery library.

function FunJavaScript()
{
  var selectValue = document.getElementById("select").value;
  document.getElementById("link").innerHTML = selectValue;
  document.getElementById("link").href = selectValue;
}

function FunJquery()
{
  var selectValue = $("#select").val();
  $("#link").html(selectValue);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select">
  <option value="http://www.google.com">Turma 1</option>
  <option value="http://www.yahoo.com.br">Turma 2</option>
</select>
<input type="button" value="Javascript" onclick="FunJavaScript()"></input>
<input type="button" value="jQuery" onclick="FunJquery()"></input><br/>
<a id="link" target="_blank"></a>

0

There is a solution, I used the value of select to store the link, but you can use other strategies, map a value and identify the link etc..

var select = document.querySelector('#linkOpt')
var link = document.querySelector('#link');

select.addEventListener('change', () => {
  let selected = select.item(select.selectedIndex);
  
  if(selected.value == '') {
    link.href = '#';
    link.innerHTML = '';
  } else {
    link.href = selected.value;
    link.innerHTML = selected.innerHTML;
  }
  
});
<select id='linkOpt'>
  <option value="">-- Selecione --</option>
  <option value="http://www.google.com">Google</option>
  <option value="http://www.facebook.com">Facebook</option>
</select>

<a id='link' target="_blank" href='#'></a>

0

function trocarPagina(){
   var f = document.forms['seguir'].turma || document.forms.seguir.turma
   var o = f.selectedIndex;
   console.log(o);
   if(o == "1"){
   window.location.href = window.location.href+"/turma1.html";
   }
   
   if(o == "2"){
   window.location.href = window.location.href+"/turma2.html";
   }
   
   if(o == "3"){
   window.location.href = window.location.href+"/turma3.html";
   }
   
}
<form name="seguir">
<select name="turma">
<option>Selecione...</option>
<option>Turma 1</option>
<option>Turma 2</option>
<option>Turma 3</option>
</select>
<input type="button" value="ACESSAR" onclick="trocarPagina()" />
</form>

Browser other questions tagged javascript html

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