Select option when clicking button

Question

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

Buttons (outside the 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 clicking one of the three buttons, I need the last field of the form (unit) to be preselected. But I have no idea how to do this; Someone has already had to do something similar and can give some hint?

Answer 1

By clicking a button, you can identify which button is and thus change the status of selected to the respective element option:

$("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>
<div class="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>

Answer 2

You can do it like 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>
<div class="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 remove the tag <a href=""> top of action buttons.

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

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