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 3 of 3
  1. #1
    New Coder
    Join Date
    Jun 2012
    Location
    San Diego
    Posts
    60
    Thanks
    46
    Thanked 0 Times in 0 Posts

    Broken: 2 Arrays Working as 1

    YouTube Video Showing Problem
    https://www.youtube.com/watch?v=nlvzgu3pJ8A

    Code is broke. I have two mutually exclusive arrays that I want them working together as one array to the user. E.g., If one radio button is checked" in one array, I do not want the other array's radio button checked, but unchecked. JavaScript should deselect the radio button in the other array, making the functionality to look like the user is working with one set of radio buttons. The two separate radio arrays have different name=pair values. They exist as two arrays, but should behave as if they are one.

    PHP Code:
    <!DOCTYPE html>
    <
    html lang="en-US">
        <
    head>
        <
    style>
            
    body{font-family:sans-serifarial;}
            
    th{text-align:left;}
            
    h3,h4{margin-top:.15empadding:0;}
        </
    style>
        <
    script>
            function 
    monthlyPlan(){
            for(var 
    i=0i<document.deliveryForm.monthly.length;++i)
                {
                if(
    document.deliveryForm.monthly[i].checked== true )
                    
    document.deliveryForm.weekly.checked false;    
                }
            }
            function 
    weeklyPlan(){
            for(var 
    i=0i<document.deliveryForm.weekly.length;++i)
                {
                if(
    document.deliveryForm.weekly[i].checked == true)
                    
    document.deliveryForm.monthly.checked false;    
                }
            }
        
    </script>
        </head>
        <body>
            <form name="deliveryForm" action="FormProcessor.html" method="get">
                <h3>Delivery Rates</h3>
                <h4>Allow users to select their desired delivery option.</h4>
                    <ul>
                        <li>Bill weekly or monthly</li>
                        <li>Devlivered Mon-Sat or Everyday</li>
                    </ul>
                <p>
                    <strong>Billed continuously $3.50 by the Month?</strong>
                    <input type="radio" name="monthly" value="yes" onclick="monthlyPlan();" />  Yes    
                </p>
                <strong>Billed by a Weekly Plan?</strong>
                <table border=1 cellpadding=6>
                    <tr>
                        <th></th>
                        <th>4 weeks</th>
                        <th>13 weeks</th>
                        <th>26 weeks</th>
                        <th>52 weeks</th>
                    </tr>
                    <tr>
                        <th>Devlivered Mon-Sat</th>
                        <td><input type="radio" name="weekly" value="12.60" onclick="weeklyPlan();" />12.60</td>
                        <td><input type="radio" name="weekly" value="40.95" onclick="weeklyPlan();" />40.95</td>
                        <td><input type="radio" name="weekly" value="81.90" onclick="weeklyPlan();" />81.90</td>
                        <td><input type="radio" name="weekly" value="156.00" onclick="weeklyPlan();" />156.00</td>
                    </tr>
                        <th>Devlivered Everyday</th>
                        <td><input type="radio" name="weekly" value="13.56" onclick="weeklyPlan();" />13.56</td>
                        <td><input type="radio" name="weekly" value="44.07" onclick="weeklyPlan();" />44.07</td>
                        <td><input type="radio" name="weekly" value="88.14" onclick="weeklyPlan();" />88.14</td>
                        <td><input type="radio" name="weekly" value="159.74" onclick="weeklyPlan();" />159.74</td>
                    </tr>
                </table>
            </form>
        </body>
    </html> 
    Last edited by ryanjohnsond; 05-12-2013 at 06:09 AM.

  • #2
    Regular Coder
    Join Date
    Aug 2012
    Posts
    145
    Thanks
    0
    Thanked 26 Times in 26 Posts
    hi ryanjohnsond,

    i made a small change to your monthlyPlan function and i think it updated the way you want your function:

    Code:
            function monthlyPlan(){
            for(var i=0; i<document.deliveryForm.weekly.length;++i)
                {
                if(document.deliveryForm.monthly.checked == true )
                    document.deliveryForm.weekly[i].checked = false;    
                }
            }
    Code:
    <!DOCTYPE html>
    <html lang="en-US">
        <head>
        <style>
            body{font-family:sans-serif, arial;}
            th{text-align:left;}
            h3,h4{margin-top:.15em; padding:0;}
        </style>
        <script>
            function monthlyPlan(){
            for(var i=0; i<document.deliveryForm.weekly.length;++i)
                {
                if(document.deliveryForm.monthly.checked == true )
                    document.deliveryForm.weekly[i].checked = false;    
                }
            }
            function weeklyPlan(){
            for(var i=0; i<document.deliveryForm.weekly.length;++i)
                {
                if(document.deliveryForm.weekly[i].checked == true)
                    document.deliveryForm.monthly.checked = false;    
                }
            }
        </script>
        </head>
        <body>
            <form name="deliveryForm" action="FormProcessor.html" method="get">
                <h3>Delivery Rates</h3>
                <h4>Allow users to select their desired delivery option.</h4>
                    <ul>
                        <li>Bill weekly or monthly</li>
                        <li>Devlivered Mon-Sat or Everyday</li>
                    </ul>
                <p>
                    <strong>Billed continuously $3.50 by the Month?</strong>
                    <input type="radio" name="monthly" value="yes" onclick="monthlyPlan();" />  Yes    
                </p>
                <strong>Billed by a Weekly Plan?</strong>
                <table border=1 cellpadding=6>
                    <tr>
                        <th></th>
                        <th>4 weeks</th>
                        <th>13 weeks</th>
                        <th>26 weeks</th>
                        <th>52 weeks</th>
                    </tr>
                    <tr>
                        <th>Devlivered Mon-Sat</th>
                        <td><input type="radio" name="weekly" value="12.60" onclick="weeklyPlan();" />12.60</td>
                        <td><input type="radio" name="weekly" value="40.95" onclick="weeklyPlan();" />40.95</td>
                        <td><input type="radio" name="weekly" value="81.90" onclick="weeklyPlan();" />81.90</td>
                        <td><input type="radio" name="weekly" value="156.00" onclick="weeklyPlan();" />156.00</td>
                    </tr>
                        <th>Devlivered Everyday</th>
                        <td><input type="radio" name="weekly" value="13.56" onclick="weeklyPlan();" />13.56</td>
                        <td><input type="radio" name="weekly" value="44.07" onclick="weeklyPlan();" />44.07</td>
                        <td><input type="radio" name="weekly" value="88.14" onclick="weeklyPlan();" />88.14</td>
                        <td><input type="radio" name="weekly" value="159.74" onclick="weeklyPlan();" />159.74</td>
                    </tr>
                </table>
            </form>
        </body>
    </html>
    1 Corinthians 15:3-4 / Ephesians 2:8-9 - What or Who are you living for? Jesus is returning very soon

  • Users who have thanked Brandnew for this post:

    ryanjohnsond (05-12-2013)

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,613
    Thanks
    80
    Thanked 4,635 Times in 4,597 Posts
    You are *BOTH* *WAY* overthinking this.

    Code:
    <!DOCTYPE html>
    <html>
    <body>
        <div>
            <form id="deliveryForm" action="FormProcessor.html" method="get">
                <h3>Delivery Rates</h3>
                <h4>Allow users to select their desired delivery option.</h4>
                    <ul>
                        <li>Bill weekly or monthly</li>
                        <li>Devlivered Mon-Sat or Everyday</li>
                    </ul>
                <p>
                    <strong>Billed continuously $3.50 by the Month?</strong>
                    <input type="radio" name="monthly" value="yes" />  Yes    
                </p>
                <strong>Billed by a Weekly Plan?</strong>
                <table border=1 cellpadding=6>
                    <tr>
                        <th></th>
                        <th>4 weeks</th>
                        <th>13 weeks</th>
                        <th>26 weeks</th>
                        <th>52 weeks</th>
                    </tr>
                    <tr>
                        <th>Devlivered Mon-Sat</th>
                        <td><input type="radio" name="weekly" value="12.60" />12.60</td>
                        <td><input type="radio" name="weekly" value="40.95" />40.95</td>
                        <td><input type="radio" name="weekly" value="81.90" />81.90</td>
                        <td><input type="radio" name="weekly" value="156.00" />156.00</td>
                    </tr>
                        <th>Devlivered Everyday</th>
                        <td><input type="radio" name="weekly" value="13.56" />13.56</td>
                        <td><input type="radio" name="weekly" value="44.07" />44.07</td>
                        <td><input type="radio" name="weekly" value="88.14" />88.14</td>
                        <td><input type="radio" name="weekly" value="159.74" />159.74</td>
                    </tr>
                </table>
            </form>
        </div>
    
    <script type="text/javascript">
    var f = document.getElementById("deliveryForm"); // named forms are *WAY OBSOLETE*!!
    
    // if the monthly button is clicked on *AT ALL*, wipe out the weekly choice
    // reason:  If the monthly button *WAS* checked, then it already had wiped them out,
    //          so unchecking it can wipe them out again with no visible effect
    //
    f.monthly.onclick = function( )
        {
            for ( var w = 0; w < f.weekly.length; ++w ) { f.weekly[w].checked = false; }
        }
    
    // by the same token, if any weekly button is clicked on, simply uncheck the monthly:
    for ( var w = 0; w < f.weekly.length; ++w ) 
    {
        f.weekly[w].onclick = 
            function() { 
                f.monthly.checked = false; 
            };
    }
    </script>
    </body>
    </html>
    And note that now we have neater HTML code: No nasty JavaScript in the middle of the HTML tags. All done by attaching the onclick handlers in the JS that is placed, correctly, *AFTER* the HTML.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    ryanjohnsond (05-12-2013)


  •  

    Posting Permissions

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