Select option when clicking button

Question

Select option when clicking button

Navigation

#1 by (1 votes)
#2 by (1 votes)

2

I have 3 buttons outside of the form tag and when clicking on any of them, I need the value to be selected in the select, follow image and code for better understanding:

Buttons (outside tag form)

<div class="botoes_action">
  <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
    <a href="">
      <button class="botao_preto waves-effect waves-light">
        Compre 3 unidades 
        <b>
          receba 1 de brinde
        </b>
      </button>
    </a>
  </div>
  <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
    <a href="">
      <button class="botao_vermelho waves-effect waves-light">
        Compre 5 unidades 
        <b>
          receba 2 de brinde
        </b>
      </button>
    </a>
  </div>
  <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
    <a href="">
      <button class="botao_verde waves-effect waves-light">
        Compre 10 unidades 
        <b>
          receba 5 de brinde
        </b>
      </button>
    </a>
  </div>
</div>



 <form class="formulario_area" action="#" id="form_envio" method="post">
   <div class="row">
     <div class="input-field col m12 s12 paddingNone">
       <input type="text" class="form-control box_form" required="" id="nome" name="nome" placeholder="Nome Completo">
     </div>
     <div class="input-field col m12 s12 paddingNone">
       <input type="text" class="form-control box_form" required="" id="email" name="email" placeholder="E-mail">
     </div>
     <div class="input-field col m12 s12 paddingNone paddingL">
       <input type="text" class="form-control box_form" required="" id="telefone" name="telefone" placeholder="Telefone">
     </div>
     <div class=" col m6 s12 paddingNone paddingL">
       <select name="estado" class="form-control box_form" required="" id="estado" onchange="mudaCidade($(this).val());">
       </select>
     </div>
     <div class="col m6 s12 paddingNone paddingL">
       <select name="cidade" class="form-control box_form" required="" id="cidade">
         <option value="cidade">Cidade</option>                           
       </select>
     </div>
     <div class="form-group col m12 s12 paddingNone paddingL">
       <select name="pacote" class="form-control box_form" required="" id="pacote">
         <option value="" selected="" disabled="">Escolha uma unidade</option>  
         <option value="3">3 Unidades</option>       
         <option value="5">5 Unidades</option>   
         <option value="10">10 Unidades</option>                       
       </select>
     </div>                                    
   </div>                               
   <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 send_btn">
     <button class="waves-effect waves-light btn button_send" data-loading-text="Aguarde..." type="submit">
       Enviar
     </button>
   </div>
</form>

When I click on one of the three buttons, I need the last form field to be pre-selected. But I have no idea how I can do this; Has anyone ever had to do something similar and can you pass any tips?

javascript html jquery css

asked by anonymous 23.11.2016 / 14:44

2 answers

1

When you click a button, you can identify the button and thus change the selected state to its option element:

$("button").click(function(e) {
  e.preventDefault();
  var id = $(this).attr("id");
  $("#opt" + id).prop("selected","selected");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="botoes_action">
  <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
    <a href="">
      <button type="button" id="3" class="botao_preto waves-effect waves-light">
        Compre 3 unidades
        <b>
          receba 1 de brinde
        </b>
      </button>
    </a>
  </div>
  <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
    <a href="">
      <button type="button" id="5" class="botao_vermelho waves-effect waves-light">
        Compre 5 unidades
        <b>
          receba 2 de brinde
        </b>
      </button>
    </a>
  </div>
  <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
    <a href="">
      <button type="button" id="10" class="botao_verde waves-effect waves-light">
        Compre 10 unidades
        <b>
          receba 5 de brinde
        </b>
      </button>
    </a>
  </div>
</div>



<form class="formulario_area" action="#" id="form_envio" method="post">
  <div class="row">
    <div class="input-field col m12 s12 paddingNone">
      <input type="text" class="form-control box_form" required="" id="nome" name="nome" placeholder="Nome Completo">
    </div>
    <div class="input-field col m12 s12 paddingNone">
      <input type="text" class="form-control box_form" required="" id="email" name="email" placeholder="E-mail">
    </div>
    <div class="input-field col m12 s12 paddingNone paddingL">
      <input type="text" class="form-control box_form" required="" id="telefone" name="telefone" placeholder="Telefone">
    </div>
    <div class=" col m6 s12 paddingNone paddingL">
      <select name="estado" class="form-control box_form" required="" id="estado" onchange="mudaCidade($(this).val());">
      </select>
    </div>
    <div class="col m6 s12 paddingNone paddingL">
      <select name="cidade" class="form-control box_form" required="" id="cidade">
        <option value="cidade">Cidade</option>
      </select>
    </div>
    <div class="form-group col m12 s12 paddingNone paddingL">
      <select name="pacote" class="form-control box_form" required="" id="pacote">
        <option value="" selected="" disabled="">Escolha uma unidade</option>
        <option id="opt3" value="3">3 Unidades</option>
        <option id="opt5" value="5">5 Unidades</option>
        <option id="opt10" value="10">10 Unidades</option>
      </select>
    </div>
  </div>
  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 send_btn">
    <button class="waves-effect waves-light btn button_send" data-loading-text="Aguarde..." type="submit">
      Enviar
    </button>
  </div>
</form>

23.11.2016 / 14:51

Laravel 5.3 - About Changing the App Directory Popular select with database values

score 1 · Accepted Answer

You can do this:

$('.botoes_action button').click(function() {

  $('#pacote').val($(this).data('quantidade'));
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="botoes_action">
  <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
      <button class="botao_preto waves-effect waves-light" data-quantidade="3">
        Compre 3 unidades 
        <b>
          receba 1 de brinde
        </b>
      </button>
  </div>
  <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
      <button class="botao_vermelho waves-effect waves-light" data-quantidade="5">
        Compre 5 unidades 
        <b>
          receba 2 de brinde
        </b>
      </button>
  </div>
  <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
      <button class="botao_verde waves-effect waves-light" data-quantidade="10">
        Compre 10 unidades 
        <b>
          receba 5 de brinde
        </b>
      </button>
  </div>
</div>

<br>

<div class="row">
  <div class="form-group col m12 s12 paddingNone paddingL">
    <select name="pacote" class="form-control box_form" required="" id="pacote">
      <option value="" selected="" disabled="">Escolha uma unidade</option>  
      <option value="3">3 Unidades</option>       
      <option value="5">5 Unidades</option>   
      <option value="10">10 Unidades</option>                       
    </select>
  </div>                                    
</div>

The first thing to do is to get the <a href=""> tag on top of the action buttons.

Then you put the data-quantidade="3" attribute on each button, with the corresponding amount in select .

In javascript I declare an event to monitor the buttons within div.botoes_action , and when a button is pressed the script takes the value of the property date-quantity and assigns it to the value of select.