jQuery, variable maths in form

Question

I'm trying to make a form that will work out how much something will cost based on the options selected. I have managed to make it work successfully for 3 options however I can't figure out how to make it create the subtotal, this subtotal should add the variables "vpageprice" and "vmediaprice" and be displayed inside the cell with the id "st". Below is my code and heres a JSfiddle.

HTML

<div style="margin:auto;text-align:center;" id="form">
    <table width="300" border="1" cellspacing="0" cellpadding="0">
        <tr><th scope="col">Element</th><th scope="col">Type</th><th scope="col">Price</th></tr>

        <tr><td>Media</td><td>
                <select id="media">
                    <option value="0">None</option>
                    <option value="5">Audio</option>
                    <option value="10">Video</option>
                    <option value="12">Both</option>
                </select></td>
            <td id="mp"></td></tr>

        <tr><td>Page Style</td><td>
                <select id="pagestyle">
                    <option value="10">Seperate</option>
                    <option value="5">Content Change</option>
                </select></td>
            <td id="ps"></td></tr>

        <tr><td>Pages</td><td>
                <select id="pages">
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                </select></td>
            <td id="pp"></td></tr>

        <tr><td colspan="2">Total</td><td id="st"></td></tr>
    </table>
</div>

jQuery

$(document).ready(function(){    
    function mediaprice() {
        var vmediaprice = $("#media").val();
        $("#mp" ).html("£"+vmediaprice);
    }
    $("#form").change(mediaprice);
    mediaprice();    
    function pagestyleprice() {
        var vpagestyleprice = $("#pagestyle").val();
        $("#ps" ).html("£"+vpagestyleprice+" per page");
    }
    $("#form").change(pagestyleprice);
    pagestyleprice();    
    function pageprice() {
        var vpageprice = ($("#pages").val())*($("#pagestyle").val());
        $("#pp" ).html("£"+vpageprice);
    }
    $("#form").change(pageprice);
    pageprice();    
});

I hope someone can help me resolve this issue, if anyone has a better/easier way to make this form I will change what I have. Many thanks.

Sergei Zahharenko · Accepted Answer · 2014-01-11 23:00:23Z

2

here is solution:

http://jsfiddle.net/acrashik/Q3eKA/1/

function pageprice() {
  //your stuff
  getTotal();

}
function getTotal(){
    var total = parseInt($('#pages').val(),10) * parseInt($('#pagestyle').val(),10)
        total += parseInt( $('#media').val(),10);
    $('#st').text('£' + total);
}

answered Jan 11, 2014 at 23:00

Sergei Zahharenko

1,52412 silver badges16 bronze badges

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

4 Comments

user3186203 Over a year ago

This works well thank you. Question: why does parseInt have 10 at the end?

Sergei Zahharenko Over a year ago

it's radix, it's have to be defined to avoid possible problems with parsing number.

Sergei Zahharenko Over a year ago

for example, parseInt("0700") //448 or parseInt("0700",10) //700

user3186203 Over a year ago

Ahh so this is to make it decimal as appose to an alternative number system like binary or hexidecimal? thank you for your answer and helping me understand the code behind it :D

kgd · Accepted Answer · 2014-01-12 00:07:11Z

1

Here is a very very simple solution:

$("#form").change(function() {
    $("#st").text("$" + (pageprice()+mediaprice()));
}).change();

JSFiddle

edited Jan 12, 2014 at 0:07

answered Jan 11, 2014 at 23:01

kgd

1,6752 gold badges11 silver badges15 bronze badges

2 Comments

user3186203 Over a year ago

This does what I want but as already stated its pagestyle*pageprice not plus so the equation comes out wrong. If you can make the equation come out right I'll accept your answer as its simpler than others.

user3186203 Over a year ago

Thanks for the edit but I have another issue with the code, the total price doesnt appear until an option is clicked, can you remedy that please?

Edgar Villegas Alvarado · Accepted Answer · 2014-01-12 00:02:49Z

0

This is a solution:

$(document).ready(function(){

function mediaprice() {
  var vmediaprice = $("#media").val();
  $("#mp" ).html("£"+vmediaprice);
  return parseFloat(vmediaprice);
}
function pageprice() {
  var vpageprice = ($("#pages").val())*($("#pagestyle").val());
  $("#pp" ).html("£"+vpageprice);
  return parseFloat(vpageprice);
}    
function pagestyleprice() {
  var vpagestyleprice = $("#pagestyle").val();
  $("#ps" ).html("£"+vpagestyleprice+" per page");
  return parseFloat(vpagestyleprice);
}

function updateAll(){
    var total = mediaprice() + pageprice(); //Order here affects
    $("#st" ).html("£"+total);
}    

$("#form").change(updateAll);
updateAll();

});

Working here: http://jsfiddle.net/edgarinvillegas/Q3eKA/4/

EDIT Thinking better of your logic, this would be the updateAll method:

 function updateAll(){
    pagestyleprice();
    var total = mediaprice() + pageprice(); //Order here affects
    $("#st" ).html("£"+total);
 }

Working here: http://jsfiddle.net/edgarinvillegas/Q3eKA/6/

Cheers

edited Jan 12, 2014 at 0:02

answered Jan 11, 2014 at 23:07

Edgar Villegas Alvarado

18.4k2 gold badges45 silver badges61 bronze badges

5 Comments

user3186203 Over a year ago

Pagestyleprice is times pageprice not plus.

Edgar Villegas Alvarado Over a year ago

So that bug is in your original code also. I just used your code

user3186203 Over a year ago

"var vpageprice = ($("#pages").val())*($("#pagestyle").val());" theres definitely a times in my code.

Edgar Villegas Alvarado Over a year ago

hehe look your pageprice function and mine, they both multiply

user3186203 Over a year ago

I mean in the "function updateAll" it adds them together in the total where it should times them. if you can make the equation work with the times then I'll accept your answer as it eliminates some of my previous code.

Collectives™ on Stack Overflow

jQuery, variable maths in form

3 Answers 3

4 Comments

2 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

2 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related