Total value with JavaScript and PHP

Question

I'm using this form script to automatically calculate totals. Now I need to get that total and add it to a database via PHP and MySQL.

I don't know how to 'name' the totalPrice div, so that I can pass its value to the database.

Edit:

I'm still not getting results in the database. I'm now using $_POST[totalValue] for the field set and totalPrice for the field name.

HTML:

<div id="totalPrice"></div></div>
<input type="hidden" name="totalValue" id="totalValue" />

JavaScript:

$("#vendorform").submit(function(){
    var totalValue = document.getElementById('totalValue');
    totalValue.value = vendorPrice; //the actual total value
});

function calculateTotal()
{
    //Here we get the total price by calling our function
    //Each function returns a number so by calling them we add the values they return together
    var vendorPrice = getTentPrice() + getElecPrice() + getPropanePrice();

    //display the result
    var divobj = document.getElementById('totalPrice');
    divobj.style.display='block';
    divobj.innerHTML = "Total Price Vendor $"+vendorPrice;
}

Usually it's not a good idea to insert calculated value within a table. — Nicola Cossu
– Nicola Cossu, Commented Jan 8, 2012 at 20:52
Because this practice violates normalisation rules and must be used only in particular conditions to increase performance. In all the other cases it's better to calculate them with a query, not to store them. — Nicola Cossu
– Nicola Cossu, Commented Jan 8, 2012 at 20:59
The person who will be access this info in a csv will not have the knowledge to calculate w/ a query. I need to be able to save a calculated total that is pre-totaled as the user completes the form and is easily viewable by a non-nerd. — AAAndreAAA
– AAAndreAAA, Commented Jan 8, 2012 at 21:02
Why don't you create 'export' action that will generate csv and calculate totals on the fly? — DamirR
– DamirR, Commented Jan 8, 2012 at 21:48

Peter-Paul van Gemerden · Accepted Answer · 2012-01-08 23:45:14Z

1

The vendorPrice variable is not available outside the scope of the function calculateTotal. You could make vendorPrice a global variable, but that's a bit of an ugly hack.

Alternatively, you could do something like this:

function calculateTotal()
{
    var vendorPrice = getTentPrice() + getElecPrice() + getPropanePrice();
    var divobj = document.getElementById('totalPrice');
    divobj.style.display='block';
    divobj.innerHTML = "Total Price Vendor $"+vendorPrice;

    return vendorPrice; // <-- ADDED
}

And this:

$("#vendorform").submit(function(){
    var totalValue = document.getElementById('totalValue');
    totalValue.value = calculateTotal(); // <-- CHANGED
});

This way, you assign the value that is now returned by calculateTotal() to totalValue.value.

By the way: since it looks like you're already using jQuery, you can rewrite your code like this:

// [...]

var divobj = $('#totalPrice');
divobj.css('display', 'block');
divobj.text("Total Price Vendor $"+vendorPrice);

// [...]

var totalValue = $('#totalValue');
totalValue.val(calculateTotal());

This makes it a bit more readable (although that's debatable) and a bit more cross-browser reliant. jQuery has great docs (e.g. the documentation on .val()). If you're going to use jQuery more often I can highly recommend bookmarking the docs and skimming through them.

edited Jan 8, 2012 at 23:45

answered Jan 8, 2012 at 23:37

Peter-Paul van Gemerden

7,02933 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

AAAndreAAA Over a year ago

Thank you! I'm going to play w/ this after dinner :)

AAAndreAAA Over a year ago

Thank you, thank you. This is working for me. I'm going to go back and do it properly (calculate w/ query per the other suggestions) but this is great for now.

Ivan Castellanos · Accepted Answer · 2012-01-08 20:59:30Z

1

Using jQuery:

$("#cakeform").submit(function(){
    var price = $("#totalPrice").text().replace(/[\s\S]+\$/,"")
    $("#cakeForm").append('<input type="hidden" name="estimated_price" value="' + price + '" />')   
})

But as @nick-rulez pointed out, is usually not a good idea to save calculated values in a database.

answered Jan 8, 2012 at 20:59

Ivan Castellanos

8,2501 gold badge51 silver badges44 bronze badges

Comments

Minko Gechev · Accepted Answer · 2012-01-08 22:13:29Z

1

You can set the value to:

<input type="hidden" name="totalValue" id="totalValue" />

Which you have to put inside your <form>...</form>. When you submit the form you're going to receive input's value.

You can set the value to the hidden field with this sniped:

JS

var totalValue = document.getElementById('totalValue');
totalValue.value = myValue; //myValue is the total

edited Jan 8, 2012 at 22:13

answered Jan 8, 2012 at 21:01

Minko Gechev

25.8k9 gold badges64 silver badges69 bronze badges

4 Comments

AAAndreAAA Over a year ago

I'm gonna cry- you're being so helpful and I'm still getting 0 in my totalPrice field in the database. I'm not giving up yet- I just don't have much brain left to wrap around this problem.

Minko Gechev Over a year ago

$_POST['totalValue']; must be the value you're looking for.

AAAndreAAA Over a year ago

I'm assuming that the myValue should be vendorPrice per the js (see my edit in OP) but it's still returning 0...

AAAndreAAA Over a year ago

thank you mgechev- I know I will be looking back at your tips for future reference!

Peter Mortensen · Accepted Answer · 2012-10-28 05:49:36Z

0

JavaScript:

function calculateTotal()
{
    var Price = getTshirtPrice() + getTshirtType() + getTshirtColour() +
    getTextColour();

    var divobj = document.getElementById('textbox');
    divobj.value = "Total Price For the T-shirt: £"+Price;

    return Price;
}

HTML:

<div id="totalPrice"><input type="text" id="textbox"></div>

Do that. It works perfectly fine.

edited Oct 28, 2012 at 5:49

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Feb 21, 2012 at 9:53

Archtects

1

Collectives™ on Stack Overflow

Total value with JavaScript and PHP

4 Answers 4

2 Comments

Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related