JavaScript - Checkbox Showdiv /hidediv
Similar TutorialsCan anyone look at some code to tell me what I am doing wrong. The hide and show feature work if the item is on the same page. If I want to have a link drop to another page, this code does not work. 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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Peake Healthcare Innovations-Company</title> <script type="text/javascript"> <!-- function MM_swapImgRestore() { //v3.0 var i, x, a = document.MM_sr; for (i = 0; a && i < a.length && (x = a[i]) && x.oSrc; i++) x.src = x.oSrc; } function MM_preloadImages() { //v3.0 var d = document; if (d.images) { if (!d.MM_p) d.MM_p = new Array(); var i, j = d.MM_p.length, a = MM_preloadImages.arguments; for (i = 0; i < a.length; i++) if (a[i].indexOf("#") != 0) { d.MM_p[j] = new Image; d.MM_p[j++].src = a[i]; } } } function MM_findObj(n, d) { //v4.01 var p, i, x; if (!d) d = document; if ((p = n.indexOf("?")) > 0 && parent.frames.length) { d = parent.frames[n.substring(p + 1)].document; n = n.substring(0, p); } if (!(x = d[n]) && d.all) x = d.all[n]; for (i = 0; !x && i < d.forms.length; i++) x = d.forms[i][n]; for (i = 0; !x && d.layers && i < d.layers.length; i++) x = MM_findObj(n, d.layers[i].document); if (!x && d.getElementById) x = d.getElementById(n); return x; } function MM_swapImage() { //v3.0 var i, j = 0, x, a = MM_swapImage.arguments; document.MM_sr = new Array; for (i = 0; i < (a.length - 2); i += 3) if ((x = MM_findObj(a[i])) != null) { document.MM_sr[j++] = x; if (!x.oSrc) x.oSrc = x.src; x.src = a[i + 2]; } } function goto(pID) { document.getElementById(pID).scrollIntoView(); } function showDiv(pdiv) { switch (pdiv.toLowerCase()) { case "company": document.getElementById(pdiv).style.display = 'inline'; document.getElementById("companysplash").style.display = 'inline'; document.getElementById("codiv").style.display = 'none'; document.getElementById("performance").style.display = 'none'; document.getElementById("differentiates").style.display = 'none'; document.getElementById("multiuse").style.display = 'none'; break; case "codiv": document.getElementById(pdiv).style.display = 'inline'; document.getElementById("company").style.display = 'none'; document.getElementById("performance").style.display = 'none'; document.getElementById("differentiates").style.display = 'none'; document.getElementById("companysplash").style.display = 'none'; document.getElementById("multiuse").style.display = 'inline'; break; case "performance": document.getElementById(pdiv).style.display = 'inline'; document.getElementById("company").style.display = 'none'; document.getElementById("codiv").style.display = 'none'; document.getElementById("differentiates").style.display = 'none'; document.getElementById("companysplash").style.display = 'none'; document.getElementById("multiuse").style.display = 'inline'; break; case "differentiates": document.getElementById(pdiv).style.display = 'inline'; document.getElementById("company").style.display = 'none'; document.getElementById("codiv").style.display = 'none'; document.getElementById("performance").style.display = 'none'; document.getElementById("multiuse").style.display = 'inline'; document.getElementById("companysplash").style.display = 'none'; break; } } //--> </script> <script type="text/javascript" src="../dropdowntabs/dropdowntabfiles/dropdowntabs.js"></script> <link href="styles/main.css" rel="stylesheet" type="text/css" /> <link rel="stylesheet" type="text/css" href="script/new_droptabs.css"> </head> <body bgcolor="#999999" onload="MM_preloadImages('images/rt_bar_glow_repeater.gif')"> <table width="967" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#FFFFFF"> <tr> <td> <script type="text/javascript"> //SYNTAX: tabdropdown.init("menu_id", [integer OR "auto"]) tabdropdown.init("colortab", 3) </script> <div id="dropmenu" class="top-menu"> <ul> <li><a href="index.html"><span class="whitelink">Home</span></a></li> <li><a href="company.html" rel="dropmenu1_b"><span class="whitelink">Company</span></a></li> <li><a href="community.html" rel="dropmenu2_b"><span class="whitelink">Community</span></a></li> <li><a href="services.html" rel="dropmenu3_b"><span class="whitelink">Services</span></a></li> <li><a href="solutions.html" id="last-link" tile="Solutions" rel="dropmenu4_b"><span class="whitelink">Solutions</span></a></li> </ul> </div> <!--1st drop down menu/Company --> <div id="dropmenu1_b" class="dropmenudiv_b"> <a href="javascript:%20showDiv('performance');">Peake Performance</a> <a href="javascript:%20showDiv('differentiates');">What Differentiates Us</a> </div> <!--2nd drop down menu/Community --> <div id="dropmenu2_b" class="dropmenudiv_b" style="width: 150px;"> <a href="../dropdowntabs/Community.html" id="collaboration">Collaboration</a> </div> <!--3rd drop down menu/Services --> <div id="dropmenu3_b" class="dropmenudiv_b" style="width: 150px;"> <a href="javascript:%20showDiv('singleplace');">Acessability</a> <a href="javascript:%20showDiv('portfolio');">Peake Portfolio</a> </div> <!--4th drop down menu/Solutions --> <div id="dropmenu4_b" class="dropmenudiv_b" style="width: 150px;"> <a href="javascript:%20showDiv('strategy');">Imaging Strategy</a> <a href="javascript:%20showDiv('imagesharing');">Image Sharing</a> </div> </td> </tr> <tr> <td> <!--PBanners to go here--> <table width="967" border="0" cellspacing="0" cellpadding="0"> <tr> <td> <div id="affiliate">An affiliate of Harris Corporation and Johns Hopkins Medicine</div></td> </tr> <tr> <td> <div style="display: inline;" id="companysplash"> <img src="images/focal_layered.jpg" alt="Peake Healthcare Innovations" width="967" height="195" border="0" usemap="#Map" /> </div> <div style="display: none;" id="multiuse"> <img src="images/Peake_Multiuse_Banner.jpg" width="967" height="140" alt="Peake Healthcare Innovations" /> </div> </td> </tr> </table> <!--End Banners here--> </td> </tr> <tr> <td height="29"> <table width="967" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="728" valign="top"> <!--Start Main Content Company --> <div style="display: inline;" id="company"> <div class="title"> Headline Goes Here</div> <fieldset style="float:right; width:200px; height:400px; border:0;"> <img src="images/Service_Assets_Placeholder.jpg" width="160" height="111" alt="Service Assets Placeholder" /><br/> <div class="callout_title">THE PEAKE TEAM</div> <div class="callout_text">Read more about the <br/>Peake Team<i></i></div> <div class="callout_link"><a href="http://www.harris.com">MORE</a> ></div> <br/> <img src="images/Harris_Corporate_Building.jpg" width="160" height="111" alt="Service Assets Placeholder" /><br/> <div class="callout_title">PEAKE PARTNERS</div> <div class="callout_text">Delivering a way to better healthcare by working together<i></i></div> <div class="callout_link"><a href="http://www.harris.com">MORE</a> ></div> <p> </p> </fieldset> <div class="subhead">Subhead to go here</div> <div class="bodylg">Founded in March 2011, Baltimore-based Peak Healthcare Innovations (Peake) offers the first complete, cloud-based medical image management solution for global markets. </div> <br/> <div class="content">Peake was formed as a joint venture between two widely recognized market leaders: Johns Hopkins Medicine and Harris Healthcare Solutions. Peake blends the prowers of Hopkins' clinical and research expertise with Harris Corporation's proven track record in the application of Interoperability best practices, secure communications and managed services for national IT infrastructures. <a href="javascript:%20showDiv('codiv');">LEARN MORE</a> ></div></div> <br/> </div> <!--End Main Content Company --> <br/> <!--Start Secondary Content Company --> <div style="display: none;" id="codiv"> <table width="291px" border="0" cellpadding="0" cellspacing="0" class="callout_table" style="float:left"> <tr> <td height="44" colspan="3"><img src="images/left_placeholder.gif" width="291" height="325" /></td> </tr> <tr> <td height="35" colspan="3" class="callout_header">Related Items</td> </tr> <tr> <td width="49%" height="88"> <fieldset style="padding:5px; height:115px;"> <div class="callout_title">PEAKE PERFORMANCE</div> <div class="callout_text">Peake gets it–<br/><i>Physicians never wait</i></div> <div class="callout_link"><a href="javascript:%20showDiv('performance');">MORE</a> ></div> </fieldset> </td> <td width="2%" height="88"> </td> <td width="49%"> <fieldset style="padding:5px; height:115px;"> <div class="callout_title">PEAKE DIFFERENCES</div> <div class="callout_text">An uncommon solution provider in a rapidly evolving marketplace</div> <div class="callout_link"> <a href="javascript:%20showDiv('differentiates');">MORE</a> ></div> </fieldset> </td> </tr> </table> <img src="images/The_Peake_Company_Title.jpg" width="350" height="22" alt="The Peake Company" /> <div class="subhead">Unprecedented Performance at the point of care.</div> <div class="content">Peake's mission is to improve the quality of patient care and the efficiency of the patient care delivery process through transformatice innovation in health information management. By building on the strength of open-source software, Peak will could-enable the medical imaging practices of hospitals, integrated delivery networks, and health information exchanges with unprecedented performance at the point of care. Our secure, redundant, reliable cloud-based solutions facilitate colllaboration within and accross enterprise boundaries connecting care providers and patients like never before.<br/></div> <div class="content"> <fieldset style=" padding-left:7px; padding-right:7px; padding-top:3px;"> <div class="callout_titleb">PEAKE GENERATES VALUE FOR THE HEALTHCARE ENTERPRISE IN TWO WAYS:</div> <ul> <li>The significant decuction in cost of imaging operations </li> <li>An improvement of access to mission critical information</li> </ul> </fieldset> <br/> This is achieved through our partnership-oriented business model that places emphasis on performance and services. With no up front capital expense and scaled on the performance of your imaging businemass, our world class services are provided as an essentail utility in a pure, operational expense model. We combine our extensive development efforts with the industry's best applications to empower healthcare providers with choice. The choice of clinical, diagnostic and advanced 3D solutions as well as other workflow optimizing services that speed the adoption of technology and the care delivery process. Our customers now have technology packaged as a flexible service eliminating the burden associated with "vendor lock" to best meet the needs of clinicians, patients and communities today, tomorrow, and in the future. </div> </div> <!--End Secondary Content Company --> <!--Start Secondary Performance Content Company --> <div style="display: none;" id="performance"> <table width="291px" border="0" cellpadding="0" cellspacing="0" class="callout_table" style="float:left"> <tr> <td height="44" colspan="3"><img src="images/left_placeholder.gif" width="291" height="325" /></td> </tr> <tr> <td height="35" colspan="3" class="callout_header">Related Items</td> </tr> <tr> <td width="49%" height="88"> <fieldset style="padding:5px; height:115px;"> <div class="callout_title">PEAKE PERFORMANCE</div> <div class="callout_text">Peake gets it–<br/><i>Physicians never wait</i></div> <div class="callout_link"><a href="javascript:%20showDiv('performance');">MORE</a> ></div> </fieldset> </td> <td width="2%" height="88"> </td> <td width="49%"> <fieldset style="padding:5px; height:115px;"> <div class="callout_title">PEAKE DIFFERENCES</div> <div class="callout_text">An uncommon solution provider in a rapidly evolving marketplace</div> <div class="callout_link"><a href="javascript:%20showDiv('differentiates');">MORE</a> ></div> </fieldset> </td> </tr> </table> <div class="title"> Headline Goes Here</div> <div class="subhead">Achieve Peake Performance in Your Imaging Practice</div> <div class="content">Peake Healthcare Innovations believes that enterprise imaging solutions should be based on strong financial value, effective clinical utility and uncompromising reliability. While most vendors charge millions of dollars for software applications that place a significant burden on IT staff and disrupt clinical practice, Peake provides the world's most scalable, powerful and versatile Vendor Neutral Archive (VNA) at NO COST of software. Peake builds on the strength and popularity of DCM4CHEE, an open source software project established in 2000, as the basis for a commercial, cloud-based archiving solution. By returning Peake's substantive improvements to this proven application back to the healthcare community, our solutions uniquely offer what healthcare providers have been seeking from their vendor partnerships all along: <strong>choice</strong>. </div> <div class="content"> While healthcare providers, health information exchanges and accountable care organizations are unique in their size, scope and operations, most face the same challenges–increasing costs, decreasing reimbursement and changing regulation. Peake is dedicated to providing a complete image management solution offering to meet your needs. From cross-enterprise image exchange to clinical, diagnostic, and advanced 3D visualization, to a unified clinical image archive solution, disaster recovery and business continuity, Peake has what you need with the performance, security and reliability you would expect from an on-premise solution–at a fraction of the cost.</div> <div class="content"><strong>Connect, communicate, and collaborate within the enterprise and across the continuum of care.<br/> eake gets it—<i>Physicians never wait</i>.</strong> </div> </div> <!--End Secondary Performance Content Company --> <!--Start Secondary Differences Content Company --> <div style="display: none;" id="differentiates"> <table width="291px" border="0" cellpadding="0" cellspacing="0" class="callout_table" style="float:left"> <tr> <td height="44" colspan="3"><img src="images/left_placeholder.gif" width="291" height="325" /></td> </tr> <tr> <td height="35" colspan="3" class="callout_header">Related Items</td> </tr> <tr> <td width="49%" height="88"> <fieldset style="padding:5px; height:130px;"> <div class="callout_title">PEAKE PERFORMANCE</div> <div class="callout_text">Peake gets it–<br/><i>Physicians never wait</i></div> <div class="callout_link"><a href="javascript:%20showDiv('performance');">MORE</a> ></div> </fieldset> </td> <td width="2%" height="88"> </td> <td width="49%"> <fieldset style="padding:5px; height:130px;"> <div class="callout_title">ABOUT PEAKE </div> <div class="callout_text">The first complete cloud-based medical image management solutions for global markets</div> <div class="callout_link"><a href="javascript:%20showDiv('company');">MORE</a> ></div> </fieldset> </td> </tr> </table> <div class="title"> Headline Goes Here</div> <div class="subhead">What differentiates us?</div> <div class="content">Have no doubt, Peake is an uncommon solution provider in a rapidly evolving commercial marketplace. Unlike vendors that offer costly, siloed, often proprietary, software applications, Peake partners with our customers to create a unique solution that delivers the clinical applications and workflow your medical staff require as a service–improving the cost and effectiveness of care delivery. This innovative approach provides the flexibility and choice needed to continually improve your competitiveness in an otherwise uncertain reimbursement environment.<br/><br/> <fieldset style="padding:8px;"> <div class="callout_title">ALL OF OUR SERVICE OFFERINGS:</div> <ul> <li>Operate on a standards-based, highly secured, 3x redundant cloud platform</li> <li>Enhance and augment standards related to DICOM, IHE, and HL7 </li> <li>Were developed with unique technologies to accelerate and improve the performance and reliability of conventional image management solutions</li> <li>Provide a simple, flexible operational cost basis for delivery–no upfront capital is required</li> <li>Reduce the cost associated with medical imaging information technology by 15-30% annually</li> <li>Combine the experience and knowledge of Harris Corporation and Johns Hopkins Medicine to provide you a trusted, technology services partner </li> </ul> </fieldset> </div> </div> <!--End Secondary Differences Content Company --> </td> <!--End Main Content--> <!--Start What's New Column--> <td width="239" rowspan="2" valign="top"> <table width="239" border="0" cellspacing="0" cellpadding="0"> <tr> <td class="whatsnew"> </td> </tr> <tr> <td> <img src="images/wedge.gif" width="238" height="13" /></td> </tr> <tr> <td colspan="3" height="45px" class="frame"> <div class="rtbarheader">LATEST NEWS</div> <p class="rtbar">Check back soon for the latest news.</p> </td> </tr> <tr> <td colspan="3" height="45px" class="frame"> <div class="rtbarheader">CURRENT DOWNLOADS</div> <p class="rtbar">Check back soon for downloads.</p> </td> </tr> <tr> <td colspan="3" height="158px" class="frame" > <div class="rtbarheader">UPCOMING EVENTS</div> <p class="rtbar">Peake will be at RSNA 2011 on Nov. 27–Dec. 2, 2011 for the 97th Scientific Assembly and Annual Meeting.</p> <p class="rtbar">Meet Peake at the HIMSS12 Annual Conference and Exhibition on Feb. 20–24, 2012 at the Venetian Sands Expo Center in Las Vegas, NV.</p> </td> </tr> <tr> <td colspan="3" height="7"><img src="images/whats_new_hairline_bottom.gif" width="238" height="7" /></td> </tr> </table> </td> <!--End What's New Column--> </tr> </table> </td> </tr> <tr> <td height="214"> <!--Footer input to go here --> </td> </tr> </table> <map name="Map" id="Map"> <area shape="rect" coords="11,43,239,155" href="index.html" target="_self" alt="Peake Healthcare Innovations" /> </map> </body> </html> <!--This script here will tell the code which instance to show first--> <script> showDiv('company'); </script> <script type="text/javascript"> //SYNTAX: tabdropdown.init("menu_id", [integer OR "auto"]) tabdropdown.init("dropmenu") </script> <!--End Section--> So here's what i want to do: i have 2 checkboxes, when Checkbox A is checked, i want to automatically check the checkbox B. When A is unchecked, then uncheck B how can i do that? thanks a lot ! Hi, If I have two check-boxes and one is already checked and then the is checked, how would I get it to uncheck the first one using JavaScript. Thanks, Cs1h I am making a google CSE for a client site and I need to concatenate checkbox values together on the end of another form value. So I have a text box and the checkboxes: Code: <input name="q" cid="q" size="25" maxlength="50" value"off road tires"> <input type="checkbox" name="q" id="q" value="cooper|hankook" /> <input type="checkbox" name="q" id="q" value="Mickey Thompson|Bfgoodrich|GBC" /> <input type="checkbox" name="q" id="q" value="Hoosier|Nitto" /> For Google the URL string needs to be like this: Code: results.html?q=off road tires AND inurl:cooper|hankook|Mickey Thompson|Bfgoodrich|GBC this string says the person did not check the last box. I am having a hard time trying to do this. If you guys know a better way to accomplish the same thing I am all ears but I thought I would bring it to the experts and see what they had to say. Thanks for the help! Hi, I have a checkbox and when I "check" I want to add a <p> inside of an <div> and when I "uncheck" I want to remove the <p> from <div>. I've tried this but it's not working Code: $('#checkbox').change(function(){ $('div').html('<p>Some Text</p>'); }, function() { $('div').remove('<p>Some Text</p>'); }); I hope you can help.. Regards Looking for a simple method to Toggle textbox yes/no using CheckBox This example does not work! But I hope this will help explain what I am trying to do Code: <SCRIPT LANGUAGE="JavaScript"> function YesOrNo() { if(document.formname.checkboxname.checked) { document.formname.textname.disabled='Yes'; } else { document.formname.textname.disabled='No'; }} </SCRIPT> <form name="formname"> <input type="text" size="10" name="textname"> <input type="checkbox" onclick="YesOrNo()" name="checkboxname" value="Yes"> </form> I was trying to get total amount from these all checkbox, when I submit, but I don't know somewhere wrong. Please help me out. Here is my code: <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title> Form </title> <script language = "JavaScript"> // The event handler functions for the check boxes function appleHandler() { var number = document.orderForm.apples.value; total = total + number * 0.59; } function orangeHandler() { var number = document.orderForm.oranges.value; total = total + number * 0.49; } function bananaHandler() { var number = document.orderForm.bananas.value; total = total + number * 0.39; } // The event handler function to produce the total cost message // when "submit" is clicked function finish() { total = total * 1.05; alert("Thank you for your order \n" + "Your total cost is: $" + total + "\n"); } </script> </head> <body> <h3> Order Form </h3> <form name = "orderForm" onSubmit = "finish()"> <p> <input type = "checkbox" name = "apples" size = "3" onClick = "appleHandler()" /> Apples </p><p> <input type = "checkbox" name = "oranges" size = "3" onClick = "orangeHandler()" /> Oranges </p><p> <input type = "checkbox" name = "bananas" size = "3" onClick = "bananaHandler()" /> Bananas </p><p> <input type = "reset" name = "reset" /> <input type = "submit" name = "submit" /> </p> </form> </body> </html> Hello I have a site of classifieds ads.... user is choosing what he want to see/search and then a table is printed on the screen(with all the requested results) My question is... Is there a way to add a "CHECK BOX" to each of the ads and the user is checking what he wants to see later on. after he will have a button "see my checked ads" and a page will open with ONLY the ads that he checked before Any suggestions? Thanks a lot Danny Hi all, Can anyone point me in the right direction for some sample code that when the selection on a checkbox changes, either writes or removes some content? In this instance, when the checkbox is unchecked, I want more table rows and columns written with the relevant data within them. Then when checked, I want this data removed. Many thanks Hi everyone; I have created a JavaScript function to show either a enabled or a disabled text input field depending on whether a checkbox has been clicked or not. It works great for that purpose. However, when I use it for more than one text input field and I submit the form, it goes back to its disabled form. This is a problem if you by mistake submit the form without filling all the fields. As I said, the submit button makes the form go disabled. Is there a way to either not have the form go disabled after submission or to have a "Oncheck" function so I can use $_SESSION to keep the checked attribute? Thanks in advance for all your help Code: <html> <head> <style type="text/css"> #Active { display:none; } </style> <script type="text/javascript"> function toggle() { if (document.getElementById) { if (document.getElementById("checkbox").checked == true) { document.getElementById("Active").style.display = "block"; document.getElementById("Inactive").style.display = "none"; } else { document.getElementById("Inactive").style.display = "block"; document.getElementById("Active").style.display = "none"; } } } </script> </head> <body> <?php echo "Add Field"; echo "<input type=\"checkbox\" name=\"check\" id=\"checkbox\" onClick=\"toggle();\" value=\"v\"/>"; echo "<form method=\"post\">"; echo "<div id=Active>"; if(isset($_SESSION['test']) && $_SESSION['test']!="") { echo "<input name=\"test\" value=\"". $_SESSION['test']."\" type=\"text\" />"; } elseif(isset($_POST['test']) && $_POST['test']!="") { echo "<input name=\"test\" value=\"". $_POST['test']."\" type=\"text\"/>"; } else { echo "<input name=\"test\" type=\"text\"/>"; } echo "<input type=\"text\" name=\"test2\" >"; echo "</div>"; echo "<div id=Inactive>"; echo "<input type=\"text\" disabled>"; echo "<input type=\"text\" disabled>"; echo "</div>"; echo "<input type=\"submit\">"; echo "</form>"; $test = $_POST['test']; $_SESSION = $_POST['test']; $test2 = $_POST['test2']; $_SESSION = $_POST['test2']; echo $test; ?> </body> </html> Hi, i have the next code: PHP Code: Code: <span id="review-buttons-container" class="a-center"> <input type="image" src="<?php echo $this->getSkinUrl('images/btn_place_order.gif') ?>" onclick="review.save();" value="<?php echo $this->__('Place Order') ?>" /> </span> </p> </div> <script type="text/javascript"> //<![CDATA[ var review = new Review('<?php echo $this->getUrl('checkout/onepage/saveOrder') ?>', '<?php echo $this->getUrl('checkout/onepage/success') ?>', $('checkout-agreements')); //]]> </script> and i add the follow JavaScript code to create checkbox (the idea is that only when you with the checkbox checked, the button work) i try: PHP Code: Code: <span id="review-buttons-container" class="a-center"> <form action="" onSubmit="return check(this);"> <input name="chkbox" value="please make sure i'm checked" type="checkbox" /> <input type="image" src="<?php echo $this->getSkinUrl('images/btn_place_order.gif') ?>" onclick="review.save();" value="<?php echo $this->__('Place Order') ?>" /> </form> </span> </p> </div> <script type="text/javascript"> //<![CDATA[ function check(form){ if( form.chkbox.checked ) return true; else{ alert("please check the checkbox"); return false; } } var review = new Review('<?php echo $this->getUrl('checkout/onepage/saveOrder') ?>', '<?php echo $this->getUrl('checkout/onepage/success') ?>', $('checkout-agreements')); //]]> </script> but its not work for me my javascript knowledge is not so good, please help me to create this checkbox) Thanks. Hi, I have the following codes but my checkbox is not appearing. The values of the checkbox do print out in the alert. Can anyone tell me what is wrong with it? Thank you! Code: var table = document.getElementById('maintable'); var i; // iterator var item; // pointer to item in received list for(i = 0; (item = contacts.ReturnValue.getNext()) != undefined; ++i) { table.insertRow(i + 1); var result = "<td>"; if(item.FirstName != undefined) { result += item.FirstName.Value; } result += "</td><td>"; if(item.LastName != undefined) { result += item.LastName.Value; } result += "</td><td>"; if(item.MobilePhoneGen != undefined) { result += item.MobilePhoneGen.Value; } result += "</td><td>"; if(item.EmailGen != undefined) { result += item.EmailGen.Value; } var td1 = document.createElement("td"); var chkbox = document.createElement('input'); chkbox.type='Checkbox'; table.rows[i + 1].innerHTML = result; chkbox.value=item.MobilePhoneGen.Value; td1.appendChild(chkbox); alert(chkbox.value); } Hey guys, I am having a bit of an issue here. I have a form which has 3 checkboxes in it: (sorry, ignore the asp) Code: <input name="certs" id="certs" type="checkbox" <% If certs="on" Then Response.Write("checked=""checked""") %> /> <input name="nocerts" id="nocerts" type="checkbox" <% If nocerts="on" Then Response.Write("checked=""checked""") %> /> <input name="certsna" id="certsna" type="checkbox" <% If certsna="on" Then Response.Write("checked=""checked""") %> /> Anyways, I want to enforce the following: - Only one checkbox can be checked from these 3, no more - At least one checkbox must be checked before submission I have found a couple small scripts to validate that at least one is pressed, but I do not know how to make sure no more than one is pressed, and how to combine scripts is beyond me. Can anyone offer any assistance? Is this difficult to do? Hello all, I usually try and solve my problems by reading all post but i i'm having problem trying to find a solution my problem. I have a simple form in html which presents to the user 2 checkbox's named cash or cheque depending on which answer he gives will present to him 2 different textbox. My problem is i only want the user to be able to select one of the two checkboxes and also i would like the resulting checkbox selected to be placed on the same row. Hope this makes sense!!! I'm only a beginner in javascript and i've found some of the following code on the net but i don't know how to ammend it so that it does what i need it to do. Here is the code: Code: <HTML> <HEAD> <TITLE>Document Title</TITLE> <script> <!-- function c(){} function getresultPay(){ if(document["schDetails"]["chkCash"].checked){ document.getElementById("shwCash").style.visibility="visible" } else{ document.getElementById("shwCash").style.visibility="hidden" } } function d(){} function getresultChex(){ if(document["schDetails"]["chkcheque"].checked){ document.getElementById("shwcheque").style.visibility="visible" } else{ document.getElementById("shwcheque").style.visibility="hidden" } } //--> </script> </HEAD> <BODY> <FORM NAME="schDetails"> <table border="1" width="457"> <tr> <td width="447" align="left" colspan="5" height="12"></td> </tr> <tr> <td width="187" align="left" height="22">Amount to Pay</td> <td width="26" align="center" height="22">:</td> <td width="221" height="22" colspan="3"> <input type = text name ="txtPurCode" tabindex= 25 size="20"></td> </tr> <tr> <td width="187" align="left" height="20">How would you like to pay</td> <td width="26" height="20" align="center"><input type="checkbox" name="chkCash" value="ON" onclick = "c() ; getresultPay()"></td></td> <td width="66" height="20" align="center">Cash</td> <td width="35" height="20" align="center"><input type="checkbox" name="chkcheque" value="ON" onclick = "d() ; getresultChex()"></td></td> <td width="108" height="20" align="center">Cheque</td> </tr> <tr id="shwCash" style="visibility:hidden"> <td width="187">Cash to Pay</td> <td width="26" align="center" height="22">:</td> <td width="221" colspan="3"> <input type = text name ='txtGRTNo' tabindex = 19 size="20"></td> </tr> <tr id="shwcheque" style="visibility:hidden"> <td width="187">Cheque to Pay</td> <td width="26" align="center" height="22">:</td> <td width="221" colspan="3"> <input type = text name ='txtGRTNo' tabindex = 19 size="20"></td> </tr> <tr> <td width="447" align="left" colspan="5" height="12"></td> </tr> </table> </FORM> </BODY> </HTML> I would really appricate if someone could solve this for me. Regards Hi thier, I am using PHP to generate a page with a list of checkbox's on it. Then I am using JavaScript to validate that the user has selected at lest 1 of the given box's before I do a post back. But I cannot get my Javascript to see my CheckBox Array. Any help you can offer would be very useful thank you all in advance. Here is my PHP code used to build to Checkbox list. Code: while ($row = mysql_fetch_array($data, MYSQL_ASSOC)) { if(is_null($row['Team_Number'])) { $str1 = sprintf('<input type="checkbox" name=\'People\' value="%s">',$row['Member_ID']); } else if($row['Team_Number'] == $_REQUEST['T']) { str1 = sprintf('<input type="checkbox" name=\'People\' value="%s" checked>',$row['Member_ID']); } else { $str1 = sprintf('<input type="checkbox" name=\'People\' value="%s">',$row['Member_ID']); } $str = sprintf('%s,%s (%s)',$row['First'],$row['Last'],$row['Nick_Name']); echo('<tr><td width ="10%" align="center">'); echo($str1); echo('</td><td width="90%" align="Left">'); echo($str); echo('</td >'); echo('</tr></td>'); } And here is my Javascript, I've added the whole function incase it's not clear just from a code segment. Code: function TeamSetup() { var required = document.form1.BowlersPerTeam.value; var total = document.form1.People.length; var Tm = document.form1.TeamName.value; var cnt = 0; var peopleIDs = ""; var test = document.getElementsByName('People'); if(isArray(document.form1.People)) { for(var i=0; i < total; i++) { if(document.form1.People[i].checked) { if(peopleIDs.length > 0) { peopleIDs = peopleIDs +","; } peopleIDs = peopleIDs + document.form1.People[i].value.toString(); cnt++; } } } else { if(document.form1.People.checked) { cnt=1; peopleIDs = peopleIDs + document.form1.People.value.toString(); } } if(Tm.length > 0) { if(cnt == required || cnt > 0) { //Hand off to next step for completeing Processing. var myForm = document.createElement("form"); myForm.action=window.location; myForm.method="Post"; myForm.appendChild(createformInput("Process","PP")); myForm.appendChild(createformInput("people",peopleIDs)); myForm.appendChild(createformInput("Team",GetQueryString("T"))); myForm.appendChild(createformInput("League",GetQueryString("L"))); myForm.appendChild(createformInput("TeamName",Tm)); document.body.appendChild(myForm); myForm.submit(); } else { alert('You need to Select at least 1 player'); } } else { alert('You need to enter the team name!'); } } Hi, I want to check all checkboxes using one main checkbox. Then, the checkboxes will be disabled. But then, when the user unchecks the main checkbox, it must revert all the checkboxes to be enabled. How do I do so? 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"> <head> <title>TSPL Admin</title> <script type='text/javascript'> function checkUncheckAll(checkAllState, chkbxGroup) { // Check that the group has more than one element if(chkbxGroup.length > 0) { // Loop through the array for (i = 0; i < chkbxGroup.length; i++) { chkbxGroup[i].checked = checkAllState.checked; } document.getElementById("Checkbox7").disabled = true; document.getElementById("Checkbox8").disabled = true; document.getElementById("Checkbox9").disabled = true; document.getElementById("Checkbox10").disabled = true; document.getElementById("Checkbox11").disabled = true; document.getElementById("Checkbox12").disabled = true; document.getElementById("Checkbox13").disabled = true; document.getElementById("Checkbox14").disabled = true; } else { // Single element so not an array chkbxGroup.checked = checkAllState.checked; } } </script> <style type ="text/css"> .style42 { border-style: solid; border-width: 1px; margin-left: 10px; width: 135px; border-color: #8181F7; text-align: left; float:left; } .style45 { float: left; } </style> </head> <body> <form id="form1" method="post" action="default.aspx"> <br /> <div class="style19"> <tr> <td align="left"> <div class="style45"> <input id="Checkbox6" name="checkall" onclick="checkUncheckAll(this, grp1);" type="checkbox" />All </div> <div class="style42"> <input name="grp1" id="Checkbox7" type="checkbox" />Account Admin<br /> <input name="grp1" id="Checkbox8" type="checkbox" />Network Admin<br /> <input name="grp1" id="Checkbox9" type="checkbox" />Organization Admin<br /> <input name="grp1" id="Checkbox10" type="checkbox" />Super Admin<br /> </div> <div class="style42"> <input name="grp1" id="Checkbox11" type="checkbox" />Schema Admin<br /> <input name="grp1" id="Checkbox12" type="checkbox" />Troubleshooting Admin<br /> <input name="grp1" id="Checkbox13" type="checkbox" />Helpdesk Admin<br /> <input name="grp1" id="Checkbox14" type="checkbox" />Online Admin<br /> </div> </td> </tr> </div> </form> </body> </html> Hi. I have a list of checkboxes with Ids that go something like; chk_AGE=16 chk_AGE=17 chk_AGE=18 chk_GENDER=MALE chk_GENDER=FEMALE chk_RANK=OFFICER chk_RANKE=OTHER When a user checks/unchecks '16' (for example), I want javascript to look up how many checkboxes in my form have an Id that begins with "chk_AGE" and return the number in an alert box ("3" in this case). If my user had checked/unchecked "Officer" an alert box would return "2" as there are 2 checkboxes that begin "chk_RANK". Can someone please help with this? I am a complete javascript beginner. |