JavaScript - Select All Checkboxes!!? Help!

Hi JS Experts,

I am working on a class registration system that requires students to register for a main class (101, 102 or 103). The student is supposed to select one main course as well as provide a second choice in case the first is not available. I have two dropdown select fields to capture data

1) Choice -1: 101 / 102 / 103 ( Student needs to select one - Reading the classID from classes table)
2) Choice -2: 101 / 102 / 103 ( If student selects 101 in Choice-1 then the only classes available under Choice-2 should be 102 or 103).

How can I accomplish the above?

Further to this there are two fields on the form where I would like to auto populate based on what they have selected in Choice-1 and Choice-2.

For Example:
If a parent selects choice1: 101 the child Choice1 field should autopopulate with 100.
If a parent selects Choice2: 201 the child Choice2 field should autopopulate with 200

Any help would be really appreciated. Thanks

Vinny

Hey Guys
When a user changes the select list called "reason_code_master" I need the uodatecodes() function to update all the other select list with the id of "reason_codes" with the same . How can I do this.


<select size='1' onchange="updatecodes()" name='reason_code_master'>
<option value='' > - SET REASON - </option>
<option value='BROKEN' >BROKEN</option>
<option value='ENTERED' >ENTERED</option>
<option value='SHORT' >SHORT</option>
</select>

<select size='1' name='reason_codes' id='reason_codes'>
<option value='' > - SET REASON - </option>
<option value='BROKEN' >BROKEN</option>
<option value='ENTERED' >ENTERED</option>
<option value='SHORT' >SHORT</option>
</select>
<select size='1' name='reason_codes' id='reason_codes'>
<option value='' > - SET REASON - </option>
<option value='BROKEN' >BROKEN</option>
<option value='ENTERED' >ENTERED</option>
<option value='SHORT' >SHORT</option>
</select>
<select size='1' name='reason_codes' id='reason_codes'>
<option value='' > - SET REASON - </option>
<option value='BROKEN' >BROKEN</option>
<option value='ENTERED' >ENTERED</option>
<option value='SHORT' >SHORT</option>
</select>
<select size='1' name='reason_codes' id='reason_codes'>
<option value='' > - SET REASON - </option>
<option value='BROKEN' >BROKEN</option>
<option value='ENTERED' >ENTERED</option>
<option value='SHORT' >SHORT</option>
</select>

Hi all.
I have the following problem that I require a pointer with.

I have a php variable named "$seatid"
This could contain 1 or many entries.

I have a page full of checkboxes named A1-8, B1-8, C1-8 etc to P1-8

I want a way of greying out the checkboxes on the page that relate to the values that are contained in the php variable. So they cannot be clicked.

It would also like to change the colour of the cell that the check box is contained in.

It is important that the checkboxes or at least the table that contain the checkboxes remain, as it represents the layout of a theatre.


Cheers for your help

My form generates 1 to n records which contains check boxes. Based on some condition if I click a check box it has to check & disable some other check boxes automatically. I did it. But, at the same time if I un-check I have to un-check all the check boxes which were checked. Please let me know. Thanks a lot.

All,
I have the following code which validates a form has at least one checkbox checked before it submits it. However I want to make sure that there aren't more then 25 checked on the page. How can I do this?
Code:

function validate(field)
{
for (var i = 0; i < field.length; i++){
    if(field[i].checked){ // if a field is checked form is submitted
        return true;
        }
    }
alert("You need to have a check box selected to submit the form!");
return false; // if no fields are checked form not submitted
}

Thanks in advance!

Good evening all,

I have a bit of an issue with checkboxes - basically I need to allow only 1 selection and then have a comments box show when a checkbox is checked. I've gotten the comments box to show when the checkbox is checked but I can't seem to workout how to allow only one. I'd really like the user to be able to change their mind and make a different selection but only have 1 be selected at a time (sort of like radio buttons work). I know it would be much easier and probably better to use radio buttons but that isn't an option with this. (The actual HTML is produced using a style sheet in an application that I am interfacing with so all I can do is use the checkbox.)

Here is the code I am using to show or hide the comments box.

Code:

  

function HideComments() 
{
  var a1 = document.getElementById("crmForm_answer1").checked; 
  var a8 = document.getElementById("crmForm_answer8").checked;
  var a2 = document.getElementById("crmForm_answer2").checked; 
  var a3 = document.getElementById("crmForm_answer3").checked; 
  var a4 = document.getElementById("crmForm_answer4").checked; 
  var a5 = document.getElementById("crmForm_answer5").checked; 
  var a6 = document.getElementById("crmForm_answer6").checked; 
  var a7 = document.getElementById("crmForm_answer7").checked;
  var a9 = document.getElementById("crmForm_answer9").checked;
  var a10 = document.getElementById("crmForm_answer10").checked;
 
  if(a1==true)
  {
    document.getElementById("crmForm_answer1_value").parentNode.parentNode.style.display = 'block';
   }
  else
    document.getElementById("crmForm_answer1_value").parentNode.parentNode.style.display = 'none';

  if(a8==true)
  {
    document.getElementById("crmForm_answer8_value").parentNode.parentNode.style.display = 'block';
  }
  else
    document.getElementById("crmForm_answer8_value").parentNode.parentNode.style.display = 'none';

  if(a2==true)
  {
    document.getElementById("crmForm_answer2_value").parentNode.parentNode.style.display = 'block';
  }

  else
    document.getElementById("crmForm_answer2_value").parentNode.parentNode.style.display = 'none';

  if(a3==true)
  {
    document.getElementById("crmForm_answer3_value").parentNode.parentNode.style.display = 'block';
  }

  else
    document.getElementById("crmForm_answer3_value").parentNode.parentNode.style.display = 'none';

  if(a4==true)
  {
    document.getElementById("crmForm_answer4_value").parentNode.parentNode.style.display = 'block';
  }

  else
    document.getElementById("crmForm_answer4_value").parentNode.parentNode.style.display = 'none';

  if(a5==true)
  {
    document.getElementById("crmForm_answer5_value").parentNode.parentNode.style.display = 'block';
  }

  else
    document.getElementById("crmForm_answer5_value").parentNode.parentNode.style.display = 'none';

  if(a6==true)
  {
    document.getElementById("crmForm_answer6_value").parentNode.parentNode.style.display = 'block';
  }

  else
    document.getElementById("crmForm_answer6_value").parentNode.parentNode.style.display = 'none';

  if(a7==true)
  {
    document.getElementById("crmForm_answer7_value").parentNode.parentNode.style.display = 'block';
  }

  else
    document.getElementById("crmForm_answer7_value").parentNode.parentNode.style.display = 'none';

if(a9==true)
  {
    document.getElementById("crmForm_answer9_value").parentNode.parentNode.style.display = 'block';
  }

  else
    document.getElementById("crmForm_answer9_value").parentNode.parentNode.style.display = 'none';

if(a10==true)
  {
    document.getElementById("crmForm_answer10_value").parentNode.parentNode.style.display = 'block';
  }

  else
    document.getElementById("crmForm_answer10_value").parentNode.parentNode.style.display = 'none';
}

Thanks in Advance
Sam

have a simple calculator i made with checkboxes and some Js.

the problem is that it does not work in FF.

any idea how this can work for
IE
Safari
AND FF


Code:

function getPrice(amount, boxName){
		total = eval() ;
	
		checked = document.getElementById(boxName).checked
			if (checked){
				total =  parseFloat(form1.Total2.value) + parseFloat(amount);

			}else{
				total =  parseFloat(form1.Total2.value) - parseFloat(amount);

			}
			total.toFixed(2);
		form1.Total2.value = total
		document.getElementById("total").innerHTML = "Total $"+total;
	}

Ok so I'm making this form which when a selection is made in one box it will run through the javascript(function getMgmtHours), and update the div(mgmthours). Then another box shows up allowing another selection to be made which runs through the javascript(function getDays) and updates another div(mgmtdate). My problem is that when I use the second box to run through javascript, it overwrites what shows up in the first div (mgmthours) when it should be updating a different div (mgmtdate). Any ideas what I can do to get it update the relevant div and not overwrite the other one?

Here is part of the javascript I have in my page head:

Code:

function getMgmtHours(str)
{
if (str=="")
  {
  document.getElementById("mgmthours").innerHTML="";
  return;
  }
if (window.XMLHttpRequest)
  {
   // code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("mgmthours").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","getmgmthours.php?dist="+str,true);
xmlhttp.send();
}

function getDays(str)
{
if (str=="")
  {
  document.getElementById("mgmtdate").innerHTML="";
  return;
  }
if (window.XMLHttpRequest)
  {
   // code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("mgmtdate").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","getdates.php?sunday="+str,true);
xmlhttp.send();
}

Here is the HTML/PHP portion being used:
PHP Code:
echo "<p>";
echo "Submit hours:";
echo "<form>";
echo "<select name='district' onchange='getMgmtHours(this.value)'>";
echo "<option value=''>Select a district:</option>
<option value='1'>1</option>
<option value='3'>3</option>
<option value='4'>4</option>";
echo "</select>";
echo "</form>";
echo "</p>"

echo "<p>";
echo "<form action='./hours.php' method='post' onSubmit='return checkMgmtHours'>";
echo "Weekending Day: ";
echo "<select name='weekending' onchange='getDays(this.value)'>";
echo "<option value=''>Choose a Date:</option>";

while ($week < 32) {
    $nextsunday = strtotime("next Sunday");
    
    if ($week > 0) { $timestamp = strtotime("-" . $week . " week", $nextsunday); } else { $timestamp = $nextsunday;}
    
    $weekending = date('M. d, Y', $timestamp);
    echo "<option value='" . $weekending . "'>" . $weekending . "</option>";
    $week = $week + 1;
}

echo "</select>";

echo "<div id='mgmtdate' />";
echo "<div id='mgmthours' />";
echo "</p>"; 


Edit: Also, after getMgmtHours() runs, I can still use both getDays and getMgmtHours, howeer once I used getDays, I am no longer able to use getMgmtHours w/o refreshing the page.

I have a select box that has ~7000 options, that based on a different dropdown select & input field, gets filtered to 0 - 300 entries.

I have another select dropdown that has 13000+ options in total for all the ~7000 entries, but each entry may have 1 to 5 options of these 13000.

Is there a way to change the options of the last select dropdown based on what the user chooses in the filtered select box? Currently the idea I'm having is to have the browser load all 13000+ items and filter out the ones that don't apply to the currently selected item, but I'm not sure what kind of lag the user would experience while the browser loads & filters through all these items.

Any help would be appreciated. Thanks.

I've got some directory list boxes on the site I'm working on. I made them big and fixed rather than drop-down so they're easier to use in this context. But I had to enable the "multiple" attribute to make that work. The site has no provision for multiple selections so it's a tad annoying when the search function selects more than one name in the list.

It doesn't really affect the site's operation but it could be confusing to some people. Is there a way to make the listbox show multiple selections without allowing multiple selections? Thanks for any help.

<select onchange="display.apply(this, this.value.split(','))" multiple="multiple" id="People" name="People" style="border-style: none; height:244px; width:220px; margin-bottom: 15px;">
<option>Loading</option>
</select>

Hello, today I am trying to allow a user to easily uncheck/check all checkboxes in a form by checking or unchecking a checkbox.

The checkboxes would be in a form like so:
Code:

<form action="" method="post">
<input type="checkbox" name="checked[]" value="1">
<input type="checkbox" name="checked[]" value="2">
<input type="checkbox" name="checked[]" value="3">
<input type="checkbox" name="checked[]" value="4">
</form>

I use an event handler to call a function:
Code:

<input type="checkbox" name="checkall" onchange="checkall('checked[]', this.checked)">

And here is the function:
Code:

function checkall(box_name, current_state) {
	all = document.getElementsByName(box_name);
	action = (current_state ==  "checked") ? "false" : "true";
	for (i = 0; i < all.length; i++) {
		all[i].checked=action;
	}
}

The event handler should pass the name of the checkboxes and whether the "check all" checkbox is currently checked or not to the checkall() function. Nothing happens when I check/uncheck the "check all" function. Help?

This script works via "elem.checked" which is great for checkboxes (see http://javascript.internet.com/forms...heckboxes.html), but I need it to work with image buttons instead where there is no "checking" going on. Is this possible?

I tried elem.onclick and elem.clicked but neither works. I don't know enough about onclick conditionals. Please help.

Code:

function UpdateCost() {
  var sum = 0;
  var gn, elem;
  for (i=0; i<4; i++) {
    gn = 'game'+i;
    elem = document.getElementById(gn);
    if (elem.checked == true) { sum += Number(elem.value); }
  }
  document.getElementById('totalcost').value = sum.toFixed(2);
}

tl;dr: Want to make the above work with <a onclick="UpdateCost()"><img></a>, not <input type="checkbox" onclick="UpdateCost()">

I am trying to get a link that when clicked it will check all the checkboxes in my form.

My problem is that my values are stored in an array:
<INPUT TYPE=\"checkbox\" name=\"emailArray[]\" value=\"$email\">


print"<br><a href=\"#\" onClick=\"checkAll()\">check all</a><br>";

Here is my javascript function :
function checkAll(){
alert('hi');
var df = document.selectEmailForm.elements;

for (var i = 0; i < df.length; i++) {
if (df[i].name == "emailArray[]" ) {
document.selectEmailForm.emailArray[i].checked=true;
}
}
}

Any ideas? Any help is greatly appreciated.
Thanks for your time!

irst post here, i'll try to be simple: I need to create a form where participants of a medical convention register to classes, each class lasts 3 hours, so a person who wants to attend to class starting at 10 am cannot register to 11 am, 12pm and 1pm classes, but he can register to 2pm and so on.

There are 3 different classes per hour.

i thought doing this using javascript, but i'm absolutely lost.

Can you please give me a hint on how to do this?

Thanks!!

this is the part of the form that has the checkboxes.

<form method="post" action="process.php"></form>
<input type="checkbox" value="101" name="convention1"> 10 am: Cariovascular desease<br>
<input type="checkbox" value="102" name="convention2"> 10 am: Changes on toracic surgeon<br>
<input type="checkbox" value="103" name="convention3"> 10 am: New drugs on heart<br>
<input type="checkbox" value="111" name="convention4"> 11 am: New drugs on heart (II)<br>
<input type="checkbox" value="112" name="convention5"> 11 am: Dynamic process on blood pressure<br>
<input type="checkbox" value="113" name="convention6"> 11 am: Aortic disease<br>
<input type="checkbox" value="121" name="convention7"> 12 am: Pulmonar Pressure<br>
<input type="checkbox" value="122" name="convention8"> 12 am: Open table<br>
<input type="checkbox" value="131" name="convention9"> 1 pm: Neurological aspects on heart rate<br>
<input type="checkbox" value="132" name="convention10"> 1 pm: Cardiovascular disease (II)<br>
<input type="checkbox" value="133" name="convention11"> 1 pm: Mioresponse on heart failure<br>
<input type="checkbox" value="141" name="convention12"> 2 pm<br>
<input type="checkbox" value="142" name="convention13"> 2 pm<br>
<input type="checkbox" value="143" name="convention14"> 2 pm<br>
<input type="checkbox" value="151" name="convention15"> 3 pm<br>
<input type="checkbox" value="152" name="convention16"> 3 pm<br>
<input type="checkbox" value="153" name="convention17"> 3 pm<br>
<input type="submit"></input>
</form>

from a browser address bar command? say if a page has hundreds of checkboxes, and I needed to check them all, but only 2-3 should be left out, how do i input a browser command line, to check it all, so i will manually uncheck the 2 or 3 thats not needed?