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 5 of 5
  1. #1
    4jd
    4jd is offline
    New Coder
    Join Date
    Sep 2011
    Posts
    25
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Alert if no radio buttons are checked

    got 3 groups of radio buttons that, if not all checked, needs to give an alert message when button clicked to continue. The button is not a submit button, but just to continue to the next part of the form which is hidden.

    Code:
    <!--  MY RADIO BUTTON GROUPS  -->
    
    <input name="id[18]" value="81" id="attrib-18-81" type="radio"><label class="attribsRadioButton zero" for="attrib-18-81"> Kola Cubes</label><br />
    <input name="id[18]" value="82" id="attrib-18-82" type="radio"><label class="attribsRadioButton zero" for="attrib-18-82"> Pineapple Cubes</label><br />
    <input name="id[18]" value="79" id="attrib-18-79" type="radio"><label class="attribsRadioButton zero" for="attrib-18-79"> Rhubarb and Custard</label><br />
    <input name="id[18]" value="80" id="attrib-18-80" type="radio"><label class="attribsRadioButton zero" for="attrib-18-80"> Strawberry and Cream</label><br /><br />
    
    <input name="id[19]" value="99" id="attrib-19-99" type="radio"><label class="attribsRadioButton zero" for="attrib-19-99"> Kola Cubes</label><br />
    <input name="id[19]" value="100" id="attrib-19-100" type="radio"><label class="attribsRadioButton zero" for="attrib-19-100"> Pineapple Cubes</label><br />
    <input name="id[19]" value="97" id="attrib-19-97" type="radio"><label class="attribsRadioButton zero" for="attrib-19-97"> Rhubarb and Custard</label><br />
    <input name="id[19]" value="98" id="attrib-19-98" type="radio"><label class="attribsRadioButton zero" for="attrib-19-98"> Strawberry and Cream</label><br /><br />
    
    <input name="id[20]" value="117" id="attrib-20-117" type="radio"><label class="attribsRadioButton zero" for="attrib-20-117"> Kola Cubes</label><br />
    <input name="id[20]" value="118" id="attrib-20-118" type="radio"><label class="attribsRadioButton zero" for="attrib-20-118"> Pineapple Cubes</label><br />
    <input name="id[20]" value="115" id="attrib-20-115" type="radio"><label class="attribsRadioButton zero" for="attrib-20-115"> Rhubarb and Custard</label><br />
    <input name="id[20]" value="116" id="attrib-20-116" type="radio"><label class="attribsRadioButton zero" for="attrib-20-116"> Strawberry and Cream</label><br /><br />
    
    <!--  MY CONTINUE BUTTON  -->
    <img src="images/tabs/button_continue.gif" alt="CONTINUE"  onclick="Tabdoc_ManageDisplay(4)">
    The onClick function on the image is to hide these and display next part of form.

    I understand that I could just check them automatically to force user to change them if they wanted to or just continue but if there is way to do it another way, please let me know.

    Or if possible to hide my continue button until all 3 groups are selected, also without using checked="checked"

    Thanks in advance.
    -----------------
    Jay

  • #2
    Regular Coder
    Join Date
    Mar 2008
    Location
    London
    Posts
    152
    Thanks
    4
    Thanked 42 Times in 42 Posts
    Hi Jay,
    Try this one...

    Code:
    	function Tabdoc_ManageDisplay(tabId) {
    		var chkRadioGrps = [18,19,20], isChecked = false;
    		for(var i = 0; i < chkRadioGrps.length; i++) {
    			var objs = document.getElementsByName('id['+chkRadioGrps[i]+']');
    			for(var j = 0; j < objs.length; j++) {
    				if(objs[j].checked) {
    					isChecked = true;
    					break;
    				}
    			}
    			if(!isChecked) {
    				alert('All fields are mandatory');
    				return false;
    			}
    		}
    		alert('moving forward...');
    	}
    Thanks & Regards,
    Niral Soni

  • #3
    4jd
    4jd is offline
    New Coder
    Join Date
    Sep 2011
    Posts
    25
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Hi Niral

    Thanks for that. Its definitely in the right direct, but i'm have problems with it. Here is my complete code including the tabbed section may be cause problems.

    Code:
    <!--  bof TAB WINDOWS  -->
    <!-- Tabs and content -->
    <table border="0" cellpadding="0" cellspacing="0">
    <tr>
    <!--  Tab 1  -->
    <td id="Tabdoc_TAB1" class="Tabdoc_tabTD ">
    <div id="Tabdoc_tab1hood" class="Tabdoc_tab Tabdoc_tabhood" style="display:block;">
     <b>Introduction</b>
    </div>
    <div id="Tabdoc_tab1bonnet" class="Tabdoc_tab Tabdoc_tabbonnet" style="display:none;">
     <b>Introduction</b>
    </div>
    </td>
    <td class="Tabdoc_tabsp"></td>
    <!--  Tab 2  -->
    <td id="Tabdoc_TAB2" class="Tabdoc_tabTD">
    <div id="Tabdoc_tab2hood" class="Tabdoc_tab Tabdoc_tabhood" style="display:none;">
     <b>1) Choose your box</b>
    </div>
    <div id="Tabdoc_tab2bonnet" class="Tabdoc_tab Tabdoc_tabbonnet" style="display:block;">
     <b>1) Choose your box</b>
    </div>
    </td>
    <td class="Tabdoc_tabsp"></td>
    <!--  Tab 3  -->
    <td id="Tabdoc_TAB3" class="Tabdoc_tabTD">
    <div id="Tabdoc_tab3hood" class="Tabdoc_tab Tabdoc_tabhood" style="display:none;">
     <b>2) Choose your sweets</b>
    </div>
    <div id="Tabdoc_tab3bonnet" class="Tabdoc_tab Tabdoc_tabbonnet" style="display:block;">
     <b>2) Choose your sweets</b>
    </div>
    </td>
    <td class="Tabdoc_tabsp"></td>
    <!--  Tab 4  -->
    <td id="Tabdoc_TAB4" class="Tabdoc_tabTD">
    <div id="Tabdoc_tab4hood" class="Tabdoc_tab Tabdoc_tabhood" style="display:none;">
     <b>3) Personalise</b>
    </div>
    <div id="Tabdoc_tab4bonnet" class="Tabdoc_tab Tabdoc_tabbonnet" style="display:block;">
     <b>3) Personalise</b>
    </div>
    </td>
    <td class="Tabdoc_tabsp"></td>
    <!--  Tab 5  -->
    <td id="Tabdoc_TAB5" class="Tabdoc_tabTD ">
    <div id="Tabdoc_tab5hood" class="Tabdoc_tab Tabdoc_tabhood" style="display:block;">
     <b>Preview &amp; Checkout</b>
    </div>
    <div id="Tabdoc_tab5bonnet" class="Tabdoc_tab Tabdoc_tabbonnet" style="display:none;">
     <b>Preview &amp; Checkout</b>
    </div>
    </td>
    </tr>
    <tr>
    
    <td valign="top" colspan="9" class="Tabdoc_tabcontent">
    
    <!--  Content 1  -->
    <div id="Tabdoc_content1" class="Tabdoc_tabdivcontent" style="display:block;" >
    <img src="images/button_get_started.gif" alt="Let's Get Started"  onclick="Tabdoc_ManageDisplay(2)" class="forward Tabdoc_pointer" style="width:162px;margin:10px 0 10px 0;">
    </div>
    
    <!--  Content 2  -->
    <div id="Tabdoc_content2" class="Tabdoc_tabdivcontent">
     <div id="tab1continue" class="forward Tabdoc_pointer" style="margin-top:20px;margin-right:20px;position:relative;z-index:99;">
      <img src="images/tabs/button_continue.gif" alt="CONTINUE"  onclick="Tabdoc_ManageDisplay(3)">
     </div>
     <div class="back Tabdoc_pointer" style="margin-top:20px;margin-left:20px;position:relative;z-index:99;">
      <img src="images/tabs/button_back.gif" alt="BACK"  onclick="Tabdoc_ManageDisplay(1)">
     </div>
    </div>
    
    <!--  Content 3  -->
    <div id="Tabdoc_content3" class="Tabdoc_tabdivcontent">
     <div class="wrapperAttribsOptions">
       <h3 style="float:left;color:#ed1064;padding:30px 0 0 20px;">Have a browse through our collection</h3>
       <br style="clear:left;" /><br />
      <div style="width:970px;">
       <a href="#" target="_new" title="View all our standard Hard Candy"><img src="/images/tabs/hard-standard.png" alt="View all our standard Hard Candy" style="margin-left:20px;"></a>
       <a href="#" target="_new" title="View all our special Hard Candy"><img src="/images/tabs/hard-special.png" alt="View all our special Hard Candy" style="margin-left:20px;"></a>
       <a href="#" target="_new" title="View all our Organic Gummies"><img src="/images/tabs/organic-gummies.png" alt="View all our Organic Gummies" style="margin-left:20px;"></a>
      </div>
       <br /><br />
       <h3 style="float:left;color:#ed1064;padding-left:20px;">Add your sweets to your box</h3>
       <br style="clear:left;" /><br />
      <table width="100%" cellspacing="0" cellpadding="0" border="0">
      <tr valign="top">
      <td>
    <script language="javascript"> 
    function toggle1(showHideDiv, switchImgTag) {
            var ele = document.getElementById(showHideDiv);
            var imageEle = document.getElementById(switchImgTag);
            if(ele.style.display == "block") {
                    ele.style.display = "none";
    		imageEle.innerHTML = '<img src="/images/tabs/button_open_sweet1.gif">';
            }
            else {
                    ele.style.display = "block";
                    imageEle.innerHTML = '<img src="/images/tabs/button_close_sweet1.gif">';
            }
    }
    function toggle2(showHideDiv, switchImgTag) {
            var ele2 = document.getElementById(showHideDiv);
            var imageEle2 = document.getElementById(switchImgTag);
            if(ele2.style.display == "block") {
                    ele2.style.display = "none";
    		imageEle2.innerHTML = '<img src="/images/tabs/button_open_sweet2.gif">';
            }
            else {
                    ele2.style.display = "block";
                    imageEle2.innerHTML = '<img src="/images/tabs/button_close_sweet2.gif">';
            }
    }
    function toggle3(showHideDiv, switchImgTag) {
            var ele3 = document.getElementById(showHideDiv);
            var imageEle3 = document.getElementById(switchImgTag);
            if(ele3.style.display == "block") {
                    ele3.style.display = "none";
    		imageEle3.innerHTML = '<img src="/images/tabs/button_open_sweet3.gif">';
            }
            else {
                    ele3.style.display = "block";
                    imageEle3.innerHTML = '<img src="/images/tabs/button_close_sweet3.gif">';
            }
    }
    </script>
       <table cellpadding="0" cellspacing="0" border="0" width="100%">
       <tr valign="top">
        <td align="left" width="33%" style="padding-left:20px;">
    <!--  DropDown One  -->
        <div id="headerDivImg">
        <div id="titleTextImg"></div>
        <a id="imageDivLink" href="javascript:toggle1('contentDivImg', 'imageDivLink');">
        <img src="/images/tabs/button_open_sweet1.gif"></a>
       </div>
    <div id="contentDivImg" class="sweetlist" style="display: none;">
    <p>HARD CANDY - STANDARD</p>
    <input name="id[18]" value="81" id="attrib-18-81" type="radio"><label class="attribsRadioButton zero" for="attrib-18-81"> Kola Cubes</label><br />
    <input name="id[18]" value="82" id="attrib-18-82" type="radio"><label class="attribsRadioButton zero" for="attrib-18-82"> Pineapple Cubes</label><br />
    <input name="id[18]" value="79" id="attrib-18-79" type="radio"><label class="attribsRadioButton zero" for="attrib-18-79"> Rhubarb and Custard</label><br />
    <input name="id[18]" value="80" id="attrib-18-80" type="radio"><label class="attribsRadioButton zero" for="attrib-18-80"> Strawberry and Cream</label><br /><br />
    <p>HARD CANDY - SPECIAL</p>
    <input name="id[18]" value="76" id="attrib-18-76" type="radio"><label class="attribsRadioButton zero" for="attrib-18-76"> Fizzy Blueberry</label><br />
    <input name="id[18]" value="61" id="attrib-18-61" type="radio"><label class="attribsRadioButton zero" for="attrib-18-61"> Fruits of the Forest</label><br />
    <input name="id[18]" value="74" id="attrib-18-74" type="radio"><label class="attribsRadioButton zero" for="attrib-18-74"> Lemon and Lime</label><br />
    <input name="id[18]" value="62" id="attrib-18-62" type="radio"><label class="attribsRadioButton zero" for="attrib-18-62"> Pear Drops</label><br />
    <input name="id[18]" value="77" id="attrib-18-77" type="radio"><label class="attribsRadioButton zero" for="attrib-18-77"> Sour Cherry</label><br />
    <input name="id[18]" value="73" id="attrib-18-73" type="radio"><label class="attribsRadioButton zero" for="attrib-18-73"> Wild Strawberry</label><br /><br />
    <p>ORGANIC GUMMIES</p>
    <input name="id[18]" value="85" id="attrib-18-85" type="radio"><label class="attribsRadioButton zero" for="attrib-18-85"> Organic Fruit Cocktail</label><br />
    <input name="id[18]" value="86" id="attrib-18-86" type="radio"><label class="attribsRadioButton zero" for="attrib-18-86"> Organic Jelly Bears</label><br />
    <input name="id[18]" value="83" id="attrib-18-83" type="radio"><label class="attribsRadioButton zero" for="attrib-18-83"> Organic Sour Worms</label><br />
    <input name="id[18]" value="84" id="attrib-18-84" type="radio"><label class="attribsRadioButton zero" for="attrib-18-84"> Organic Sugar Bears</label><br />
    </div>
        </td>
        <td align="center" width="33%">
    <!--  DropDown Two  -->
        <div id="headerDivImg2">
        <div id="titleTextImg2"></div>
        <a id="imageDivLink2" href="javascript:toggle2('contentDivImg2', 'imageDivLink2');"><img src="/images/tabs/button_open_sweet2.gif"></a>
       </div>
    <div id="contentDivImg2" class="sweetlist" style="display: none;">
    <p>HARD CANDY - STANDARD</p>
    <input name="id[19]" value="99" id="attrib-19-99" type="radio"><label class="attribsRadioButton zero" for="attrib-19-99"> Kola Cubes</label><br />
    <input name="id[19]" value="100" id="attrib-19-100" type="radio"><label class="attribsRadioButton zero" for="attrib-19-100"> Pineapple Cubes</label><br />
    <input name="id[19]" value="97" id="attrib-19-97" type="radio"><label class="attribsRadioButton zero" for="attrib-19-97"> Rhubarb and Custard</label><br />
    <input name="id[19]" value="98" id="attrib-19-98" type="radio"><label class="attribsRadioButton zero" for="attrib-19-98"> Strawberry and Cream</label><br /><br />
    <p>HARD CANDY - SPECIAL</p>
    <input name="id[19]" value="94" id="attrib-19-94" type="radio"><label class="attribsRadioButton zero" for="attrib-19-94"> Fizzy Blueberry</label><br />
    <input name="id[19]" value="87" id="attrib-19-87" type="radio"><label class="attribsRadioButton zero" for="attrib-19-87"> Fruits of the Forest</label><br />
    <input name="id[19]" value="92" id="attrib-19-92" type="radio"><label class="attribsRadioButton zero" for="attrib-19-92"> Lemon and Lime</label><br />
    <input name="id[19]" value="88" id="attrib-19-88" type="radio"><label class="attribsRadioButton zero" for="attrib-19-88"> Pear Drops</label><br />
    <input name="id[19]" value="95" id="attrib-19-95" type="radio"><label class="attribsRadioButton zero" for="attrib-19-95"> Sour Cherry</label><br />
    <input name="id[19]" value="91" id="attrib-19-91" type="radio"><label class="attribsRadioButton zero" for="attrib-19-91"> Wild Strawberry</label><br /><br />
    <p>ORGANIC GUMMIES</p>
    <input name="id[19]" value="103" id="attrib-19-103" type="radio"><label class="attribsRadioButton zero" for="attrib-19-103"> Organic Fruit Cocktail</label><br />
    <input name="id[19]" value="104" id="attrib-19-104" type="radio"><label class="attribsRadioButton zero" for="attrib-19-104"> Organic Jelly Bears</label><br />
    <input name="id[19]" value="101" id="attrib-19-101" type="radio"><label class="attribsRadioButton zero" for="attrib-19-101"> Organic Sour Worms</label><br />
    <input name="id[19]" value="102" id="attrib-19-102" type="radio"><label class="attribsRadioButton zero" for="attrib-19-102"> Organic Sugar Bears</label><br />
    </div>
        </td>
        <td align="right" width="33%" style="padding-right:20px;">
    <!--  DropDown Three  -->
        <div id="headerDivImg3">
        <div id="titleTextImg3"></div>
        <a id="imageDivLink3" href="javascript:toggle3('contentDivImg3', 'imageDivLink3');"><img src="/images/tabs/button_open_sweet3.gif"></a>
       </div>
    <div id="contentDivImg3" class="sweetlist" style="display: none;">
    <p>HARD CANDY - STANDARD</p>
    <input name="id[20]" value="117" id="attrib-20-117" type="radio"><label class="attribsRadioButton zero" for="attrib-20-117"> Kola Cubes</label><br />
    <input name="id[20]" value="118" id="attrib-20-118" type="radio"><label class="attribsRadioButton zero" for="attrib-20-118"> Pineapple Cubes</label><br />
    <input name="id[20]" value="115" id="attrib-20-115" type="radio"><label class="attribsRadioButton zero" for="attrib-20-115"> Rhubarb and Custard</label><br />
    <input name="id[20]" value="116" id="attrib-20-116" type="radio"><label class="attribsRadioButton zero" for="attrib-20-116"> Strawberry and Cream</label><br /><br />
    <p>HARD CANDY - SPECIAL</p>
    <input name="id[20]" value="112" id="attrib-20-112" type="radio"><label class="attribsRadioButton zero" for="attrib-20-112"> Fizzy Blueberry</label><br />
    <input name="id[20]" value="105" id="attrib-20-105" type="radio"><label class="attribsRadioButton zero" for="attrib-20-105"> Fruits of the Forest</label><br />
    <input name="id[20]" value="110" id="attrib-20-110" type="radio"><label class="attribsRadioButton zero" for="attrib-20-110"> Lemon and Lime</label><br />
    <input name="id[20]" value="106" id="attrib-20-106" type="radio"><label class="attribsRadioButton zero" for="attrib-20-106"> Pear Drops</label><br />
    <input name="id[20]" value="113" id="attrib-20-113" type="radio"><label class="attribsRadioButton zero" for="attrib-20-113"> Sour Cherry</label><br />
    <input name="id[20]" value="109" id="attrib-20-109" type="radio"><label class="attribsRadioButton zero" for="attrib-20-109"> Wild Strawberry</label><br /><br />
    <p>ORGANIC GUMMIES</p>
    <input name="id[20]" value="121" id="attrib-20-121" type="radio"><label class="attribsRadioButton zero" for="attrib-20-121"> Organic Fruit Cocktail</label><br />
    <input name="id[20]" value="122" id="attrib-20-122" type="radio"><label class="attribsRadioButton zero" for="attrib-20-122"> Organic Jelly Bears</label><br />
    <input name="id[20]" value="119" id="attrib-20-119" type="radio"><label class="attribsRadioButton zero" for="attrib-20-119"> Organic Sour Worms</label><br />
    <input name="id[20]" value="120" id="attrib-20-120" type="radio"><label class="attribsRadioButton zero" for="attrib-20-120"> Organic Sugar Bears</label><br />
    </div>
        </td>
       </tr>
       </table>
      </td>
      </tr>
      </table>
     </div>
     <div class="forward Tabdoc_pointer" style="margin-top:20px;margin-right:20px;position:relative;z-index:99;">
      <img src="images/tabs/button_continue.gif" alt="CONTINUE"  onclick="Tabdoc_ManageDisplay(4)">
     </div>
     <div class="back Tabdoc_pointer" style="margin-top:20px;margin-left:20px;position:relative;z-index:99;">
      <img src="images/tabs/button_back.gif" alt="BACK"  onclick="Tabdoc_ManageDisplay(2)">
     </div>
    </div>
    
    <!--  Content 4  -->
    <div id="Tabdoc_content4" class="Tabdoc_tabdivcontent" style="display:none;">
     <div class="forward Tabdoc_pointer" style="margin-top:20px;margin-right:20px;position:relative;z-index:99;">
       <img src="images/tabs/button_continue.gif" alt="CONTINUE"  onclick="Tabdoc_ManageDisplay(5)">
     </div>
     <div class="back Tabdoc_pointer" style="margin-top:20px;margin-left:20px;position:relative;z-index:99;">
       <img src="images/tabs/button_back.gif" alt="BACK"  onclick="Tabdoc_ManageDisplay(3)">
     </div>
    </div>
    
    <!--  Content 5  -->
    <div id="Tabdoc_content5" class="Tabdoc_tabdivcontent" style="display:none;">
     <div class="back Tabdoc_pointer" style="margin-top:20px;">
       <img src="images/tabs/button_back.gif" alt="BACK"  onclick="Tabdoc_ManageDisplay(4)">
     </div>
    </div>
    <script type="text/javascript" language="JavaScript">
    var idlist = new Array();
    function Tabdoc_ManageDisplay(which) {
    for(var i = 1; i <= 5; i++) {
      if(i == which) {
        document.getElementById('Tabdoc_tab'+i+'hood').style.display = "block";
        document.getElementById('Tabdoc_tab'+i+'bonnet').style.display = "none";
        document.getElementById('Tabdoc_content'+i).style.display = "block";
        document.getElementById('Tabdoc_TAB'+i).style.color = "#FF0000";
        document.getElementById('Tabdoc_TAB'+i).style.backgroundColor = "#FFFFFF";
        }
      else {
        document.getElementById('Tabdoc_tab'+i+'hood').style.display = "none";
        document.getElementById('Tabdoc_tab'+i+'bonnet').style.display = "block";
        document.getElementById('Tabdoc_content'+i).style.display = "none";
        document.getElementById('Tabdoc_TAB'+i).style.color = "#CC0000";
        document.getElementById('Tabdoc_TAB'+i).style.backgroundColor = "#DDDDDD";
        }
      }
    }
    
    function Tabdoc_Initialize() {
    for(var i = 1; i <= 5; i++) {
      idlist.push('Tabdoc_tab'+i+'hood');
      idlist.push('Tabdoc_tab'+i+'bonnet');
      idlist.push('content'+i);
      }
    Tabdoc_ManageDisplay(1);
    }
    Tabdoc_Initialize();
    </script>
    <!--  eof TAB WINDOWS  -->
    Where could I add your snippet or does it need to be changed?

    Thanks again for your help.
    --------------------
    Jay

  • #4
    Regular Coder
    Join Date
    Mar 2008
    Location
    London
    Posts
    152
    Thanks
    4
    Thanked 42 Times in 42 Posts
    my code snippet will be added just after your function definition -
    Code:
    function Tabdoc_ManageDisplay(which) {

  • #5
    4jd
    4jd is offline
    New Coder
    Join Date
    Sep 2011
    Posts
    25
    Thanks
    4
    Thanked 0 Times in 0 Posts
    I am trying to use this function. Its hiding my 'continue' button and making it visible when a radio button is selected but I would like it to be visible only if 1 of each group is selected.

    Not sure if my markup is correct as I am still learning JS.

    Code:
    <script type="text/javascript" language="JavaScript">
      var tab3_button = document.getElementById('tab3continue');
      tab3_button.style.visibility = 'hidden';
    
      function change(switchElement) {
            if ((switchElement.value == '81' || '82' || '79' || '80' || '76' || '61' || '74' || '62' || '77' || '73' || '85' || '86' || '83' || '84')&&(switchElement.value == '99' || '100' || '97' || '98' || '94' || '87' || '92' || '88' || '95' || '91' || '103' || '104' || '101' || '102')&&(switchElement.value == '117' || '118' || '115' || '116' || '112' || '105' || '110' || '106' || '113' || '109' || '121' || '122' || '119' || '120')) {
                    tab3_button.style.visibility = 'visible';
            } else {
                    tab3_button.style.visibility = 'hidden';  
            }             
    }
    </script>


  •  

    Posting Permissions

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