-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.– BRABO
Thank you so much worked with clone(), now I’m incrementing in my code, This tip was very useful =)
– mikaela kleinkauf