DLzer DLzer -3 years ago 87
JSON Question

Using PHP variable in Javascript/Jquery Function

I am creating an investment calculator that takes user input from six pages and stores them in PHP $_SESSION variables. On the final page i take the $_SESSION variables form PHP and JSON.parse them to Javascript like so:

var cash = parseInt(JSON.parse( '<?php echo json_encode($cash_flow); ?>'));


I then run the variables through a formula to find a score like so:

function SCORE( cash, comp, num_months) {
var total1 = (cash - comp )/( num_months*12);
var total2 = total1/2.5;
var total3 = total2*100;

var dvTotal = total3;

return dvTotal;

}


I then use JQuery to output the score to the DOM.

I then have a section with a display of each of the users original input with a + and - next to them allowing the user to update their original input.

$('#cashMinusBtn').click(function(){
$('#cashFlowOutput').html(cash-=1000);
var newCash = $('#cashFlowOutput').html();
SCORE( newCash );
$('#dvTestOut').html(scoreTotal);


Here is the HTML used to output the user data:

div class="container-fluid pro-table">
<div class="row">
<div class="col-md-12 tooltip-row">
<h4>Increase or Decrease value of initial entry to see how your dv<strong>SCORE</strong> would be effected:</h4>
</div>
</div>

<div class="row tooltip-display">
<div class="col-md-2 outputBox">
<p>Cash Flow</p><br>
<p id="cashFlowOutput"></p><br>
<button class="table-button" id="cashMinusBtn">-</button><button class="table-button" id="cashPlusBtn">+</button>


</div>
<div class="col-md-2 outputBox">

<p>Purchase Price</p><br>
<p id="purchaseOutput"></p><br>
<button class="table-button" id="purchaseMinusBtn">-</button><button class="table-button" id="purchasePlusBtn">+</button>


</div>
<div class="col-md-2 outputBox">

<p>Down Payment</p><br>
<p id="downOutput"></p><br>
<button class="table-button" id="downMinusBtn">-</button><button class="table-button" id="downPlusBtn">+</button>


</div>
<div class="col-md-2 outputBox">

<p>Interest Rate</p><br>
<p id="interestOutput"></p><br>
<button class="table-button" id="interestMinusBtn">-</button><button class="table-button" id="interestPlusBtn">+</button>


</div>
<div class="col-md-2 outputBox">


<p>Months Financed</p><br>
<p id="monthsOutput"></p><br>
<button class="table-button" id="monthsMinusBtn">-</button><button class="table-button" id="monthsPlusBtn">+</button>


</div>
<div class="col-md-2 outputBox">

<p>Compensation</p><br>
<p id="compOutput"></p><br>
<button class="table-button" id="compMinusBtn">-</button><button class="table-button" id="compPlusBtn">+</button>


</div>


I would like to grab the new data updated by the user via + or -, send it through the formula, and update the score displayed.

I have no problem grabbing the updated data with
var newCash = $('#cashFlowOutput').html();


But i'm having trouble pushing the newCash back through the formula and updating the score.

I'll include the repo for this material, i understand that some of the work has vulnerabilities but it is still and work in progress on a local server: https://github.com/DLzer/YarmouthApp/blob/master/finalPage.php

This is my first serious attempt at an application so i'm unsure if i'm making a lot more work for myself than needs to be done. Any critiquing appreciated.

Answer Source

There are a number of things that could potentially be wrong here.

Starting off, this line is unnecessarily complex:

var cash = parseFloat(JSON.parse( '<?php echo json_encode($cash_flow); ?>'));

My assumption here is that $cash_flow is a number, since you're doing a parseInt on it. So you could just do this (Updated to use parseFloat as per Lawrence):

var cash = parseFloat('<?php echo $cash_flow; ?>');

Next, let's look at where you're changing the value

$('#cashFlowOutput').html(cash-=1000);
var newCash = $('#cashFlowOutput').html();

There's no need to use a dom element for this since you're just pulling the value right back out, you can do this instead:

var newCash = cash - 1000;

Then the final two lines:

SCORE( newCash );
$('#dvTestOut').html(scoreTotal);

Your SCORE function takes in 3 parameters, you're missing comp and num_months. Also, scoreTotal doesn't exist. I assume this is meant to be the result from the SCORE function, in which case you want it to look like this:

var comp = 10; // sample value
var num_months = 4; // sample value
var scoreTotal = SCORE( newCash, comp, num_months );
$('#dvTestOut').html(scoreTotal);
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download