asked on

how to echo 2 results from php into html

I am using code provided by Marco Gasi, and I made some modification to the php to give me 2 results. How can I post the two different results from the php file

<?php

$price = 7.99;

$qty = filter_input(INPUT_POST, "qty");

$total_price = 0;

$total_tax = 0;

if (isset($qty)){

      $shipping = $qty <= 4 ? 9.95 : 14.95;

      $total_price = ($price * $qty) + $shipping;

$total_tax = $total_price * .0825;
}

echo $total_price;
echo $total_tax;

HTML : (I want two separate results PRICE and TAX, and the way it is working right now is 1 string file with BOTH results)

<h3><font size="6">Total price is <span id="total-price">$ 15.98</span></font></h3>
                              <h3><font size="6">Taxes <span id="total-tax">$ 1.32</span></font></h3>
</td>
<script src="https://code.jquery.com/jquery-3.0.0.min.js" integrity="sha256-JmvOoLtYsmqlsWxa7mDSLMwa6dZ9rrIdtrrVYRnDRH0=" crossorigin="anonymous"></script>
            <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
            <script type="text/javascript">
                  $(document).ready(function () {
//reset quantity value when page reloads
                        $('#qty').val(2);
// intercept 'change' event for the quantity input
                        $('#qty').on('change', function () {
// get the value of the quantity input
                              var qty = $(this).val();
//perform an Ajax call to our script passing quantity value
                              $.ajax({
                                    type: 'post',
                                    url: 'calc.php',
                                    data: {qty: qty},
                                    success: function (result) {
//if the call succeeds the returned value is printed on the screen within the span with id='total-price'
                                          $('#total-price').text(result);
                                          $('#total-tax').text(result);

                                    },
                                    error: function (jqXHR, textStatus, errorThrown) {
//otherwise the error is logged in the console
                                          console.log(textStatus, errorThrown);
                                    }
                              });
                        });
                  });
</script>

Thanx for any help

gr8gonzo

Step 1: Put both values into an array and JSON encode it:

OLD:
echo $total_price;
echo $total_tax;

NEW:
echo json_encode(array(
"price" => $total_price,
"tax" => $total_tax
));

Step 2: Update your AJAX call to specify JSON as the data type that should be expected back from the server:
$.ajax({
type: 'post',
url: 'calc.php',
data: {qty: qty},
dataType: 'json',

Step 3: Now the "result" in your callback:
success: function (result) {
...should be a Javascript object containing two elements "price" and "tax", so you can access them like this:
$('#total-price').text(result.price);
$('#total-tax').text(result.tax);

Marco Gasi

If this is the case you have to return an array:

<?php

$price = 7.99;

$qty = filter_input(INPUT_POST, "qty");

$total_price = 0;

$total_tax = 0;

if (isset($qty)){

      $shipping = $qty <= 4 ? 9.95 : 14.95;

      $total_price = ($price * $qty) + $shipping;

        $total_tax = $total_price * .0825;
}

echo json_encode(array($total_price, $total_tax));

Open in new window

Then in your jqyery do this:

                  $(document).ready(function () {
                                //reset quantity value when page reloads
                        $('#qty').val(2);
                                // intercept 'change' event for the quantity input
                        $('#qty').on('change', function () {
                                        // get the value of the quantity input
                              var qty = $(this).val();
                                        //perform an Ajax call to our script passing quantity value
                              $.ajax({
                                    type: 'post',
                                    url: 'calc.php',
                                    data: {qty: qty},
                                    success: function (result) {
                                          var data = JSON.parse(result); 
                                                        //if the call succeeds the returned value is printed on the screen within the span with id='total-price'
                                          $('#total-price').text([0]);
                                          $('#total-tax').text(data[1]);
                                    },
                                    error: function (jqXHR, textStatus, errorThrown) {
                                                        //otherwise the error is logged in the console  
                                          console.log(textStatus, errorThrown);
                                    }
                              });
                        });
                  });

Open in new window

So we use json_encode to return the array in json string format. Then we use JSON.parse() function to rebuild the array from the json string in order to use its values.

Marco Gasi

oops gr8gonzo is right: fataType must be set... Ignore my coment, since gr8gonzo has already answered to you :)

crescue

ASKER

Tnx gr8gonzo , it worked like a charm ! how can I format the results to 2 decimals
Ex
tax = 1.245675
would like
tax = 1.25

ASKER CERTIFIED SOLUTION

gr8gonzo

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

crescue

ASKER

Tnx great expert