www.webdeveloper.com
Results 1 to 4 of 4

Thread: Javascript total price

Hybrid View

  1. #1
    Join Date
    Oct 2012
    Posts
    6

    Javascript total price

    Hello,

    I am making a price per seat map for a fictional website for my school.
    The problem is that I need to let people see the total price but I don't know how to do it.

    <script type="text/javascript">
    var totaal=0;
    function fm10(){
    var chkBox=document.getElementById('m10');
    if(chkBox.checked)
    {
    document.getElementById('tm10').innerHTML = '7,50';


    }else{
    document.getElementById('tm10').innerHTML = '';


    }
    }

    function fm9(){
    var chkBox=document.getElementById('m9');
    if(chkBox.checked)
    {
    document.getElementById('tm9').innerHTML = '7,50';


    }else{
    document.getElementById('tm9').innerHTML = '';


    }
    }

    function fm8(){
    var chkBox=document.getElementById('m8');
    if(chkBox.checked)
    {
    document.getElementById('tm8').innerHTML = '7,50';


    }else{
    document.getElementById('tm8').innerHTML = '';


    }
    }

    function fm7(){
    var chkBox=document.getElementById('m7');
    if(chkBox.checked)
    {
    document.getElementById('tm7').innerHTML = '7,50';


    }else{
    document.getElementById('tm7').innerHTML = '';


    }
    }

    function fm6(){
    var chkBox=document.getElementById('m6');
    if(chkBox.checked)
    {
    document.getElementById('tm6').innerHTML = '7,50';


    }else{
    document.getElementById('tm6').innerHTML = '';


    }
    }

    function fm5(){
    var chkBox=document.getElementById('m5');
    if(chkBox.checked)
    {
    document.getElementById('tm5').innerHTML = '7,50';


    }else{
    document.getElementById('tm5').innerHTML = '';


    }
    }

    function fm4(){
    var chkBox=document.getElementById('m4');
    if(chkBox.checked)
    {
    document.getElementById('tm4').innerHTML = '7,50';


    }else{
    document.getElementById('tm4').innerHTML = '';


    }
    }

    function fm3(){
    var chkBox=document.getElementById('m3');
    if(chkBox.checked)
    {
    document.getElementById('tm3').innerHTML = '7,50';


    }else{
    document.getElementById('tm3').innerHTML = '';


    }
    }

    </script>
    <div id="zalen1plattegrond" <?php echo $zaal1hidden;?>>
    <form id="zaal1plattegrond" method="post" action="IDEAL_test/klantgegevens.php" >
    <form id="zaal1plattegrond" method="post" action="IDEAL_test/klantgegevens.php" >
    <table width="400" >
    <tr align="center">
    <td></td>
    <td></td>
    <td bgcolor="#c77f68"><input type="checkbox" id="m10" onClick="fm10()" name="stoel[]" value="cl3m10" <?php if($rcl3m10==true){ echo $disable;}?>></td>
    <td bgcolor="#c77f68"><input type="checkbox" id="m9" onClick="fm9()" name="stoel[]" value="cl3m9" <?php if($rcl3m9==true){ echo $disable;} ?>></td>
    <td bgcolor="#c77f68"><input type="checkbox" id="m8" onclick="fm8()" name="stoel[]" value="cl3m8" <?php if($rcl3m8==true){ echo $disable;} ?>></td>
    <td bgcolor="#c77f68"><input type="checkbox" id="m7" onclick="fm7()" name="stoel[]" value="cl3m7" <?php if($rcl3m7==true){ echo $disable;} ?>></td>
    <td bgcolor="#c77f68"><input type="checkbox" id="m6" onclick="fm6()" name="stoel[]" value="cl3m6" <?php if($rcl3m6==true){ echo $disable;} ?>></td>
    <td bgcolor="#c77f68"><input type="checkbox" id="m5" onclick="fm5()" name="stoel[]" value="cl3m5" <?php if($rcl3m5==true){ echo $disable;} ?>></td>
    <td bgcolor="#c77f68"><input type="checkbox" id="m4" onclick="fm4()" name="stoel[]" value="cl3m4" <?php if($rcl3m4==true){ echo $disable;} ?>></td>
    <td bgcolor="#c77f68"><input type="checkbox" id="m3" onclick="fm3()" name="stoel[]" value="cl3m3" <?php if($rcl3m3==true){ echo $disable;} ?>></td>
    <td></td>
    <td></td>
    </tr> <!-- M -->
    <tr align="center">
    This is what I have so far

  2. #2
    Join Date
    Oct 2012
    Posts
    4
    A word of advice, name your elements and functions with English readable names. Like for example:

    function fm3(){
    var chkBox=document.getElementById('m3');
    if(chkBox.checked)
    {
    document.getElementById('tm3').innerHTML = '7,50';


    }else{
    document.getElementById('tm3').innerHTML = '';


    }
    }
    should be:

    Code:
    function getTotalPrice(checkboxElement, priceElementID, amount){
        var chkBox = document.getElementById(checkboxElementID);
        if (chkBox.checked){
            document.getElementById(priceElementID).innerHTML = '' + amount;
        } else {
            document.getElementById(priceElementID).innerHTML = '';
        }
    }
    repost it with code like that and you may get a better response, if not you have learned how to name variables and functions correctly. Not only does it help you follow what the code does, it also allows other people to easily follow and understand your code and give you feedback.

  3. #3
    Join Date
    Oct 2012
    Posts
    6
    Thanks for your feedback.
    And the reason I gave the element that name is because I need 1000 of those functions,
    so I gave them the name of the seat.
    And great thanks for your help.

  4. #4
    Join Date
    Oct 2012
    Posts
    4
    Quote Originally Posted by Border View Post
    Thanks for your feedback.
    And the reason I gave the element that name is because I need 1000 of those functions,
    so I gave them the name of the seat.
    And great thanks for your help.
    You would have noticed that the function I gave you allowed you to enter the checkbox element and the totalamount element as parameters. doing this allows you to have one function that does multiple things (i.e you don't need 1000 functions).

    For example given that function your checkboxes boxes become:

    Code:
    <td bgcolor="#c77f68"><input type="checkbox" id="m10" onClick="getTotalPrice('m10', 't10', '7,50')" name="stoel[]" value="cl3m10" <?php if($rcl3m10==true){ echo $disable;}?>></td>
    <td bgcolor="#c77f68"><input type="checkbox" id="m9" onClick="getTotalPrice('m9', 't9', '7,50')" name="stoel[]" value="cl3m9" <?php if($rcl3m9==true){ echo $disable;} ?>></td>
    <td bgcolor="#c77f68"><input type="checkbox" id="m8" onclick="getTotalPrice('m8', 't8', '7,50')" name="stoel[]" value="cl3m8" <?php if($rcl3m8==true){ echo $disable;} ?>></td>
    <td bgcolor="#c77f68"><input type="checkbox" id="m7" onclick="getTotalPrice('m7', 't7', '7,50')" name="stoel[]" value="cl3m7" <?php if($rcl3m7==true){ echo $disable;} ?>></td>
    <td bgcolor="#c77f68"><input type="checkbox" id="m6" onclick="getTotalPrice('m6', 't6', '7,50')" name="stoel[]" value="cl3m6" <?php if($rcl3m6==true){ echo $disable;} ?>></td>
    <td bgcolor="#c77f68"><input type="checkbox" id="m5" onclick="getTotalPrice('m5', 't5', '7,50')" name="stoel[]" value="cl3m5" <?php if($rcl3m5==true){ echo $disable;} ?>></td>
    <td bgcolor="#c77f68"><input type="checkbox" id="m4" onclick="getTotalPrice('m4', 't4', '7,50')" name="stoel[]" value="cl3m4" <?php if($rcl3m4==true){ echo $disable;} ?>></td>
    <td bgcolor="#c77f68"><input type="checkbox" id="m3" onclick="getTotalPrice('m3', 't3', '7,50')" name="stoel[]" value="cl3m3" <?php if($rcl3m3==true){ echo $disable;} ?>></td>
    HINT Doing something like this may lead you to the solution your after

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles