#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2013
    Posts
    12
    Rep Power
    0

    Broken: 2 Arrays working as 1


    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.

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

    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> 
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Posts
    74
    Rep Power
    18
    You are treating document.deliveryForm.monthly as tough it is an array, but it isn't: it is just one input type! Therefore, the length property is not defined.

    Change the code to this to achieve your expected behaviour:

    Code:
     function monthlyPlan(){ 
         if(document.deliveryForm.monthly.checked=== true ) {
             for(var i=0; i<document.deliveryForm.weekly.length;++i) 
             {
    	     document.deliveryForm.weekly[i].checked = false;     
             } 
        }
    }

IMN logo majestic logo threadwatch logo seochat tools logo