Add another PHP dynamic field

Asked

Viewed 27 times

-2

I am creating a form for the internal registration of telephone sales. Each sale can have more than 1 phone line included, depending on what the customer wants. Telephone options vary according to the operator chosen by the customer. I have this part using a select (the phone select is dependent on the carrier select).

I need to put this select "phone", in a way that, in case the customer wants more than one line, has appeared that " + " next, to be able to click and add another selection field, however I am not able to develop this part.

By select already be dependent, and make the distinction to save in the bank, as I would for this select to be dynamic (when you click on the + can add 1 more phone, and so on) and save this information in the database (since the customer will be the same, if you choose 1 more phone). If anyone can help, I’d really appreciate it.

Here the HTML code:

<div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 pl-1">
   <div class="form-group">
      <label><strong>Pacote <span>(Obrigatório)</span></strong></label>  
      <span class="carregandoPacote">Carregando...</span>
      <select class="form-control" name="idPacote" id="idPacote" required>
         <option value="">Selecione a Operadora</option>
      </select>  
   </div>
</div>     
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 pl-1">
   <div class="form-group">
      <label><strong>Telemóvel 2(Opcional)</strong></label>               
      <span class="carregandoPacote">Carregando...</span>    
      <select class="form-control" name="telemovel2" id="telemovel2">
         <option value="">Selecione um Pacote</option>
      </select>
   </div>
</div>

Script:

<script type="text/javascript">
         $(function(){
            $('#idEmpresa').change(function(){
               if( $(this).val()){
                  $('#idPacote').hide();
                  $('.carregandoPacote').show();
                  $.getJSON('assets/php/pacotesempresasparceiras.php?search=',{idEmpresa: $(this).val(), ajax: 'true'}, function(pacoteDB){
                     var options = '<option value="">Escolha o Pacote</option>'; 
                     for (var pac = 0; pac < pacoteDB.length; pac++) {
                        options += '<option data-pacote="' + pacoteDB[pac].valor +'" value="' + pacoteDB[pac].id + '">' + pacoteDB[pac].pacote + ' / ' + pacoteDB[pac].valor + '</option>';
                     }   
                                                                
                     $('#idPacote').html(options).show();
                     $('.carregandoPacote').hide();
                  });
               }
            });
         });


     $(function(){
        $('#idPacote').change(function(){
           if( $(this).val()){
              $('#telemovel2').hide();
              $('.carregandoPacote').show();
              $.getJSON('assets/php/pacotestelemovelempresasparceiras.php?search=',{idPacote: $(this).val(), ajax: 'true'}, function(telemovel2DB){
                 var options = '<option value="">Escolha o Telemovel</option>'; 
                 for (var tel2 = 0; tel2 < telemovel2DB.length; tel2++) {
                    options += '<option data-telemovel2="' + telemovel2DB[tel2].valor +'" value="' + telemovel2DB[tel2].id + '">' + telemovel2DB[tel2].telemovel +  ' / '+ telemovel2DB[tel2].valor +'</option>';
                 }   
                                                            
                $('#telemovel2').html(options).show();
                $('.carregandoPacote').hide();
             });
          } 
       });
    });
 </script>
  • You can use the clone() jquery to clone your select.

  • 1

    Thank you so much worked with clone(), now I’m incrementing in my code, This tip was very useful =)

No answers

Browser other questions tagged

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