|
JavaScript - Javascript Uncheck 4 Of 5 Checkboxes Inside The Same Array
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 Similar TutorialsHello, 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> 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. 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;
Hi 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! I am facing this issue on IE 8, The page contains too much javascript and is a pure web2.0 blend. On clicking a checkbox, I increase the size of the widget and fill new data in new space which i get through AJAX. The problem is, All other widgets below that widget change their positions due to increase in size of the first widget. Now, when they successfully change their positions and come to their new position on the page, all the checkboxes on those repositioned widgets become unclickable. When i tried to resolve this issue i came to know that after repositioning the check boxes on the runtime through JavaScript, The actual position of the checkbox is different then the one it is displayed by the browser. i.e. The checkbox is clickable when i click i few pixels after that checkbox ends or sometimes before the checkbox starts. I am stuck... and it leaves me just one choice, Refreshing the page. but i don't want to refresh the page. I have already tried element.blur, element.focus etc...... I can not post code here because the code is too much.... Note: It works fine on all other browsers. this 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>
Hi all Can someone please help me with a javascript that can validate textfields, checkboxes, radiobuttons and dropdownlist? I found a working javascript, but it only validates textfields. http://www.insidedhtml.com/tips/elements/ts13/page1.asp Can someone please help me modify it? Any help is much appreciated! - Mikey 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. Hello to all! How can I insert two values in an array in a salect option like the one below: Example: So I need in the "var op1 = new Option" an array thisarray[<?php echo"$user_name" ?>, <?php echo"$user_id" ?>] Data is being loaded by php from SQL Code: var newTextbox = document.createElement('select');
newTextbox.className = 'fn-select';
//First user in the populated select menu is the person Loged in
var op1 = new Option("", ""); <----------[an array with two variables] ???
newTextbox.appendChild(op1);
var txt1 = document.createTextNode('<?php echo"$user_name" ?>');
op1.appendChild(txt1);
And then separate these variables and let the following function save them individualy: Code: function saveNote (note) {
resetAjax();
var photoId = note.container.element.id;
ajax.setVar('action', 'save');
ajax.setVar('photo_id', photoId);
ajax.setVar('note_id', note.id);
ajax.setVar('left', note.rect.left);
ajax.setVar('top', note.rect.top);
ajax.setVar('width', note.rect.width);
ajax.setVar('height', note.rect.height);
ajax.encVar('text', note.gui.TextBox.value); <------------- $user_name
<------------- $user_id ajax.runAJAX();
var statusDiv = document.getElementById('PhotoNoteStatus');
ajax.onCompletion = function () {statusDiv.innerHTML = "<p>Note saved.</p>"; }
return 1;
}
Hi, I am trying to search an array for a string and then if it is found alert it. I have found examples of how to iterate the array and how to use .IndexOf to return a true false statement as to whether the array includes the string, but i don't know what to do after that and how to display the string if its found. Any help appreciated.. Thanks Hi, I have this loop: Code: for (var j = 0; j < gmarkers.length; j++) {
gmarkers[j].hide();
elabels[j].hide();
map.closeInfoWindow();
var str=gmarkers[j].myname.toLowerCase();
var patt1=inp;
if (str.match(patt1))
{
found = true;
gmarkers[j].show();
count++;
var p=j;
}
}
which was useful for passing the p variable when it was just one number. but now I need to get that number every time j gets set (I understand that the j gets overwritten each time the loop goes through). What would be ideal is if p could become an array, the contents of which match the values that j has passed though during the loop cycle. I thought var p = new Array (j); minght do the trick, but obviously not... I hope that I'm explaining it OK, and that it's possible, and that somebody has an idea how to do it... I am currently creating a page to allow a user to change their password. I have a field which the user will enter their current password into and I am then using javascript to check whether this is the correct password. My passwords are encrypted using md5 and so I need to incorporate this into the javascript function. I have tried but unfortunately cannot get the correct value for the encrypted password. My javascript code is as follows... Code: function verifyCurrentPassword(){
//Gain the hashed password that is in the database
var password;
<?php
print "password='" .$password. "';\n";
?>
//Find the password that the user has entered as the current password
var hashedpassword;
var currentpassword = document.getElementById("currentpassword").value;
<?php
print "hashedpassword='" .md5("currentpassword"). "';\n";
?>
if(password == hashedpassword){ alert("passwords are the same"); }
}
im trying to incorporate a tweetme button....inside of my joomla myblog component i entered into the core html with php tags of the blog....went to the bottom and added in the javascript for the twitter button....it worked but i want the url of the twitter button to point to the specific url's of each blog post so i simply grabbed the php tag from the top of the post that determines the link for the title of the blog Code: <?php echo $e['permalink']; ?> this is the code i ended up with Code: <script type="text/javascript"> tweetmeme_url = '<?php echo $e['permalink']; ?>'; </script> <script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script> it gave me a syntax error..... is there anyway to make this situation possible? Hi all! I'm trying to make the width of an image relative to the width of the browser. I use this script to find the browser width: Code: var imageWidth = 0;
if( typeof( window.innerWidth ) == 'number' )
{
//Non-IE
myWidth = window.innerWidth;
}
else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) )
{
//IE 6+ in 'standards compliant mode'
myWidth = document.documentElement.clientWidth;
}
else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) )
{
//IE 4 compatible
myWidth = document.body.clientWidth;
}
imageWitdh = myWidth*0.3;
Now I want my image to have the width equal to imageWitdh... how can I do this? <img src="someimage.png" width="imageWitdh"> doesnt work, abviously... Thanks a lot!!! Grts ok, so I have a code where it takes documents and uploads them as soon as selected. I want to know how I can put in my genRandomString() in so that not only will the doc upload, but this random string will submit to database, but I need this string to be the same for all documents that are uploaded on a single page load.....when page refreshes, new string, else it stays the same. I am going to link this number as an id in the database so that it can be identified. does this make any sense at all?????? Code: <?php
function genRandomString($length = 20) {
$characters = '0123456789';
$string ='';
for ($p = 0; $p < $length; $p++) {
$string .= $characters[mt_rand(0, strlen($characters))];
}
return $string;
}
?>
<!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>Multiple File Upload With Progress Bar - Web Developer Plus Demos</title>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/swfupload/swfupload.js"></script>
<script type="text/javascript" src="js/jquery.swfupload.js"></script>
<script type="text/javascript">
$(function(){
$('#swfupload-control').swfupload({
upload_url: "upload-file.php",
file_post_name: 'uploadfile',
file_size_limit : "9999999999999999999999999999999999",
file_types : "*",
file_types_description : "Image files",
file_upload_limit : 1000,
flash_url : "js/swfupload/swfupload.swf",
button_image_url : 'js/swfupload/wdp_buttons_upload_114x29.png',
button_width : 114,
button_height : 29,
button_placeholder : $('#button')[0],
debug: false
})
.bind('fileQueued', function(event, file){
var listitem='<li id="'+file.id+'" >'+
'File: <em>'+file.name+'</em> ('+Math.round(file.size/1024)+' KB) <span class="progressvalue" ></span>'+
'<div class="progressbar" ><div class="progress" ></div></div>'+
'<p class="status" >Pending</p>'+
'<span class="cancel" > </span>'+
'</li>';
$('#log').append(listitem);
$('li#'+file.id+' .cancel').bind('click', function(){ //Remove from queue on cancel click
var swfu = $.swfupload.getInstance('#swfupload-control');
swfu.cancelUpload(file.id);
$('li#'+file.id).slideUp('fast');
});
// start the upload since it's queued
$(this).swfupload('startUpload');
})
.bind('fileQueueError', function(event, file, errorCode, message){
alert('Size of the file '+file.name+' is greater than limit');
})
.bind('fileDialogComplete', function(event, numFilesSelected, numFilesQueued){
$('#queuestatus').text('Files Selected: '+numFilesSelected+' / Queued Files: '+numFilesQueued);
})
.bind('uploadStart', function(event, file){
$('#log li#'+file.id).find('p.status').text('Uploading...');
$('#log li#'+file.id).find('span.progressvalue').text('0%');
$('#log li#'+file.id).find('span.cancel').hide();
})
.bind('uploadProgress', function(event, file, bytesLoaded){
//Show Progress
var percentage=Math.round((bytesLoaded/file.size)*100);
$('#log li#'+file.id).find('div.progress').css('width', percentage+'%');
$('#log li#'+file.id).find('span.progressvalue').text(percentage+'%');
})
.bind('uploadSuccess', function(event, file, serverData){
var item=$('#log li#'+file.id);
item.find('div.progress').css('width', '100%');
item.find('span.progressvalue').text('100%');
var pathtofile='<a href="uploads/'+file.name+'" rel="nofollow" target="_blank" >view »</a>';
item.addClass('success').find('p.status').html('Done!!! | '+pathtofile);
})
.bind('uploadComplete', function(event, file){
// upload has completed, try the next one in the queue
$(this).swfupload('startUpload');
})
});
</script>
<style type="text/css" >
#swfupload-control p{ margin:10px 5px; font-size:0.9em; }
#log{ margin:0; padding:0; width:500px;}
#log li{ list-style-position:inside; margin:2px; border:1px solid #ccc; padding:10px; font-size:12px;
font-family:Arial, Helvetica, sans-serif; color:#333; background:#fff; position:relative;}
#log li .progressbar{ border:1px solid #333; height:5px; background:#fff; }
#log li .progress{ background:#999; width:0%; height:5px; }
#log li p{ margin:0; line-height:18px; }
#log li.success{ border:1px solid #339933; background:#ccf9b9; }
#log li span.cancel{ position:absolute; top:5px; right:5px; width:20px; height:20px;
background:url('js/swfupload/cancel.png') no-repeat; cursor:pointer; }
</style>
</head>
<body>
<div id="swfupload-control">
<p>Upload upto 5 image files(jpg, png, gif), each having maximum size of 1MB(Use Ctrl/Shift to select multiple files)</p>
<input type="button" id="button" />
<p id="queuestatus" ></p>
<ol id="log"></ol>
</div>
</body>
</html>
I have multiple <?php require("../section.php"); ?> on my pages and I would like to insert some Javascript (for Facebook's social bookmarks plugins) in one of these so that it comes right before the </body> tag. Currently my "footer.php" require is in that position so I open the footer.php and place the Javascript at the end. Code: <?php echo ' Footer Content Here's my Javascript '; ?> It gives a syntax error in Dreamweaver halfway through the JS and the footer.php doesn't show at all when uploaded. Can you not insert JS this way? How would I do this? I don't know anything about Javascript so be easy. Hello, I'm developing very simple web site for my gym. It has a main page, index.php and several secondary pages e.g. home.php, services.php, location.php. Secondary pages are reachable via php script called through navigation bar located in index.php. Once it's called the pages are loaded inside a main frame, which is located in index.php as well. Everything works fine, except when I add javascript code (which presents map of the gym) inside location.php site. Body of location.php looks like this: <body> <h2>Lokacije fitness centara<br></h2> <p>"Fitness centar Adam"</p> <script type="text/javascript" src="http://www.karte.hr/api.js?v=1.0"> </script> <div id="karte_hr_karta" style="border:1px solid #C5C5C5;width:450px; height:400px;"> <a href="http://www.karte.hr/karta/g-l-fitness-adam-i-eva">Interaktivna karta Hrvatske | Interactive map of Croatia</a> <script type="text/javascript"> new karteHR({container:"karte_hr_karta", slider:true, onload:function() { this.viewer.setViewBound(2452469, 5064256, 2471292, 5073038); this.kartehr.loadMyMap({mid:43425, nosetbound:true}); }}); </script>" </div> </body> When I call location.php through navigation bar from index.php, the whole page reloads (instead of main frame only). It really gets on my nerves - just can see 2-3 milliseconds an empty page until the whole page appears... I'm not really familiar with Javascript neither with PhP, but I assume it's because of onload:function(). I got this code from map service from my country (http://www.karte.hr/). I've tried to change it but it didn't work and now I have absolutely no idea what to do. If it's permitted I can post a link to this web site so you can easily understand my issue. Thank you very much. Aleksandra Hello everyone, I have session_start() at the begining of my home page. In my home page I'm calling a fileName.js inside my <head></head> tags. My guestion is... How do I get the session id inside fileName.js? Or is there a way to pass it to fileName.js from the home page(index.html)? Thank You in advance. |
|||||||