JavaScript - How To Make The Copy Ok When I Uncheck The Check Box
how to copy some text to the clipboard with jquery or javascript, from google. i know there
is a pludgin named zeroclipboard http://code.google.com/p/zeroclipboard/ can do this with cross browers. when i tested it on my site. i set it to copy text optionally . it can't work. my test link is http://xanlz.com/copy/1.html it always copys all the values. even i uncheck some check box. may be the value doesn't be changed. but when i alter() the variable, the value is ok. how to correct it? thank you. i want it can copy the checked box value. if the box unchecked, then don't copy its value. Similar Tutorialsthis is my js for all checkbox to be check and uncheck all the item. when i have several item to be checked, it successfully check all with the function. but the problem is when i have only 1 item in the list to be checked. it will not check all or uncheck all when i click the check all function. pls advice. Code: <script language="JavaScript"> <!-- <!-- Begin function CheckAll(chk) { for (i = 0; i < chk.length; i++) chk[i].checked = 1 ; } function UnCheckAll(chk) { for (i = 0; i < chk.length; i++) chk[i].checked = 0 ; } // End --> </script> I'm trying to write some code that uses buttons to check and uncheck certain checkboxes. I am stumped and all the code I have been finding is using for loops to check or uncheck all the boxes, when I just want to check or uncheck certain ones. Here's an example of the type of function I'm trying to use: Code: function checkSome (form) { document.myForm.list.one.checked = true; document.myForm.list.two.checked = true; document.myForm.list.three.checked = false; } And the button: Code: <input type="button" value="Option 1" onClick="checkSome(this.form)"/> I have the following page www.crownvalleywinery.com/kiosk/default.html and I would like to add a button or checkbox to check/uncheck all. Note we are already using some javascript for custom checkboxes so it needs to integrate with that. Any help is appreciated. Here is the current javascript... Code: /* CUSTOM FORM ELEMENTS Created by Ryan Fait www.ryanfait.com The only thing you need to change in this file is the following variables: checkboxHeight, radioHeight and selectWidth. Replace the first two numbers with the height of the checkbox and radio button. The actual height of both the checkbox and radio images should be 4 times the height of these two variables. The selectWidth value should be the width of your select list image. You may need to adjust your images a bit if there is a slight vertical movement during the different stages of the button activation. Visit http://ryanfait.com/ for more information. */ var checkboxHeight = "47"; var radioHeight = "25"; var selectWidth = "190"; /* No need to change anything after this */ document.write('<style type="text/css">input.styled { display: none; } select.styled { position: relative; width: ' + selectWidth + 'px; opacity: 0; filter: alpha(opacity=0); z-index: 5; }</style>'); var Custom = { init: function() { var inputs = document.getElementsByTagName("input"), span = Array(), textnode, option, active; for(a = 0; a < inputs.length; a++) { if((inputs[a].type == "checkbox" || inputs[a].type == "radio") && inputs[a].className == "styled") { span[a] = document.createElement("span"); span[a].className = inputs[a].type; if(inputs[a].checked == true) { if(inputs[a].type == "checkbox") { position = "0 -" + (checkboxHeight*2) + "px"; span[a].style.backgroundPosition = position; } else { position = "0 -" + (radioHeight*2) + "px"; span[a].style.backgroundPosition = position; } } inputs[a].parentNode.insertBefore(span[a], inputs[a]); inputs[a].onchange = Custom.clear; span[a].onmousedown = Custom.pushed; span[a].onmouseup = Custom.check; document.onmouseup = Custom.clear; } } inputs = document.getElementsByTagName("select"); for(a = 0; a < inputs.length; a++) { if(inputs[a].className == "styled") { option = inputs[a].getElementsByTagName("option"); active = option[0].childNodes[0].nodeValue; textnode = document.createTextNode(active); for(b = 0; b < option.length; b++) { if(option[b].selected == true) { textnode = document.createTextNode(option[b].childNodes[0].nodeValue); } } span[a] = document.createElement("span"); span[a].className = "select"; span[a].id = "select" + inputs[a].name; span[a].appendChild(textnode); inputs[a].parentNode.insertBefore(span[a], inputs[a]); inputs[a].onchange = Custom.choose; } } }, pushed: function() { element = this.nextSibling; if(element.checked == true && element.type == "checkbox") { this.style.backgroundPosition = "0 -" + checkboxHeight*3 + "px"; } else if(element.checked == true && element.type == "radio") { this.style.backgroundPosition = "0 -" + radioHeight*3 + "px"; } else if(element.checked != true && element.type == "checkbox") { this.style.backgroundPosition = "0 -" + checkboxHeight + "px"; } else { this.style.backgroundPosition = "0 -" + radioHeight + "px"; } }, check: function() { element = this.nextSibling; if(element.checked == true && element.type == "checkbox") { this.style.backgroundPosition = "0 0"; element.checked = false; } else { if(element.type == "checkbox") { this.style.backgroundPosition = "0 -" + checkboxHeight*2 + "px"; } else { this.style.backgroundPosition = "0 -" + radioHeight*2 + "px"; group = this.nextSibling.name; inputs = document.getElementsByTagName("input"); for(a = 0; a < inputs.length; a++) { if(inputs[a].name == group && inputs[a] != this.nextSibling) { inputs[a].previousSibling.style.backgroundPosition = "0 0"; } } } element.checked = true; } }, clear: function() { inputs = document.getElementsByTagName("input"); for(var b = 0; b < inputs.length; b++) { if(inputs[b].type == "checkbox" && inputs[b].checked == true && inputs[b].className == "styled") { inputs[b].previousSibling.style.backgroundPosition = "0 -" + checkboxHeight*2 + "px"; } else if(inputs[b].type == "checkbox" && inputs[b].className == "styled") { inputs[b].previousSibling.style.backgroundPosition = "0 0"; } else if(inputs[b].type == "radio" && inputs[b].checked == true && inputs[b].className == "styled") { inputs[b].previousSibling.style.backgroundPosition = "0 -" + radioHeight*2 + "px"; } else if(inputs[b].type == "radio" && inputs[b].className == "styled") { inputs[b].previousSibling.style.backgroundPosition = "0 0"; } } }, choose: function() { option = this.getElementsByTagName("option"); for(d = 0; d < option.length; d++) { if(option[d].selected == true) { document.getElementById("select" + this.name).childNodes[0].nodeValue = option[d].childNodes[0].nodeValue; } } } } window.onload = Custom.init; I am not that great with web design but i am trying to create something like this site http://www.avrilbandaids.com/voteomatic/ I am trying to make something for my site - andygrammernation.com that is similar to this but with a different color scheme and with the mediabase link changed to vote for Andy instead of Avril. If anyone knows how to do this and would like to walk me through it that would be amazing!!! Thank you all so much!!! I have a html:select tag box and I want to make it copy pastable directly from an excel sheet or notepad so as to dynamically updating its options, is it possible. Current code has html:select box separately and below this another text box is there, where i fill the numeric value, then press add button below and then it gets updated in the html:select tag box. Is it possible to copy from some list of numeric values and then directly paste into the html:select and the array list gets updated from this pasted list. Thanks in advance fro your replies. Is it possible to use Javascript to uncheck all checkboxes that appear within a specific div? I'm already using names/ids for each checkbox, and these are generated dynamically, so I cant really apply a group to all the checkboxes I want to untick. Hello, I have a simple script that counts the number of check boxes that are checked and then when reaches a certain number displays an alert. It is triggered by the onclick event. My question is, by keeping with the onclick event how do I make JS run something different when a box is unchecked. So bottom line - if it is checked the counter goes up...if it is unchecked the counter goes down all being triggered by the onclick event - is this possible. Below is the code I have been working with. The only part that is working is the middle if statement - the part where it is checking to see if the counter is equal to 6 Code: // JavaScript Document var count = 0 function checkedcount(which) { if (which.checked = true;) {count = count + 1} if (count == 6) { alert('Only pick 5'); count = count - 1; which.checked = false; } if (which.checked = false;) {count = count - 1} } I am using some code in a form to show an image if a checkbox is selected. A different image is shown for each checkbox. The code works well, but I need some help to update the code so that only one of the four checkboxes can be selected at any one time. If one is checked and the user selects a different one, the original one should automatically untick and the associated image should change as well. To summarise, I want only one image and one checkbox to show at any one time (and it needs to be cross browser please). Here is the code : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <script language="JavaScript"> <!-- function toggle(target) { obj=(document.all)? document.all[target] : document.getElementById(target); obj.style.display=(obj.style.display=='none')? 'inline' : 'none'; } //--> </script> </head> <body> <form> Selection 1 <input type="checkbox" name="headerlink" id="headerlink" value="1" style="border: none; vertical-align: middle;" onClick="toggle('header')" /><br> Selection 2 <input type="checkbox" name="headerlink" id="headerlink" value="1" style="border: none; vertical-align: middle;" onClick="toggle('header1')" /><br> Selection 3 <input type="checkbox" name="headerlink" id="headerlink" value="1" style="border: none; vertical-align: middle;" onClick="toggle('header2')" /><br> Selection 4 <input type="checkbox" name="headerlink" id="headerlink" value="1" style="border: none; vertical-align: middle;" onClick="toggle('header3')" /><br> </form> <img src="logo.jpg" border="0" alt="" id="header" style="display:none;" /> <img src="logo2.jpg" border="0" alt="" id="header1" style="display:none;" /> <img src="logo3.jpg" border="0" alt="" id="header2" style="display:none;" /> <img src="logo4.jpg" border="0" alt="" id="header3" style="display:none;" /> </body> </html> Whats up guys, have an interesting one for you... So I have a pretty simple survey form, with 5 checkbox answers, one of them being "None of the Above". All 5 are part of the same question1[] array. My goal is to have a function that unchecks the other 4 boxes when None of the Above is checked. The problem is that since None of the Above is part of the question1 array, it unchecks itself. So how do I separate this None of the Above option? After all, it is still a valid answer to question 1, so I don't want it to sit in a different array just because... Here's what I have now: Java: Code: function SetValues(Form, CheckBox, Value) { var objCheckBoxes = document.forms[Form].elements[CheckBox]; var countCheckBoxes = objCheckBoxes.length; for(var i = 0; i < countCheckBoxes; i++) objCheckBoxes[i].checked = Value; } html: Code: <input id="question1" name="question1[]" type="checkbox" value="Answer 1"> 1<br> <input id="question1" name="question1[]" type="checkbox" value="Answer 2"> 2<br> <input id="question1" name="question1[]" type="checkbox" value="Answer 3"> 3<br> <input id="question1" name="question1[]" type="checkbox" value="Answer 4"> 4<br> <input id="question1" name="question1[]" type="checkbox" value="None of the above" onclick="SetValues('form1', 'question1[]', false);"> None of the above <br> So again the issue with this code is that since None of the Above is inside the question1 array, it unchecks itself as well. thanks, rg On this webpage http://www.corkdiscos.com/testimonials.html i have a like button. when a user clicks like a comment box appears. when i unlike the button the comment box disappears this is ok but when a user has already liked the facebook page and comes to my webpage the comment box does not show. so im looking for a piece of javascript to check if a user has like the button on my page and if so to show the comment box. please check my source code of the website http://www.corkdiscos.com/testimonials.html to see what i have so far. any help would be greatly appreciated Hi guys. I'm working a bunch of pre existing code on a CMS. Just after a quick fix. Doing a show/hide thing on a particular div somewhere on the page depending if a checkbox is ticked or not. Currently there is 3 checkboxes that are dynamically added through the CMS. Here's simplified version of the form: Code: <form id="simplesearch" name="simplesearch"> <input type="checkbox" onclick='showhidefield(this.value)' name="meta_data_array_search_criteria[custom_profile_type][]" value="5" class="input-checkboxes" /> <input type="checkbox" onclick='showhidefield(this.value)' name="meta_data_array_search_criteria[custom_profile_type][]" value="4" class="input-checkboxes" /> </form> And here's the javascript I was playing with. Code: function showhidefield(id) { if(document.simplesearch.meta_data_array_search_criteria[custom_profile_type][''].checked) { document.getElementById("profile_fields_wrapper_" + id).style.visibility = "visible"; } else { document.getElementById("profile_fields_wrapper_" + id).style.visibility = "hidden"; } } Problem I'm having is how do i do a check to see if those checkboxes are checked in the javascript with those name arrays? How do i separate them? 'm guessing I have to loop through them or something?Hopefully that make senses - it's late here and I'm losing the plot Any pointers would be gratefully welcomed since there are troubles with innerHTML in IE ..... instead of : Code: target.innerHTML = src.innerHTML; --> Code: this.copy_innerHTML = function(src,target) { //remove all target inner elements while(target.hasChildNodes()){target.removeChild(target.childNodes[0])} for (var j = 0; j<src.childNodes.length-1; j++) { target.appendChild(src.childNodes[j].cloneNode(true)); } } a) Tested in FF and GC b) in IE this works, but stuff does not appear where it should. EDIT: if text nodes removed , then even in ff does not work, does not find textarea inside target node. That is, the error pops up, previously only notable at IE. HTML & CSS validation is OK. Any advice ? I have been looking all over google and i cant find it. How would you make a text box and when you type in it it would display the words underneath?
I have this line of code: <input type='text' id='fCode' style="width:875px; height:22px;"/><br /><br /> Does anyone know how to add a copy button to so when you click it it copies everything in the box to your clipboard? Thanks -Wardman I have this line of code: <input type='text' id='fCode' style="width:875px; height:22px;"/><br /><br /> Does anyone know how to add a copy button to so when you click it it copies everything in the box to your clipboard? Thanks -Wardman Hello, I am needing help in copying a url to another href on a page. Here is the scenario: I have a page with multiple <LI>. Within each <LI> there is A hidden link An image A visible link This is the code within each <LI>: Code: <h2 class="postTitle" style="display: none;"><a href="URL to copy">LI Name</a></h2> <a href="Copied URL"><img alt="" src="LI Image" /></a> <a href="Copied URL">LI Name</a> Each <LI> will contain a different image, LI name, and link. I am needing a way to get the hidden URL for each LI copied into the visible href. Hope this makes sense. Thanks in advance for your help. Don't even know where to post this as I have never thought about it; I've just made my game have a image upload script in, and a album showing the users images. How could I make have a link saying "Copy Link" that if clicked will copy the picture url to clip board. I've seen places like w3schools use in but not as tuts though. Please this will really help, desplayin the link is ugly EDIT: I've found the following code but I don't understand how I turn it into a link or button. Code: <script> window.clipboardData.setData('text','This has been copied to your clipboard.'); </script> do anyone know how do make a form that automatic tab when we paste something into the box and sort it out automatically. Like cd-key box. when we copy n paste cd-key into the box it automatic inert everything into correct places. Thanks I need help in a form so that a radio button input sets 2 NAME values like NAME="name1" and NAME="name2" Since I don't think this is possible, I would by happy to copy the value of name1 to name2 via a script/vb/java, etc. Here's the code snippet I have that needs help. <form action="https://www.paypal.com/cgi-bin/webscr" method="post"> <input type="hidden" name="business" value="99999999999"> <table border="0"> <tr><td><input type="radio" name="name1" value="25.00">Donate $25 <tr><td><input type="radio" name="name1" value="90.00">Donate $90 <td><td><input type="radio" name="name1" value="Other">Other Amount</td><td> <td>$</td><td><input type="text" name="name1"> </table> [Now, I need code to auto set NAME="name2" to always be the same value as "name1" above even if user re-selects choice] .. .. .. </form> Thanks Dave Hey guys, I have a small page that reads from a mysql db and pretty much makes a row on the page for every row in the db, but, i need a way to have it so that when i click on a link from each row, it should automatically copy one of a cell from the db. so i have 3 columns in the DB: SITECODE, SALESCODE, and DEALERNAME, on my html page I have 4 colums, SITECODE, SALESCODE, DEALERNAME, and one that has a link which has a URL in it and adds the SITECODE automatically into it for each row. I need it so that when i click on the link for each row, it automatically copies to the clipboard the SALESCODE for that row. This is what I have so far, but it does not work for some reason. Code: <script type="text/javascript"> function copy_to_clipboard(text) { if(window.clipboardData) { window.clipboardData.setData('$myrow[salescode]',text); } else { } return false; } </script>[/B] <?php // load the configuration file. include("page-config.php"); //load all news from the database and then OREDER them by newsid //you will notice that newlly added news will appeare first. //also you can OREDER by (dtime) instaed of (news id) $result = mysql_query("SELECT * FROM salescode ORDER BY sitecode ASC",$connect); //lets make a loop and get all news from the database while($myrow = mysql_fetch_assoc($result)) {//begin of loop //now print the results: echo "<tr><td width=\"25%\" valign=\"top\" bgcolor=\"615B67\" class=\"news\" style=\"border-bottom:1px dashed #A49FA5;border-left:1px solid #A49FA5;padding-top:.5em;padding-left:.5em;padding-bottom:.5em;\" align=center><table align=center width=\"100%\"><tr><td align=left><font size=\"2px\" color=\"ffcc00\"><b>"; echo $myrow['sitecode']; echo "</b></font></td></tr></table></td><td align=\"center\" width=\"50%\" valign=\"top\" bgcolor=\"615B67\" class=\"events\" style=\"border-bottom:1px dashed #A49FA5;\"><table align=center width=\"100%\"><tr><td width=\"50%\" class=\"events\" align=center><u>"; echo $myrow['salescode']; echo "</u></td><td width=\"50%\" class=\"events\" align=left>"; echo $myrow['dealername']; echo "</td></tr></table>"; echo "</td><td align=\"right\" width=\"25%\" valign=\"middle\" bgcolor=\"615B67\" style=\"border-right:1px solid #A49FA5;border-bottom:1px dashed #A49FA5;\"><a onclick=\"copy_to_clipboard('text')\" target=\"_blank\" href=\"https://testing/loadSiteInfo.do?branch=usa&siteCode=$myrow[sitecode]\"><font size=\"2px\"><b>"; echo $myrow['sitecode']; echo "</b></font></a> </td></tr>"; }//end of loop ?> |