Change button link according to option

Question

Change button link according to option

Navigation

#1 by (1 votes)
#2 by (1 votes)
#3 by (0 votes)
#4 by (0 votes)

0

Have a good afternoon.

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

Turma 1 - Option 1
Turma 2 - Option 2

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

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

How do I do it?

<div class="escolha-turma">
  <input type="radio" class="radiu" id="turma1" value="google.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>

<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

asked by anonymous 27.02.2018 / 15:46

4 answers

1

Would that be your question?

I inserted 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><selectid="select">
  <option value="http://www.google.com.br">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>

27.02.2018 / 16:02

0

There is a solution, I used value do 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>

27.02.2018 / 15:56

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>

27.02.2018 / 15:58

Discover network hosts Mask for CPF or CNPJ without using plugins

score 1 · Accepted Answer

You can use addEventListener for radios .

But you need to set% equal% to every name , as I did in the example below. Also put a class in input radio so that the code does not catch another <a> tag of the 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.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>

<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>