JavaScript - Checkbox Toggle To Turn Off A Javascript Element
Im creating a portfolio site for myself that my have gotten a little too ambitious but I'd still like to make this work.
My main site loads a video demo reel using the new <video> tag and to make it look cooler has an "ambilight" television effect around it. For usability and for users that find it annoying or distracting I want a toggle to turn the effect off. I have my checkbox created as well as all the effects working for it. Here is a piece of the main code as well as a link to the ambilight.js file Code: <label name="ambilightToggle"> <input type="checkbox" name="toggle"/> <div class="toggle-switch"> <div class="handle"></div> <div class="track"> <span>OFF</span><span>ON</span> </div> </div> </label> </div> </div> <div id="main" class="clearfix"> <div id="video-edge"> <img id="ribbon" width="112" height="112" alt="Demo Reel Ribbon" src="img/ribbon-demoreel.png"> <div id="video-wrap" class="video-js-box moo-css"> <video id="example" class="video-js" width="720" height="405" controls preload poster="posters/poster_demoreel2010.png"> <source src="video/demoreel2010.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' /> <source src="video/demereel2010.webm" type='video/webm; codecs="vp8, vorbis"' /> <source src="video/demoreel2010.ogv" type='video/ogg; codecs="theora, vorbis"' /> </video> </div> </div> <script type="text/javascript"> ambiLight.create(document.getElementById('example')) </script> Portfolio Page http://www.eschulist.com/test/js/ambilight.js I was able to make the ambilight effect go away using this, but it only works for a second as the video continues to play and the new lights are redrawn. Code: <script type="text/javascript"> $(document).ready(function(){ $(this).click(function(){ $('canvas.ambilight-left, canvas.ambilight-right').addClass('goAway'); }); }); </script> Any other ideas on what to do? If the click function works I should be able to have it check the checkboxes state and have it persist. Maybe? Similar TutorialsHi all, I have a form where I want a single checkbox to toggle the selected/unselected status based on the status of that master checkbox. I have a working script that accomplishes this, but I'm having a problem now that I'm submitting the checkbox as an array. Here is the JS : Code: function checkAll() { if(document.resultForm.master.checked== true) { for(var i=0; i < document.resultForm.choices.length; i++) { document.resultForm.choices[i].checked=true; } } else { for(var i=0; i < document.resultForm.choices.length; i++) { document.resultForm.choices[i].checked=false; } } } Here is the form that it currently works with : Code: <input type="checkbox" name="master"> <input type="checkbox" name="choices" value="choice 1"> <input type="checkbox" name="choices" value="choice 2"> <input type="checkbox" name="choices" value="choice 3"> <input type="checkbox" name="choices" value="choice 4"> And this is the form that I want it to work with instead : Code: <input type="checkbox" name="master"> <input type="checkbox" name="choices[]" value="choice 1"> <input type="checkbox" name="choices[]" value="choice 2"> <input type="checkbox" name="choices[]" value="choice 3"> <input type="checkbox" name="choices[]" value="choice 4"> Any help would be greatly appreciated! Hi, here is what I am trying to do, mind if I sound simple this is my first major javascript attempt. You click the checkbox and it changes a link. You click the checkbox again and it changes it back. So you have a page with a link : <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=5RSNVHTY5D6RN" id="pay"><img src="go.gif"></a> and a checkbox : <a nohref style="cursorointer;color:blue;text-decoration:underline" onclick="changeTarget()"><input type="checkbox" OnClick="changeTarget()" checked="yes" name="opt-in" id="opt-in" align="center" /></a> </p> Clicking the checkbox runs the javascript function ChangeTarget(). Here is what I want the javascript to do: Code: 1. Write current pay value to variable 2. Compare variable to paypal link -3. change to clickbank link -else change to paypal link. Here is the code I have tried that doesnt work: Code: <script type="text/javascript"> var link = document.getElementById('pay'); function changeTarget() if(link == "https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=5RSNVHTY5D6RN") document.getElementById('pay').href="http://1.60years.pay.clickbank.net"; else document.getElementById('pay').href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=5RSNVHTY5D6RN"; </script> Any help would be very much appreciated, I don't know why it isnt working. It just doesnt do anything when you click it. I know the following DOES work, but it only changes the link to the value chosen... no way of changing it back when you click the checkbox a second time. Code: //WORKING CODE <script type="text/javascript"> function changeTarget() { document.getElementById('pay').href="http://1.60years.pay.clickbank.net"; } </script> All, Does anyone have any examples or links of some free Javascript code that will turn the pages of your website when you click the mouse and drag the "page"? Thanks in advance for any ideas! I am using the below script on http://bubbles4urtroubles.com. Because I made the bubbles larger than the ones used in the original script, the horizontal scroll bar displays some of the time, then turns off. Is there any way to just not have the horizontal scroll bar? Also, how would I set the zindex so the bubbles are always in front of everything else. Thank you in advance. //Bubble Script by Lisa (issa@lissaexplains.com, http://lissaexplains.com) //Based on code by Altan d.o.o. (snow@altan.hr) //For full source code and installation instructions to this script, visit http://www.dynamicdrive.com var no = 15; // image number or falling rate var speed = 2; // the lower the number the faster the image moves var snow = new Array(); snow[0] = "bubble.png" snow[1] = "bubble2.png" snow[2] = "bubble3.png" var ns4up = (document.layers) ? 1 : 0; // browser sniffer var ie4up = (document.all) ? 1 : 0; var ns6up = (document.getElementById&&!document.all) ? 1 : 0; var dx, xp, yp; // coordinate and position variables var am, stx, sty; // amplitude and step variables var i, doc_width = 600, doc_height = 1024; if (ns4up||ns6up) { doc_width = self.innerWidth; doc_height = self.innerHeight; } else if (ie4up) { doc_width = document.body.clientWidth; doc_height = document.body.clientHeight; } dx = new Array(); xp = new Array(); yp = new Array(); am = new Array(); stx = new Array(); sty = new Array(); j = 0; for (i = 0; i < no; ++ i) { dx[i] = 0; // set coordinate variables xp[i] = Math.random()*(doc_width-50); // set position variables yp[i] = Math.random()*doc_height; am[i] = Math.random()*20; // set amplitude variables stx[i] = 0.02 + Math.random()/10; // set step variables sty[i] = 0.7 + Math.random(); // set step variables if (ns4up) { // set layers if (i == 0) { document.write("<layer name=\"dot"+ i +"\" left=\"15\" top=\"15\" visibility=\"show\"><img src=\""+ snow[j] + "\" border=\"0\"></layer>"); } else { document.write("<layer name=\"dot"+ i +"\" left=\"15\" top=\"15\" visibility=\"show\"><img src=\""+ snow[j] + "\" border=\"0\"></layer>"); } } else if (ie4up||ns6up) { if (i == 0) { document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"VISIBILITY: visible; TOP: 15px; LEFT: 15px; width:1;\"><img src=\"" + snow[j] + "\" border=\"0\"></div>"); } else { document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"VISIBILITY: visible; TOP: 15px; LEFT: 15px; width:1;\"><img src=\"" + snow[j] + "\" border=\"0\"></div>"); } } if (j == (snow.length-1)) { j = 0; } else { j += 1; } } function snowNS() { // Netscape main animation function for (i = 0; i < no; ++ i) { // iterate for every dot yp[i] -= sty[i]; if (yp[i] < -50) { xp[i] = Math.random()*(doc_width-am[i]-30); yp[i] = doc_height; stx[i] = 0.02 + Math.random()/10; sty[i] = 0.7 + Math.random(); doc_width = self.innerWidth; doc_height = self.innerHeight; } dx[i] += stx[i]; document.layers["dot"+i].top = yp[i]+pageYOffset; document.layers["dot"+i].left = xp[i] + am[i]*Math.sin(dx[i]); } setTimeout("snowNS()", speed); } function snowIE_NS6() { // IE main animation function for (i = 0; i < no; ++ i) { // iterate for every dot yp[i] -= sty[i]; if (yp[i] < -50) { xp[i] = Math.random()*(doc_width-am[i]-30); yp[i] = doc_height; stx[i] = 0.02 + Math.random()/10; sty[i] = 0.7 + Math.random(); doc_width = ns6up?window.innerWidth-5:document.body.clientWidth; doc_height = ns6up?window.innerHeight-5:document.body.clientHeight; } dx[i] += stx[i]; if (ie4up){ document.all["dot"+i].style.pixelTop = yp[i]+document.body.scrollTop; document.all["dot"+i].style.pixelLeft = xp[i] + am[i]*Math.sin(dx[i]); } else if (ns6up){ document.getElementById("dot"+i).style.top=yp[i]+pageYOffset+'px'; document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i])+'px'; } } setTimeout("snowIE_NS6()", speed); } if (ns4up) { snowNS(); } else if (ie4up||ns6up) { snowIE_NS6(); } // End --> </script> I'm sure this is a simple thing to do, but I know next to zero javascript and can't find an example online. What I want to do is to toggle a number on a webpage when a user clicks a link. So ideally there would be a "click to toggle" link, and then a number (lets say 400), when the user clicks that toggle link the number would change to 800 (or whatever my variable is set to), when they click it again it would go back to that original number (in this case 400). Would someone be kind enough to help me with this? Thanks Following are my script to toggle b/w two different links, <html lang="en-US"> <head> <title>toggle b/w 2 different links</title> <script type="text/javascript"><!-- display=1; function displayvalue() { document.getElementById("sv1").style.display = "block"; document.getElementById("dw1").style.display = "none"; } function ShowHide() { if (display==1) { document.getElementById("sv1").style.display = "none"; document.getElementById("dw1").style.display = "block"; //document.getElementById('javaFun') calling java func from javascript display=2; } else { document.getElementById("sv1").style.display = "block"; document.getElementById("dw1").style.display = "none"; //document.getElementById('javaFun1') calling java func from javascript display=1; } } function Func1Delay() { document.getElementById("sv1").style.display = "none"; document.getElementById("loadimage").innerHTML="<input type='image' src='Loading.gif'>"; setTimeout("LoadImage()", 300); } function LoadImage() { document.getElementById("loadimage").innerHTML=""; ShowHide(); } --></script> </head> <body background="GsNJNwuI-UM.gif"onload="displayvalue()"> <div id="sv1" > <a onclick ="Func1Delay()" href="javascript:;">click me</a> </div> <div id="loadimage"></div> <div id="dw1" > <a onclick ="ShowHide()" href="javascript:;">Download me</a> </div> </body> </html> whenever we call a java method , (consider this line:- document.getElementById('javaFun');)after the completion of java call the page is reloading, how control this reloading after the server completing the request....? I am very new to this, so I appreciate everyone's help and patience I am displaying information on our company intranet. I want the user to be able to choice if they want to see the information sorted by person or by issue. Because of the way that this is setup, the info is not in a table and cannot be sorted. I want users to be able to view content either way, but with only one option being visible. This would require the OR operator combined with the toggle function (I assume), but I am pretty lost... This toggle below allows me to show/hide one on top of the other, but I want one to replace the other: <SCRIPT type=text/javascript> <!-- function toggle_visibility(id) { var e = document.getElementById(id); if(e.style.display == 'block') e.style.display = 'none'; else e.style.display = 'block'; } //--> </SCRIPT> <P><STRONG><FONT color=#00467f size=3>Primary Contacts</FONT></STRONG></P> <P><A onclick="toggle_visibility('issue');" href="#">Toggle Contacts by Issue</A></P> <P> </P> <DIV style="DISPLAY: none" id=issue>%%Pages.Body PageID="596"%%</DIV> <DIV style="DISPLAY: block" id=pers>%%Pages.Body PageID="595"%%</DIV> Again, I really appreciate the help Hi there! Okay, here is my scenario: I have a link and a div on a webpage. With the link I want to toggle the content (HTML) of the div. On toggle, I want to load the content from a PHP-file and I want it to load on the toggle, not when the webpage originally loaded (to reduce loading time on the webpage itself). The file that is loaded on toggle doesn't have to be PHP, but it would help a lot. Does anybody know of a example of this or something similar to it? I have been looking for some time now, without any luck unfortunately. Highly appreciate any help/answers/feedback! I'm trying to create a forum for a business. The forum will change depending on what checkbox a person checks in the beginning. I have the checkboxes toggle a certain span. When you check one box it hides one span and displays the other. This works, but I want to position the displayed span at the top so a person doesn't have to look for the other forum. Right now there is just a big white space in the place of the hidden span, so it looks like there is nothing else on the page. I want to move the bottom span to the top when toggled. Here is my code so far. <form name="form1" method="post" action=""> Pork <INPUT TYPE=checkbox NAME="chbx" onClick="selecionatudo(true,1); toggleT('divt1','h'); toggleT('divt2','s')"> Beef <INPUT TYPE=checkbox NAME="chbx" onClick="selecionatudo(true,2); toggleT('divt1','s'); toggleT('divt2','h')"><br> </FORM> <form> <p><div id="divt1" style="visibility:visible; position:relative; top:0; left:0; overflow: visible;"> Shoulder: <br /> Ground beef:<input type="checkbox" name="Grinding" id="Ground beef" /><br /> Patties: Fresh<input type="checkbox" name="pattiesfr" id="Pattiesfr" /> or Seasoned<input type="checkbox" name="pattiesS" id="PattiesS" /><br /> Minute Steaks: <input type="checkbox" name="minsteaks" id="minsteaks" /><br /> Specific Cuts wanted:<br /> <textarea name="Order Sheet" cols="60" rows="30" id="Order Sheet"></textarea> </div> </form><br /> <div id="divt2" style="visibility:visible; position:absolute; top "> Type 2 Input: <input name="t2" type="text" value=""> </div> <BR> </p> <script type=text/javascript> var isIE=document.all?true:false; var isDOM=document.getElementById?true:false; var isNS4=document.layers?true:false; /* _w : which ID (1) or (2) */ /* _h : (h)ide or (s)how */ function toggleT(_w,_h) { if (isDOM) { if (_h=='s') document.getElementById(_w).style.visibility='visible'; if (_h=='h') document.getElementById(_w).style.visibility='hidden'; } else if (isIE) { if (_h=='s') eval("document.all."+_w+".style.visibility='visible';"); if (_h=='h') eval("document.all."+_w+".style.visibility='hidden';"); } else if(isNS4) { if (_h=='s') eval("document.layers['"+_w+"'].visibility='show';"); if (_h=='h') eval("document.layers['"+_w+"'].visibility='hide';"); } } </script> Is it possible for JavaSscript to toggle a submit button? I will be using it in this code: Code: <SCRIPT type="text/javascript"> if (document.forms["form"]["quantitys"].value > '.$row['quantity'].') { alert ("The quantity you wanted for product '.$row['id'].' is no longer available and will be changed to the highest available quantity."); document.forms["form"]["quantity"].value = '.$row['quantity'].'; // JAVASCRIPT TOGGLE SUBMIT } </SCRIPT> The submit button: <INPUT name="submit" type="submit" value="UPDATE QUANTITY"> I've written this very small and simple javascript toggle to make a div appear and disappear upon click. Code: function dropDown(id){ var object = document.getElementById(id).style; if (object.display == "none") {object.display = "block"} else {object.display = "none"} } And the html: Code: <div id="webBox" class="service"> <ul class="servNav"> <li class="button" onclick="dropDown('webDrop')">View Details</li> </ul> </div> <div class="dropInfo" id="webDrop"> Now this code DOES work, but only after clicking the button twice. I assume there is some argument problem, but I can't seem to pinpoint it. I've got jquery scripts and plugins on the page, but it does the same thing when I take those off. Is there anything I can do to make the toggle immediate rather than after a couple tries of clicking? The URL is http://mattboldt.com/2.0 The "view details" buttons are what I'm having trouble with. As of now it's only on one, the first div. Thanks. Hello to all. I am a new to the forum and new to Javascript, so please be gentle. I have a web page in which I am using a script to toggle between div tags. I learned how to set it up for only a few divs, but want to use more than 10+ div tags with the corresponding buttons on the side. When I set it up with 11 buttons, the 10th button does not work, but all of the single digit buttons do. (The 11th button is going to be a hyperlink eventually.) Here is the code for anyone who can help: <code> <script language="javascript" type="text/javascript"> function Button(obj) { var cls = obj.className; if(cls!='Btn_Selected') { if(cls=='Btn') { cls = 'Btn_Highlight'; } else { cls = 'Btn'; } } obj.className = cls; } function select(obj) { for (var x = 1; x <= 10; x++) { document.getElementById("Button"+x).className = 'Btn'; document.getElementById("Content"+x).style.display = 'none'; } obj.className='Btn_Selected'; var tmp = obj.id; var num = tmp.substr(tmp.length-1); document.getElementById("Content"+num).style.display = 'block'; } 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];} } </script> </code> Hopefully I was clear with what I am looking to achieve. If I need to attach additional code or a link to the web page, let me know. Any help would be greatly appreciated. Thanks All in advance, ScottoNM Hello, I'm new to Javascript, but have been programming in PHP and other web codes for 4 years now. I was wondering how you would check if a checkbox was ticked, upon its selection and then unhide HTML content, and then hide such content when deselected.. So far I have this: Code: <script type="text/javascript"> function Agree() { document.getElementById("stepTwo").className = ""; } </script> Which is called by onclick="Agree()" on the select box itself.. I understand an if statement is needed, but how would one go about doing this as my if statements do not appear to be working. Hello, I am not a coder and this has been giving me grief for days My form is located here on page three of the multi form: http://www.rocpinions.com/main-form.html I have been working on this for days and can't figure it out. I have four check boxes. Dog, Cat, Other, and None of These. If Dog Cat and Other (or any combination of) are checked that is fine but if the check box "None of These" is checked I need it to remove the checks from All other boxes. This is an example of exactly what I need my form to do jsfiddle.net/srEuM/ Does anyone know how I can accomplish this with RS Form Pro? Here is the code I am using: Code: <script type="text/javascript"> function checkI() { var checkL = document.getElementsByName('form[PetsInHouse][]'); for (var i=0;i<checkL.length-1;i++) if(document.getElementById('PetsInHouse3').checked){ document.getElementById('PetsInHouse'+i).disabled = true; document.getElementById('PetsInHouse'+i).checked = false; } else { document.getElementById('PetsInHouse'+i).disabled = false; } } </script> This is how I am calling it in the additional attributes in RS Form Pro Code: onclick="checkI();" I am currently using this code above and it only disables all checkboxes when "None of These" is checked but if I check any of the other boxes I can still check "None of These" and that is not the correct functionality. This is exactly what I need to do but in the same format I have above. http://jsfiddle.net/srEuM/ Any help would be greatly appreciated. Thank you Deziner Hello, i want to build a tax calculator's form, i want use a checkbox, so when the checkbox "checked" then the total tax will add the "luxury goods tax" on total tax. this is my code: 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>KasKusbay Order Calculator</title> </head> <SCRIPT language = "javascript"> var currency_rates = new Array(); currency_rates["GBP"]=0.62; currency_rates["CAD"]=0.99; currency_rates["EUR"]=0.75; currency_rates["AUD"]=0.96; function getCurrencyRates() { var currencyRates=0; var theForm = document.forms["myform"]; var selectedCurrency = theForm.elements["currency"]; currencyRates = currency_rates[selectedCurrency.value]; return currencyRates; } function addPbm() { var PbmService=0; var theForm = document.forms["myform"]; var pbm = theForm.elements["pbm"]; if(pbm.checked==true) { pbmService = [J]; } return pbmService; } function addPbm() { var PbmService=0; var theForm = document.forms["myform"]; var pbm = theForm.elements["pbm"]; if(pbm.checked==true) { pbmService = [J]; } return pbmService; } function ceiling( num, at ) { var temp = num / at; // 523/50 ==>> 10.46 return Math.ceil(temp) * at; // ceil(10.46 ==>> 11, 11 * 50 ==>> 550 } function calculateTotal() { var X; var form = document.myform; var A = form.price.value.replace(/[^\d\.]/g, ""); form.price.value = A; var B = form.shipping_cost.value.replace(/[^\d\.]/g, ""); form.shipping_cost.value = B; var F = (parseFloat(A) + parseFloat(B)) * getCurrencyRates(); var C = Number(F) * parseFloat("0.1"); form.total.value = C.toFixed(2); var G = Number(F) + Number(C); var H = Number(G) * parseFloat("0.05") form.p2.value = H.toFixed(2); var I = Number(G) * parseFloat("0.03") form.p3.value = I.toFixed(2); var J = Number(G) * parseFloat("0.2") form.p4.value = J.toFixed(2); X = Number(C) + Number(H) + Number(I) + addPbm(); form.total_IDR.value = X.toFixed(2); //exp: ceiling: document.jslearnform.total_USD.value = Math.ceil(X); //or decimal: document.jslearnform.total_USD.value = X.toFixed(2); //or even document.jslearnform.total_USD.value = Math.ceil(X).toFixed(2); } </SCRIPT> <body> <form name="myform" method="post" action=""> <table width="93%" border="0" id="form_table2"> <tr> <th width="24%"><p>Price ›</p></th> <td width="37%"><p> $ <input type="text" size="7" id="price" name="price" /> <select id="currency" name="currency" onchange="calculateTotal()"> <option value"gbp">GBP</option> <option value"cad">CAD</option> <option value"eur">EUR</option> <option value"aud">AUD</option> </select> <br /> Input Price and Currency</p></td> <td width="39%" rowspan="3"><p align="right">Duty <input type="text" style="background-color: #DCDDDD;" size="12" id="total" readonly name="total" value="" /> </p> <p align="right">Sales Tax <input type="text" style="background-color: #DCDDDD;" size="12" id="p2" readonly="readonly" name="p2" value="" /> </p> <p align="right">Income Tax <input type="text" style="background-color: #DCDDDD;" size="12" id="p3" readonly="readonly" name="p3" value="" /> </p> <p align="right">Luxury Goods Tax <input type="text" style="background-color: #DCDDDD;" size="12" id="p4" readonly="readonly" name="p4" value="" /> </p></td> </tr> <tr> <th>Shipping Cost ›</th> <td> $ <input type="text" size="7" id="shipping_cost" name="shipping_cost" /> <br /></td> </tr> <tr> <th>Kind ›</th> <td><select id="currency3" name="currency2" onchange="calculateTotal()"> <option value="value""EL">Electronic</option> <option value="value""NL">Apparel</option> </select> <br /> <input type="checkbox" id="pbm" name="pbm" /> Luxury Item</td> </tr> <tr> <th>Tax ›</th> <td><div align="center"> <input type="text" style="background-color: #DCDDDD;" size="14" id="total_IDR" readonly name="total_IDR" value="" /> </div></td> <td> </td> </tr> <tr> <th> </th> <td><div align="center"> <input type="button" value="Calculate" onclick = "javascript:calculateTotal()" /> <input type="reset" value="Reset" /> </div></td> <td><div align="center"></div></td> </tr> </table> </form> </body> </html> But i have problem with the function command, the total tax doesn't appear, seems i made wrong function code on function adPbm(). Code: function addPbm() { var PbmService=0; var theForm = document.forms["myform"]; var pbm = theForm.elements["pbm"]; if(pbm.checked==true) { pbmService = [J]; =====> anyone can help me correct this coding? } return pbmService; } Thank you for anyone could help. sir i have a problem in is page. i want to have a javascript function that call on checkbox on click event. if checked firstly a 125 x125 sized checkbox then i want to restrict that all checkbox that i checked later must 125 x 125 sized if i checked 250 x250 sized checkbox then create a alert message pleas select 125 x 125 sized , i also have function plz check it function validate(f) { var array = new Array(); for(var i = 0; i < document.delet.checkbox.length; i++){ var ele = document.delet.checkbox; if( ele[i].checked){ var size = document.getElementById(f).value; array[i]=size; alert(array[0]); /*if(array[0] == array[i]){ alert("size is equal"); }else if(){ alert("size is not equal"); }*/ }//end if }//end for //if(first_size != second_size){alert(second_size); return false;} }//end function this is a one row and repeated in while loop php script, row code is below. Code: <tr bgcolor="<?php echo $color;?>"> <td align="center"> <input name="checkbox[]" type="checkbox" id="checkbox" value="<?php echo $aaa['id']; ?>" onclick=" return validate('<?php echo $id; ?>');" /></td> <td align="center"><?php echo $aaa['imgSize'];?><input type="hidden" id="<?php echo $id; ?>" name="size" value="<?php echo $aaa['imgSize'];?>" /></td> </tr> <?php }//end while ?> this is a online page plz check it http://hkcsy.com/ads Hi everyone. I need a Javascript code for the following: i have a checkbox on my page. when this checkbox got checked, an alert like "Are u sure?" must ask if OK or Cancel. if i click OK the checkbox becomes checked, it runs a javascript function (chkIt() )and refreshes the page. if i click Cancel the checkbox should not became checked and my function will not run. Thanks a lot. HI I want to write a search for my site .I make a new panel in the left of my menue and it has a text input and an image which when that user click on it javascript opens a new window which is a php page.The part I don't know how to do is when the user click on the image it should get the content of the text input and pass it to the url.For the hyperlink of the image I use "<a href="javascriptpen_window('includes/func/search.php?id=" But I don't know what should I write after that to get the content of the text input and put it in the next of the id. How can I do so? Thanks I am using a jQuery slider for a website but the W3C comes up with invalid because: document type does not allow element "div" here .before('<div id="buttons">') Code: <script type="text/javascript"> $(document).ready(function() { $('#slider') .before('<div id="buttons"></div>') .cycle({ fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc... pager: '#buttons' }); }); </script> Any help with this would be appreciated thanks. I am fairly new to javascript and am attempting to create a function that will clear one checkbox when another is checked. I have multiple forms with dynamically generated names on the page. Here is what I have: <script type="text/javascript"> function undo_Complete(myForm) { var formName = myForm.name; if(document.formName.getElementsByName("Needs_Change").checked==true) { document.formName.getElementsByName("Complete").checked=false; } } </script> The two checkbox fields involved: <input name="Complete" value="Yes" <?php echo($Complete=="Yes") ? "checked" : ""; ?> size="4" type="checkbox"> <input name="Needs_Change" value="Yes" <?php echo($Needs_Change=="Yes") ? "checked" : ""; ?> size="4" type="checkbox" onClick="undo_Complete(this.form)"> Could someone please tell me what I am doing wrong? Thank you! Lisa |