CODEWITHSUNDEEP
javascriptphpjqueryhtmlajax
Reverter
Reverter

Reputation: 130

Ajax filter: Select + Radio button

i have problem with this script:

When I select a type from the select and choose the amount of the radio buttons, the value does not change, but if I choose a new type from the select, then the value is altered properly.

I wish that once you choose a type from the select, changing several times the amount, the price value change in real time.

Thank you in advance

HTML + PHP

<select name="tipo" id="tiposelect">
    <option selected="selected"> --- </option>
    <?
        $sql_tipo = mysql_query("SELECT * FROM AM_Tipi_Prodotto_Agenzia WHERE id_prodotto = $id_prodotto");
        while($row_tipo = mysql_fetch_array($sql_tipo)){
    ?>
    <option value="<?=$row_tipo['nome_prodotto']?>"><?=$row_tipo['nome_prodotto']?></option>
    <? }?>
 </select>
 </div>
 <div class="point-of-action">
    <h5>Quantità:</h5>
    <?
        $sql_quantita = mysql_query("SELECT * FROM AM_Quantita_Prodotti_Agenzia WHERE id_prodotto = $id_prodotto LIMIT 3");
        while($row_quantita = mysql_fetch_array($sql_quantita)){
    ?>

      <input type="radio" name="quantita_2" value="<?=$row_quantita['quantita']?>"> &nbsp;<?=$row_quantita['quantita']?>&nbsp;&nbsp;
    <? }?>
 </div>

AJAX

<script>
        $(document).ready(function () {
          //RADIO BUTTON    
          $("input[name='quantita_2']").change(function() {           
          var value=$("input[name='quantita_2']:checked").val()

          //SELECT
          var tipo;
          $("#tiposelect").change(function(){
          tipo  = $('#tiposelect').val();

          $.ajax({
           method: "POST",
           url: "calcolo_agenzia.php",
           data: { id_prodotto: <?php echo (isset($_REQUEST['id_prodotto']) ? $_REQUEST['id_prodotto'] : 0) ; ?>, quantita: value, tipo: tipo },
           success: function( msg ) {
            $("#importoCalcolato2").text("€"+msg);
           }
          });
         });
         });
        });
</script>

FORM IMAGE

enter image description here

Upvotes: 0

Views: 1117

Answers (2)

Jaykumar Patil
Jaykumar Patil

Reputation: 359

Try following code

$("input[name='quantita_2']").on("change",function() {
    //your code
}

Update:

check your tipo variable. It gets value only on change event of select. It's initial value should be the value of selected option.

Upvotes: 0

s k nagesh
s k nagesh

Reputation: 98

try changing $("#tiposelect").change(function(){ to $("#tiposelect").click(function(){ this will triger event every time toy click on $('#tiposelect')

Additionally you can also add another event handler to for $('#tiposelect').click() so that which ever changes will trigger ajax

Upvotes: 1

Related Questions