Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New to the CF scene
    Join Date
    Jun 2014
    Location
    Whitianga, New Zealand
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Updating the DOM elements using JavaScript

    I am hoping someone can advise me how to proceed with this.

    I am trying to update the value in the "pay-now" and "payment-now" variables with one value and the "pay-later" and "payment-later" variables with another value which dynamically changes depending on which of 3 checkboxes are checked/unchecked.
    The "pay-now" and "payment-now" variables are updated as expected however the "pay-later" and "payment-later" variables are not.

    I am using JavaScript to check the second (hidden) checkbox which is the "pay-later" and "payment-later" amounts.

    I need help with the JavaScript function that updates the "pay-later" and "payment-later" variables. Or is there a simpler more elegant way of doing this?

    Code:
    <div>
        <p><strong>Pay Now $<span id="pay-now">0</span> (Prepay Discount Applies)</strong>
        </p>
        <p><strong>Pay on the day $<span id="pay-later">0</span></strong>
        </p>
    </div>
    <table>
        <tr>
            <td>
                <input class="sum" type="checkbox" value="39" onclick="document.getElementById('chk1').checked = this.checked;" />
                <input class="sum" id="chk1" style="display:none;" type="checkbox" value="55" />Option 1</td>
        </tr>
        <tr>
            <td>
                <input class="sum" type="checkbox" value="45" onclick="document.getElementById('chk2').checked = this.checked;" />
                <input class="later" id="chk2" style="display:none;" type="checkbox" value="60" />Option 2</td>
        </tr>
        <tr>
            <td>
                <input class="sum" type="checkbox" value="45" onclick="document.getElementById('chk3').checked = this.checked;" />
                <input class="later" id="chk3" style="display:none;" type="checkbox" value="60" />Option 3</td>
        </tr>
        <tr>
            <td>Payment Options</td>
            <td>
                <input type="radio" name="payment" value="now" />$<span id="payment-now">0</span> pay now
                <br />
                <input type="radio" name="payment" value="on-the-day" />$<span id="payment-later">0</span> on the day</td>
        </tr>
    </table>
    <script>
        window.onload = function() {
            var input = document.getElementsByClassName('sum');
            var total0 = document.getElementById('pay-now');
            var total1 = document.getElementById('payment-now');
    
            for (var i = 0; i < input.length; i++) {
                input[i].onchange = function() {
                    var add = this.value * (this.checked ? 1 : -1);
                    total0.innerHTML = parseFloat(total0.innerHTML) + add
                    total1.innerHTML = parseFloat(total1.innerHTML) + add
                }
            }
    
            var inputs = document.getElementsByClassName('later');
            var total2 = document.getElementById('pay-later');
            var total3 = document.getElementById('payment-later');
    
            for (var i = 0; i < inputs.length; i++) {
                inputs[i].onchange = function() {
                    var add1 = this.value * (this.checked ? 1 : -1);
                    total2.innerHTML = parseFloat(total2.innerHTML) + add1
                    total3.innerHTML = parseFloat(total3.innerHTML) + add1
    
                }
            }
    
        }
    </script>

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,092
    Thanks
    23
    Thanked 593 Times in 592 Posts
    An easier way. You work with it.
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    
    </head>
    <body>
    <div>
        <p><strong>Pay Now $<span id="pay-now">0</span> (Prepay Discount Applies)</strong>
        </p>
        <p><strong>Pay on the day $<span id="pay-later">0</span></strong>
        </p>
    </div>
    
    <form>
    <input type="radio" name="sums" value="39" onclick="scriptTHING('1');" />Option 1<br />
    <input type="radio" name="sums" value="45" onclick="scriptTHING('2');" />Option 2<br />
    <input type="radio" name="sums" value="45" onclick="scriptTHING('2');" />Option 3<br />
    </form>
    
    <table border="1">
        <tr>
            <td>Payment Options</td>
            <td>
                <input type="radio" name="payment" value="now" />$<span id="payment-now">0</span> pay now
                <br />
                <input type="radio" name="payment" value="on-the-day" />$<span id="payment-later">0</span> on the day</td>
        </tr>
    </table>
    <script>
    function scriptTHING(whichTHING){
    	if(whichTHING == 1){
    		document.getElementById('pay-now').innerHTML = '39';
    		document.getElementById('payment-now').innerHTML = '55';
    	}else if (whichTHING == 2){
    		document.getElementById('pay-now').innerHTML = '45';
    		document.getElementById('payment-now').innerHTML = '60';
    	}
    }
    </script>
    </body>
    </html>
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #3
    New to the CF scene
    Join Date
    Jun 2014
    Location
    Whitianga, New Zealand
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hi sunfighter - thank you for your help with this.
    I have played and slightly modified your code and it does update both the fields.

    However, I need to use checkboxes rather than radio buttons so the user can choose either 1, 2 or 3 options which add together or subtract and updates the pay-now and pay-later amounts as options are checked/unchecked.

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    
    </head>
    <body>
    <div>
        <p><strong>Pay Now $<span id="pay-now">0</span> (Prepay Discount Applies)</strong>
        </p>
        <p><strong>Pay on the day $<span id="pay-later">0</span></strong>
        </p>
    </div>
    
    <form>
    <input type="checkbox" class="sum" name="sums" value="39" onclick="scriptTHING('1');" />Option 1<br />
    <input type="checkbox" class="sum" name="sums" value="45" onclick="scriptTHING('2');" />Option 2<br />
    <input type="checkbox" class="sum" name="sums" value="55" onclick="scriptTHING('3');" />Option 3<br />
    </form>
    
    <table border="1">
        <tr>
            <td>Payment Options</td>
            <td>
                <input type="radio" name="payment" value="now" />$<span id="payment-now">0</span> pay now
                <br />
                <input type="radio" name="payment" value="on-the-day" />$<span id="payment-later">0</span> on the day</td>
        </tr>
    </table>
    <script>
    
    
    function scriptTHING(whichTHING){
    	if(whichTHING == 1){
    		document.getElementById('pay-now').innerHTML = '39';
    		document.getElementById('payment-now').innerHTML = '39';
    		document.getElementById('pay-later').innerHTML = '45';
    		document.getElementById('payment-later').innerHTML = '45';
    	}else if (whichTHING == 2){
    		document.getElementById('pay-now').innerHTML = '55';
    		document.getElementById('payment-now').innerHTML = '55';
    		document.getElementById('pay-later').innerHTML = '65';
    		document.getElementById('payment-later').innerHTML = '65';
    	}else if (whichTHING == 3){
    		document.getElementById('pay-now').innerHTML = '75';
    		document.getElementById('payment-now').innerHTML = '75';
    		document.getElementById('pay-later').innerHTML = '85';
    		document.getElementById('payment-later').innerHTML = '85';
    	}
    }
    </script>
    </body>
    </html>

  • #4
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,503
    Thanks
    3
    Thanked 500 Times in 487 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    </head>
    
    <body>
    <!DOCTYPE html>
    <html>
    <head>
    
    </head>
    <body>
    <form name="myform">
    <div>
        <p><strong>Pay Now $<span id="pay-now">0</span> (Prepay Discount Applies)</strong>
        </p>
        <p><strong>Pay on the day $<span id="pay-later">0</span></strong>
        </p>
    </div>
    
    <form>
    <input type="checkbox" class="sum" name="sums" value="39" onclick="scriptTHING();" />Option 1<br />
    <input type="checkbox" class="sum" name="sums" value="45" onclick="scriptTHING();" />Option 2<br />
    <input type="checkbox" class="sum" name="sums" value="55" onclick="scriptTHING();" />Option 3<br />
    </form>
    
    <table border="1">
        <tr>
            <td>Payment Options</td>
            <td>
                <input type="radio" name="payment" value="now" />$<span id="payment-now">0</span> pay now
                <br />
                <input type="radio" name="payment" value="on-the-day" />$<span id="payment-later">0</span> on the day</td>
        </tr>
    </table>
    </form>
    <script>
    
    
    function scriptTHING(whichTHING){
        var cbs=document.forms.myform.sums,vnow=[39,55,75],vlater=[45,65,85],now=0,later=0,z0=0;
        for (;z0<cbs.length;z0++){
         now+=cbs[z0].checked?vnow[z0]:0;
         later+=cbs[z0].checked?vlater[z0]:0;
        }
        document.getElementById('pay-now').innerHTML=document.getElementById('payment-now').innerHTML=now;
        document.getElementById('pay-later').innerHTML=document.getElementById('payment-later').innerHTML=later;
    }
    </script>
    </body>
    </html>
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #5
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,092
    Thanks
    23
    Thanked 593 Times in 592 Posts
    Note:
    1) choose either 1, 2 or 3 options means to choose one. choose any combination of 1, 2 or 3 options would have saved us some time.
    2) I used an array for the "hidden" values. We could have used a second array instead of the checkbox values. Your choice.

    FYI the check boxes just call the function. The function gets the values and adds them.
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    
    </head>
    <body>
    <div>
        <p><strong>Pay Now $<span id="pay-now">0</span> (Prepay Discount Applies)</strong>
        </p>
        <p><strong>Pay on the day $<span id="pay-later">0</span></strong>
        </p>
    </div>
    
    <form id="check_form">
    <input type="checkbox" class="sum" name="sums" value="39" onclick="scriptTHING();" />Option 1<br />
    <input type="checkbox" class="sum" name="sums" value="45" onclick="scriptTHING();" />Option 2<br />
    <input type="checkbox" class="sum" name="sums" value="55" onclick="scriptTHING();" />Option 3<br />
    </form>
    
    <table border="1">
        <tr>
            <td>Payment Options</td>
            <td>
                <input type="radio" name="payment" value="now" />$<span id="payment-now">0</span> pay now
                <br />
                <input type="radio" name="payment" value="on-the-day" />$<span id="payment-later">0</span> on the day</td>
        </tr>
    </table>
    <script>
    
    function scriptTHING(){
    	var parent = document.getElementById('check_form').sums;
    	var total = 0;
    	var totalsum = 0;
    	var other = [55, 60, 70];
    	for (i = 0; i<parent.length; ++i){
    		if(parent[i].checked == true){
    			total += Number(parent[i].value);
    			totalsum += other[i];
    		}
    	}
    	document.getElementById('pay-now').innerHTML = total;
    	document.getElementById('payment-now').innerHTML = total;
    	document.getElementById('pay-later').innerHTML = totalsum;
    	document.getElementById('payment-later').innerHTML = totalsum;
    }
    </script>
    </body>
    </html>
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • Users who have thanked sunfighter for this post:

    twobears (06-26-2014)

  • #6
    New to the CF scene
    Join Date
    Jun 2014
    Location
    Whitianga, New Zealand
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hi sunfighter - outstanding and very elegant solution. Provides the functionality I was trying to achieve.
    I really appreciate your time here and I have learned a lot from your code examples and explainations. Many thanks.

  • #7
    New to the CF scene
    Join Date
    Jun 2014
    Location
    Whitianga, New Zealand
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hi - the above solution works perfectly with all browsers except with <=IE8. (no surprises there)
    (In IE the table elements are read only and do not update with innerHTML).
    Is there a work around to get IE to also play nicely?
    kind regards Stephen

  • #8
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,092
    Thanks
    23
    Thanked 593 Times in 592 Posts
    Because I wont be bullied by Micro$oft I am still running XP which means the highest IE I can have is IE8. I just ran the code in post #5 and both IE8 and FF work the same way. If your having problems you have modified that code. So post it and I'll look at it.
    If you didn't modify the code clear your cache for IE8.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #9
    New to the CF scene
    Join Date
    Jun 2014
    Location
    Whitianga, New Zealand
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hi sunfighter, Thank you for your follow up.
    Yes, the script, when stripped down works fine in IE8, but when in the live page it doesn't.
    I did modify your scriptTHING a little to fit in with what I was doing.
    This is the page link to show you how I'm using it, which doesn't work in IE 8.
    (scriptTHING is lurking at the bottom of the page)

    .../duplicate-of-combined-courses-3.html

  • #10
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,092
    Thanks
    23
    Thanked 593 Times in 592 Posts
    I do not work with IE. So this is very little help, IE8 does not like "document.getElementsByClassName()" I'd go back to the "document.getElementById(()" , how many times did you use that? It also says you don't have jquery defined.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."


  •  

    Tags for this Thread

    Posting Permissions

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