CODEWITHSUNDEEP
javascriptphp
Mr. B
Mr. B

Reputation: 2787

Auto update the value of a .php variable based on radio button selection without submitting or refreshing

I'm Trying to update the $total_charge variable with the value of the "shipping radio button" without having to refresh or submit the page. I believe this can be done using JavaScript, but I'm not sure how. The code I'm using is below.

Any suggestions?

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>

<?php
$qty = $_POST["qty"];
$style = $_POST["style"];
$price = $_POST["price"];

$lense = $_POST["lense"];
$lense_chunks = explode("|", $lense);
$tax = .08*(($price+$lense_chunks[1])*$qty);
$total_charge = ($tax + $shipping) + (($price+$lense_chunks[1])*$qty);

?>


</head>

<body>
<p><strong>Price</strong> = <?php echo $price;?> <br />
  <strong>QTY</strong> = <?php echo $qty;?>
  <br />
  <strong>Style</strong> = <?php echo $style;?>
  <br />
  <strong>Lense</strong> = <?php echo $lense_chunks[0];?>
  <br />
  <strong>Lense Fee</strong> = <?php echo $lense_chunks[1];?>
  <br />
  <strong>Tax</strong> = <?php echo $tax;?><br />
  <strong>Shipping</strong> = Standard ($5.00)
<label>
    <input name="shipping" type="radio" id="RadioGroup1_0" value="5.00" checked="checked" />
</label>
  Overnight ($20.00)
  <input type="radio" name="shipping" value="20.00" id="RadioGroup1_0" />
  <br />
  <strong>Total Charge</strong> = <?php echo $total_charge;?>
</p>
</body>
</html>

Upvotes: 1

Views: 3601

Answers (4)

R3tep
R3tep

Reputation: 12854

PHP is back-end and Javascript is front-end.
To update $total_charge you must send an http request to your server with the new value.

But for visual effect in html page, use javascript 

<head>
  <?php
    $qty = $_POST["qty"];
    $style = $_POST["style"];
    $price = $_POST["price"];

    $lense = $_POST["lense"];
    $lense_chunks = explode("|", $lense);
    $tax = .08*(($price+$lense_chunks[1])*$qty);
    $total_charge = ($tax + $shipping) + (($price+$lense_chunks[1])*$qty);
  ?>
  <script>
  function refreshTotalCharge(value){

    var tax           = <?php echo $tax; ?>;
    var shipping      = <?php echo $shipping; ?>;
    var lense_chunks1 = <?php echo $lense_chunks[1]; ?>;
    var qty           = <?php echo $qty; ?>;

    document.getElementById("totalCharge").innerHTML= (tax + shipping) + ((value + lense_chunks1) * qty);
  }
  </script>
</head>
<body>
  <p>
    <strong>Price</strong> = <?php echo $price;?> <br />
    <strong>QTY</strong> = <?php echo $qty;?>
    <br />
    <strong>Style</strong> = <?php echo $style;?>
    <br />
    <strong>Lense</strong> = <?php echo $lense_chunks[0];?>
    <br />
    <strong>Lense Fee</strong> = <?php echo $lense_chunks[1];?>
    <br />
    <strong>Tax</strong> = <?php echo $tax;?><br />
    <strong>Shipping</strong> = Standard ($5.00)
    <label>
      <input name="shipping" type="radio" id="RadioGroup1_0" value="5.00" checked="checked" onClick="refreshTotalCharge(this.value);" />
    </label>
    Overnight ($20.00)
    <input type="radio" name="shipping" value="20.00" id="RadioGroup1_0" onClick="refreshTotalCharge(this.value);"/>
    <br />
    <strong>Total Charge</strong> = <span id="totalCharge"><?php echo $total_charge;?></span>
  </p>

</body>

Upvotes: 3

hugo jan
hugo jan

Reputation: 176

You can use javascript to update the total shown to the user.

The code by r3tep should work.

I have put it in a jsFiddle for you: http://jsfiddle.net/ASZcL/

The javascript:

var total_without_shipping = '<?php echo $total_charge_without_shipping;?>';

function updateTotal(shipping_cost) {
    total_cost = parseInt(total_without_shipping) + parseInt(shipping_cost);
    document.getElementById('total').innerHTML = total_cost;

}

And the form with php:

<p><strong>

    Price</strong> =
        <?php echo $price;?>
        <br /> <strong>QTY</strong> =
        <?php echo $qty;?>
        <br /> <strong>Style</strong> =
        <?php echo $style;?>
        <br /> <strong>Lense</strong> =
        <?php echo $lense_chunks[0];?>
        <br /> <strong>Lense Fee</strong> =
        <?php echo $lense_chunks[1];?>
        <br /> <strong>Tax</strong> =
        <?php echo $tax;?>
        <br /> <strong>Shipping</strong> = Standard ($5.00)
        <label>
            <input name="shipping" type="radio" id="RadioGroup1_0" value="5.00" checked="checked" onclick="updateTotal(this.value)" />
        </label>Overnight ($20.00)
        <input type="radio" name="shipping" value="20.00" id="RadioGroup1_0" onclick="updateTotal(this.value);" />
        <br /> <strong>Total Charge</strong> = <span id="total">100</span>

    </p>

Upvotes: 3

Loenix
Loenix

Reputation: 1090

You could undesrtand that PHP is running at server side and HTML/JS/CSS at client side. PHP is a scripting language, it means that when your browser receive the page, your script does not longer exist, so when you click your radio button, your variable does not exist anymore.

You could:

  • Use Ajax to send a request to run a script without any refresh.
  • Use Session to keep a variable associated to the current user (through page loading).
  • Edit the displayed total with JavaScript.

For the third option, you should isolate the content you need to edit, use an input tag or any other tag (according to the context and needs). Then you could use jQuery to manipulate it easily:

$("input[name=shipping]").change(function() {
    $(this).val();// The value of the checked radio button
    $("#TotalCharge").text("New value");//text() to edit text of you total charge tag with id="TotalCharge". .html() is an alternative to write HTML.
});

While i was writing this code, i saw you are using the same ID for two different HTML elements, that si forbidden (In fact, it's a common mistake but it can't do what you want), prefer to use a class.

You may use hidden input for other values if you need it. (But you could also get it from tag content or data)

Please refer to jQuery documentation for more information about it.

Upvotes: 1

digitai
digitai

Reputation: 1842

Yes indeed you should use javascript due to the fact that you want to update a variable value before sending to the server, and that is what javascript stands for, manipulating DOM objects.
Create a javascript script that holds all variables, make calculations on javascript and then parse the total charge to the PHP variable, which I suppose will send the data to your tables.
Don't forget to use parseInt in order to avoid a mess with decimals.

I want to extend the javascript to php value parsing. Simply by javascript altering DOM object value, document.getElementById().value, change the value of the input field where the total charge is allocated. When sending the form, the server will get via $_POST the value that jjavascript calculated.

Upvotes: 1

Related Questions