get data from 3 input fields to calculate price without page refresh

Question

Could someone help me out please. I need to calculate price and add it automatically to a input field without refreshing the page

this is what I got so far but it's not working

the input html form field looks a bit like this

 <form method="post" action="<? echo $_SERVER['PHP_SELF']; ?>">
     <b>Airport:</b> &nbsp;&nbsp;&nbsp;&nbsp;
     <select size="1" name="arrivalairport" id="airport">
        <option value=""></option>
            <?
            $airportresult = mysql_query("SELECT * FROM ms_airport_airport WHERE LENGTH (ms_airport_airport_name) > 1 ORDER BY ms_airport_airport_name");
            if (mysql_num_rows($airportresult) > 0) {
               while (($airsubrow = mysql_fetch_assoc($airportresult)) !== false){
                   $airportname = $airsubrow['ms_airport_airport_name'];
                   echo '<option value="'.$airportname.'">'.$airportname.'</option>';
               }
            }
            ?>
      </select>
      <p>
      <b># Passengers:</b>&nbsp;&nbsp;&nbsp;&nbsp;
      <input type="text" name="arrivalnrpass" id="arrivalnrpass" size="3">
      <p>
      <b>Babyseat:</b>&nbsp;&nbsp;&nbsp;&nbsp;
      <input type="text" name="arrivalbaby" id="arrivalbaby" size="3">
      <p>
      <b>Price:</b>&nbsp;&nbsp;&nbsp;&nbsp;
      <input type="text" name="arrivalprice" id="arrivalprice" size="5">  &euro;
      <p>
      <input class="button" type="submit" value="Add" name="action">
 </form>

and this is what i have as ajax

<script>
   $(document).ready(function(){  
       $('#airport').change(function(){  
           var airport_name = $(this).val();
       });      
   });

   $('#arrivalnrpass').keyup(function(){  
       var arrivalnrpass = $(this).val();
    });

    $('#arrivalbaby').keyup(function(){  
       var arrivalbaby = $(this).val();
    });  

    if (airport_name == 'Alicante' && arrivalnrpass < 4 && arrivalbaby == 0)  {
        var price = 40
        $('#arrivalprice').val(price);
    }  
 });  

  </script>

i hope someone could help me out - thanks

What do you mean by "this is what i have as ajax"? there is no ajax in your code — Alexandru Severin, Dec 08 '16 at 14:42

score 0 · Answer 1 · answered Dec 08 '16 at 14:47

You can try this:

$(document).ready(function(){  

var airport_name;
var arrivalnrpass = 0;
var arrivalbaby = 0;

       $('#airport').change(function(){  
           airport_name = $(this).val();
       }); 

   $('#arrivalnrpass').on('input', function(){  
       arrivalnrpass = $(this).val();
       calculate();
    });

    $('#arrivalbaby').on('input', function(){  
       arrivalbaby = $(this).val();
       calculate();
    });
    
    $('#arrivalprice').on('focus', function(e) {
     calculate();
    })
    
    function calculate() {
     $('#arrivalprice').val(parseInt(arrivalnrpass) + parseInt(arrivalbaby));
    }

 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" action="#">
     <b>Airport:</b> &nbsp;&nbsp;&nbsp;&nbsp;
     <select size="1" name="arrivalairport" id="airport">
         <option value="">Airport 1</option>
         <option value="">Airport 2</option>
         <option value="">Airport 3</option>
      </select>
      <p>
      <b># Passengers:</b>&nbsp;&nbsp;&nbsp;&nbsp;
      <input type="number" name="arrivalnrpass" id="arrivalnrpass" size="3">
      <p>
      <b>Babyseat:</b>&nbsp;&nbsp;&nbsp;&nbsp;
      <input type="number" name="arrivalbaby" id="arrivalbaby" size="3">
      <p>
      <b>Price:</b>&nbsp;&nbsp;&nbsp;&nbsp;
      <input type="number" name="arrivalprice" id="arrivalprice" size="5">  &euro;
      <p>
      <input class="button" type="submit" value="Add" name="action">
 </form>

Hope this helps!

score 0 · Answer 2 · edited May 23 '17 at 12:30

It looks to me like the primary issue is that your Javascript to calculate price (your if statement) only runs once, when the script runs for the first time. It needs to be called every time a .change() or .keyup() event runs, so wrap it in a function and call it.

function calculatePrice() {
    if (airport_name == 'Alicante' && arrivalnrpass < 4 && arrivalbaby == 0)  {
        var price = 40
        $('#arrivalprice').val(price);
    }
}

Now call that from each of your 'this-thing-has-been-updated' functions.

You might want to make #arrivalprice unable to be changed. You can use a <p> tag on a form, but that would prevent it from submitting - that said, it's unwise to trust the price visually displayed on this page in your processing code, as that could easily be modified with some simple hacking. Now all someone would have to do is change that value and all of a sudden they're getting a rather sweet discount. So you're better off calculating that from the other answers, as you do here.

If you do want to keep it as an input and make it read-only, use the readonly attribute: https://stackoverflow.com/a/3676132/6855449

Your $(document).ready() also only extends over the $('#airport').change(), and you have an extraneous set of braces at the end as a result. I'm guessing you want to fix that.

get data from 3 input fields to calculate price without page refresh

2 Answers2