How to return the data from different ajax function and collect them into one function?

Puneet Source

I have two dropdown Lists

HTML with PHP:

  <div class="block">
       <span>Bedrooms</span><br>
       <select id="bedroom-select" name="bedrooms" >
        <option value="">Select bedrooms</option>
      <?php
      $products = $bedroom;
        foreach($products as $item){
       ?>
        <option value="<?php echo $item; ?>"<?php echo(isset($_SESSION['bedrooms']) && $_SESSION['bedrooms'] == $item) ? "selected" : "" ?> ><?php  echo $item; ?></option>
        <?php
      }  
        ?>
        </select>
       </div>
          <div class="block"> 
         <span>Bathrooms</span><br>
       <select id="bathroom-select" name="bathrooms">
        <option value="">Select bathrooms</option>
      <?php
       $products = $bathroom;
       foreach($products as $item){
      ?>
       <option value="<?php echo $item; ?>"<?php echo  (isset($_SESSION['bathrooms']) && $_SESSION['bathrooms'] == $item) ? "selected" : "" ?> ><?php  echo $item; ?></option>
       <?php
       }
       ?>
        </select>
        </div>`  

Dropdown over here

From the above dropdowns I have to calculate the price dynamically using AJAX. This is the JQuery code

jQuery start

$(document).ready(function() {

var undefined = 0;      
$('#bedroom-select').change(function(){    
var option =$(this).val();           
$.ajax({            
type:'POST',          
url:'login.php',          
data:({option}),            
success:function(data){                
   var price1 = parseFloat(data);           
    first(price1,undefined);           
     return parseFloat(price1);          
       }              
       });            
    });               
  $('#bathroom-select').change(function(){         
       var bathroomOption =$(this).val();                
 $.ajax({              
     type:'POST',               
     url:'login.php',           
  data:({bathroomOption}),            
    success:function(data){           
    var price2 =parseFloat(data);         
  first(undefined,price2);             
  return parseFloat(price2);               
   }                             
   });           
     });                       
    function first(price1,price2){                
 var value1=parseInt(price1);            
   var value2=parseInt(price2);             
        $('#cost1').text(value1); //these are span where I want to show the value        
 $('#cost2').text(value2);                
 }               
   });

Output is when I select the bedroom option the it shows 15 0. When I select the bathroom option then it remove the value and assign it 0 //15 instead of 15 15

jQuery ends

login.php

The page from where the data is retrieving

  $con=mysqli_connect("localhost","root","","price");
 if (isset($_POST['option'])) {
  $query=mysqli_query($con,"select price from bedroom where number_of_bedrooms ='$_POST[option]'");
   while ($row = mysqli_fetch_array($query)) {
 echo json_encode($row['price'],JSON_NUMERIC_CHECK);
}
   }
    if (isset($_POST['bathroomOption'])) {
     $query=mysqli_query($con,"select price from bathroom where                             number_of_bathrooms ='$_POST[bathroomOption]'");
    while ($row = mysqli_fetch_array($query)) {
    echo json_encode($row['price'],JSON_NUMERIC_CHECK);
     }
          }

login.php over here

How I will return the values from AJAX. I'm learning PHP, jQuery and HTML.

phpjqueryhtmlajax

Answers

answered 5 days ago kamran pervez #1

Try changing your function to this:

function first(price1, price2) {
    var value1 = parseInt(price1);
    var value2 = parseInt(price2);
    if (value1 != 0) {
        $('#cost1').text(value1);
    }
    if (value2 != 0) {
        $('#cost2').text(value2);
    }
}

comments powered by Disqus