Ajax and Jquery Freight Calculation

Question

I am developing a virtual shop where in the shopping cart I will implement the freight calculation via mail webservice.

The code below it makes the calculation and returns only the Pac option, I need that as the user selects the option sedex he makes the calculation and shows me the value related to the sedex. I am not able to implement select, it is appearing that var freight type is not set.

function LoadFrete() {

var cep_destino = $('#cep_destino').val();
//var tipo_frete = $('tipo_frete').val();



$.ajax({
    url: 'ajax/a_frete.php',
    type: 'POST',
    dataType: 'html',
    cache: false,
    data: {cep_destino: cep_destino},
    success: function (data) {

        console.log('Valor = ' + data);

        $('#valor_frete').val(data);

        var val_prod = $('#valor_pro').val();

        val_prod = val_prod.replace(',', '.');
        data     = data.replace(',', '.');

        var total = parseFloat(data) + parseFloat(val_prod);

        $('#valor_prodfrete').val(total);



    }, beforeSend: function () {

    }, error: function (jqXHR, textStatus, errorThrown) {
        console.log('Erro');

    }
});
}   

Answer 1

It depends on what you’re using in your form, whether it’s class or id

Example:

$('.btn-calcular').on('click', function(){
   var tipo_frete_class = $('.tipo_frete').val();
   var tipo_frete_id = $('#tipo_frete').val();
   
   alert("Tipo Frete  class: "+tipo_frete_class+
        "\nTipo de Frete id: "+tipo_frete_id);
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<label for="tipo_frete">Tipo Frete Class</label>
<div class="col-lg-4">
<select class="form-control tipo_frete col-lg-2" >
  <option value="1">Normal</option>
  <option value="2">Sedex</option>
</select>

<br><br>

<label for="tipo_frete">Tipo Frete ID</label>
<select class="form-control  col-lg-2" id="tipo_frete">
  <option value="1">Normal</option>
  <option value="2">Sedex</option>
</select>
</div>

<button class="btn btn-primary btn-calcular">Calcular</button>

And on dataType, try using json

dataType: 'json'