How to hold an event about a radio button value inside a modal?

Asked

Viewed 151 times

1

I own a modal with a radio button with two options, "Yes and "No". If the answer is "No" then I send an alert on the screen with a message "Sorry, this link is not for you", if the answer is "Yes" I continue redirecting to the desired link. In case I have no idea how to start my Script.

.btn-secondary{
    background-color:#4DCC5B !important;
    color:white !important;
    border-color:#4DCC5B !important;
    border-radius: 25px !important;
}
.btn-secondary:hover{
    background-color:white !important;
    color:#4DCC5B !important;
    border-color:#4DCC5B !important;
    border-radius: 25px !important;
}
.btn-primary {
    background-color:#35c1ba !important;
    color:white !important;
    border-color:#35c1ba !important;
    border-radius: 25px !important;
}
.btn-primary:hover {
    background-color:white !important;
    color:#35c1ba !important;
    border-color:#35c1ba !important;
    border-radius: 25px !important;
}
<!doctype html>
<html lang="pt-br">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

  <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">

  <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">

  <link href="css/styles.css?v=0.0.8" rel="stylesheet">

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

  <link href="https://fonts.googleapis.com/css?family=Raleway&display=swap" rel="stylesheet">

  <title>Exercicio</title>
</head>

<body>
  <!-- Modal -->
  <div class="modal fade" id="ExemploModalCentralizado" tabindex="-1" role="dialog" aria-labelledby="TituloModalCentralizado" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="TituloModalCentralizado">Você é seguidor desta pessoa ?</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Fechar">
              <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body">
          <!-- Group of material radios - option 1 -->
          <div class="form-check">
            <input type="radio" class="form-check-input" id="rdModal1" name="resposta" value="Sim">
            <label class="form-check-label" for="rdModal1">Sim</label>
          </div>

          <!-- Group of material radios - option 2 -->
          <div class="form-check">
            <input type="radio" class="form-check-input" id="rdModal2" name="resposta" value="Nao" checked>
            <label class="form-check-label" for="rdModal2">Não</label>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Sair</button>
          <input type="submit" value="Continuar" class="btn btn-primary">
        </div>
      </div>
    </div>
  </div>
  <!--end modal-->

  <div class="container">
    <div class="card bg-dark text-white">
      <div class="card-img-overlay" id="tour-menu">
        <div class="container" id="wrapper-box">
          <div class="row no-gutters">
            <div class="col-md-6 col-12 mx-auto pt-md-5 pt-0"><a class="botaoModal btn btn-primary btn-block" data-toggle="modal" data-target="#ExemploModalCentralizado" style="cursor: pointer;" role="button" href="https://www.leagueofgraphs.com/pt/">Clique aqui</a></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  <script src="./js/script.js?v=0.0.1"></script>

</body>

</html>

javascript jquery
  • 1

    The "Continue" button is of type "Submit" if you have no form?

  • 1

    Without too much ado, functional example in fiddle

  • I was testing to see if it worked, but there’s really no form. :/

1 answer

1


I’ll leave a solution here even though the button doesn’t make sense "Continue" to be the submit (since there is no form for submit).

Just create a Event Listener of click on the "Continue" button checking which of the radios is checked. With a if...else you check the value and do whatever you want:

$(function(){
   $("#ExemploModalCentralizado :submit").click(function(){
      // pega o valor do radio checado dentro da modal #ExemploModalCentralizado
      var radio = $("#ExemploModalCentralizado :radio:checked").val();
      if(radio == "Sim"){
         location.href = "http://google.com"; // redireciona
      }else if(radio == "Nao"){
         alert("Desculpe, este link não é para você");
      }
   });
});

Take the example:

$(function(){
   $("#ExemploModalCentralizado :submit").click(function(){
      var radio = $("#ExemploModalCentralizado :radio:checked").val();
      if(radio == "Sim"){
         location.href = "http://google.com"; // redireciona
      }else if(radio == "Nao"){
         alert("Desculpe, este link não é para você");
      }
   });
});
.btn-secondary{
    background-color:#4DCC5B !important;
    color:white !important;
    border-color:#4DCC5B !important;
    border-radius: 25px !important;
}
.btn-secondary:hover{
    background-color:white !important;
    color:#4DCC5B !important;
    border-color:#4DCC5B !important;
    border-radius: 25px !important;
}
.btn-primary {
    background-color:#35c1ba !important;
    color:white !important;
    border-color:#35c1ba !important;
    border-radius: 25px !important;
}
.btn-primary:hover {
    background-color:white !important;
    color:#35c1ba !important;
    border-color:#35c1ba !important;
    border-radius: 25px !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

<!-- Modal -->
<div class="modal fade" id="ExemploModalCentralizado" tabindex="-1" role="dialog" aria-labelledby="TituloModalCentralizado" aria-hidden="true">
 <div class="modal-dialog modal-dialog-centered" role="document">
   <div class="modal-content">
     <div class="modal-header">
       <h5 class="modal-title" id="TituloModalCentralizado">Você é seguidor desta pessoa ?</h5>
       <button type="button" class="close" data-dismiss="modal" aria-label="Fechar">
           <span aria-hidden="true">&times;</span>
         </button>
     </div>
     <div class="modal-body">
       <!-- Group of material radios - option 1 -->
       <div class="form-check">
         <input type="radio" class="form-check-input" id="rdModal1" name="resposta" value="Sim">
         <label class="form-check-label" for="rdModal1">Sim</label>
       </div>

       <!-- Group of material radios - option 2 -->
       <div class="form-check">
         <input type="radio" class="form-check-input" id="rdModal2" name="resposta" value="Nao" checked>
         <label class="form-check-label" for="rdModal2">Não</label>
       </div>
     </div>
     <div class="modal-footer">
       <button type="button" class="btn btn-secondary" data-dismiss="modal">Sair</button>
       <input type="submit" value="Continuar" class="btn btn-primary">
     </div>
   </div>
 </div>
</div>
<!--end modal-->

<div class="container">
 <div class="card bg-dark text-white">
   <div class="card-img-overlay" id="tour-menu">
     <div class="container" id="wrapper-box">
       <div class="row no-gutters">
         <div class="col-md-6 col-12 mx-auto pt-md-5 pt-0"><a class="botaoModal btn btn-primary btn-block" data-toggle="modal" data-target="#ExemploModalCentralizado" style="cursor: pointer;" role="button" href="https://www.leagueofgraphs.com/pt/">Clique aqui</a></div>
       </div>
     </div>
   </div>
 </div>
</div>

Browser other questions tagged javascript jquery

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