JavaScript variable passed to PHP

Question

I'm working on a form that adds up the totals selected (via checkboxes). In my JavaScript file, build.js, the totals are added together. On my PHP page, the code takes the items selected on the previous form/HTML page and passes them to what is shown on the PHP page. I want to be able to take the total that was added up via JavaScript on the form page and bring it over to be listed as a total underneath all the options that were selected.

My knowledge of PHP and JavaScript are very rudimentary. This is the first real form I have created in either of these languages. I have poured over this site and the internet in general and have not been able to get any of the options I've found to work. I think I just lucked out on getting the form this far, so I apologize if my code isn't very clean!

Any help would be amazing, as specific as possible please. Here is my code:

The JavaScript that adds the total:

    $(document).ready(function() { 
        $("input[type=checkbox]:checked").attr("checked", false);
    function recalculate() {        
    var sum = 0;
    $("input[type=checkbox]:checked").each(function() {
        sum += parseInt($(this).attr("rel"));
    });
    $("#output").html(sum);
    }
    $("input[type=checkbox]").change(function() {
    recalculate();
    });
    });

Code written on the form itself that shows the total:

<span id="output" class="total"></span><BR><BR>

Code written on the PHP page:

<b>Estimate:</b>
<?php
  $aTruck = $_POST['formSelected'];
  if(empty($aTruck))
  {
    echo("You didn't select a truck.<BR><BR>");
  }
  else
  {
    $N = count($aTruck);
    echo("<h3>Truck Type: ");
  for($i=0; $i < $N; $i++)
    {
    echo($aTruck[$i] . " ");
    }}
  $aAddons = $_POST['formAddons'];
  if(empty($aAddons))
    { 
    echo("You didn't select any options."); 
    }
  else
  foreach ($aAddons as $v) 
    {
    echo "<h3> $v </h3>";
    }
?>

If I'm not mistaken, the reason I can't currently pass the total is because of something I read on here: the PHP is run on the server while the JavaScript runs on the user's end. My options are thus to send the total in the form (possibly as a hidden variable, which I can't figure out either), pass it along in Ajax (I don't know if the server I'm on is capable of this- possibly so and it's all use error!), or use an XMLHttpRequest. I've tried anything I could find on any of those and either do not have the right variable listed inside, am placing it in the wrong spot, or it's just plain wrong.

As I mentioned, I've poured over the forums for everything I can that's related to this and nothing I've found is specific enough for the tiny bit of understanding I have. Among other things I've tried: Pass a javascript variable value into input type hidden value and Pass Javascript Variable to PHP POST along with using an XMLHttpRequest, using Ajax, passing it as a hidden variable (which I'm leaning towards but don't think I'm implementing correctly) and a ton more- it's pretty much all I did all day at work yesterday so I'm not trying to be redundant with my question- I just can't figure out where I'm going wrong.

The amount of questions I see based on, “How do I send a PHP variable to JavaScript?” or vice versa… Search the site, first! — Martin Bean, Oct 04 '13 at 12:49
It was due to my research here (ALL day yesterday) that I found three different possible solutions- I just needed help implementing the right one. — Lynzi, Oct 04 '13 at 20:23

score 0 · Answer 1 · answered Oct 04 '13 at 12:46

It looks like you hit upon it right here:

send the total in the form (possibly as a hidden variable)

Since you're talking about one page posting to another page, and that other page showing the results, then there's no need for AJAX here. You can just use a form value like any other. The "hidden variable" in this case is actually an input element:

<input type="hidden" name="sum" />

In your JavaScript where you're displaying the sum on the first page:

$("#output").html(sum);

You can also set that sum to the form element's value:

$("#output").html(sum);
$("input[name=sum]").val(sum);

As long as that input is inside the same form as the other input elements (like formSelected and formAddons) then when the first page posts to the second page, the code in the second page can access the sum value the same way:

$_POST["sum"]

David, thank you so much. Between your post and Masklinn's post, I was able to see what I was doing wrong and fix it. Thank you for taking the time to reply- I really appreciate it! — Lynzi, Oct 04 '13 at 20:18

score 0 · Answer 2 · answered Oct 04 '13 at 12:49

In your form you should add a hidden input like this :

<input type="hidden"  name="sum"  value="">

Then in your recalculate() (javasript) function, you should change the value of this input once you calculated everything :

function recalculate() {        
    var sum = 0;
    $("input[type=checkbox]:checked").each(function() {
        sum += parseInt($(this).attr("rel"));
    });
    $("#output").html(sum);

    // Change the hidden input value
    $("input[name='sum']").val(sum);
}

Now, when your form is submitted, you should access the sum value, server side (PHP), with a simple :

$sum = $_POST['sum'];

Masklinn, thank you! Your post and David's post below really helped me and I was finally able to solve my problem. I really appreciate it! — Lynzi, Oct 04 '13 at 20:18

JavaScript variable passed to PHP

2 Answers2