By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
426,011 Members | 1,000 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 426,011 IT Pros & Developers. It's quick & easy.

Multiple select box, pop up question

100+
P: 769
Hey Everyone,

Well i am not sure if my question needs to be here or in coldfusion. If i have my question is in the wrong section i am sorry in advance an will move it to the correct section.

Basically i have a multiple select box. An it works except for this one part i want to add to it.The first box i have is called project members which shows the users you can choose to send an email to and the other box is called assignees which is the users that you selected to send an email to.

What i am trying to do is instead of just choosing the users you want to send an email to and click submit. i want them to be required to select this check box that appears below it called assignees.If the check box is selected (and there are users in the assignees box) it will send an email to the the users selected when i click on submit.However, if the check box is not selected i need it be able to do 2 things. If there are users in the assignees box i need an error to pop up saying that they need to select the check box. But if there are no users in the assignees box then i need no errors to come up an just submit the form.

Right now the only thing i have working is i can send an email to the user selected as long as the check box is selected. if the check box is not selected it will not send an email an you get a nice cold fusion error. Its mostly getting the pop up working that i am not sure about.

But thank you in advance for all the help,
Rach

here is the form
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Untitled Document</title>
  6.  
  7. <!---Multiple select box for assignees--->
  8. <script src="multipleselectbox.js"></script>
  9.  
  10. <style type="text/css">
  11.  
  12.  
  13.     .multipleSelectBoxControl span{    /* Labels above select boxes*/
  14.         font-family: Tahoma;
  15.         font-size:13px;
  16.         font-weight: bold;
  17.     }
  18.     .multipleSelectBoxControl div select{    /* Select box layout */
  19.         font-family:arial;
  20.         height:100%;
  21.     }
  22.     .multipleSelectBoxControl input{    /* Small butons */
  23.         width:25px;    
  24.     }
  25.  
  26.     .multipleSelectBoxControl div{
  27.         float:left;
  28.     }
  29.  
  30.     .multipleSelectBoxDiv
  31.     </style>
  32.  
  33. </head>
  34.  
  35. <body>
  36. <!--- Assignees --->
  37.       <form action="userform.cfm" id="userForm"  name="userForm" method="POST">                         
  38. Project Members:
  39.  
  40. <select multiple name="fromBox" id="fromBox">
  41.     <option value="s@yahoo.com">Rachel</option>
  42.     <option value="p@Yahoo.com">Rae</option>
  43.     <option value="r@hotmail.com">Work</option>
  44. </select>
  45. <select multiple name="toBox" id="toBox">
  46.  
  47. </select>
  48. <script type="text/javascript">
  49. createMovableOptions("fromBox","toBox",350,150,'Project Members','Assignees');
  50. </script>
  51. <br/><br/>
  52. Send Email To:<br/>
  53.  
  54. <input type="checkbox" name="assignees" id="assignees" value="" onclick="javascript:multipleSelectOnSubmit();"/>Assignees<br/>
  55. <input type="checkbox" name="contact" value=""/>Contact <br/>
  56. CC:<input type="text" name="contactemail" id="contactemail" value=""/><br/><br/>
  57. <input type="submit" class="officalsubmit" value="submit" name="submit" onClick="return validate_form();">
  58. </form>
  59. </body>
  60. </html>
  61.  
here is multipleselectbox.js

Expand|Select|Wrap|Line Numbers
  1. var fromBoxArray = new Array();
  2.     var toBoxArray = new Array();
  3.     var selectBoxIndex = 0;
  4.     var arrayOfItemsToSelect = new Array();
  5.  
  6.  
  7.     function moveSingleElement()
  8.     {
  9.         var selectBoxIndex = this.parentNode.parentNode.id.replace(/[^\d]/g,'');
  10.         var tmpFromBox;
  11.         var tmpToBox;
  12.         if(this.tagName.toLowerCase()=='select'){            
  13.             tmpFromBox = this;
  14.             if(tmpFromBox==fromBoxArray[selectBoxIndex])tmpToBox = toBoxArray[selectBoxIndex]; else tmpToBox = fromBoxArray[selectBoxIndex];
  15.         }else{
  16.  
  17.             if(this.value.indexOf('>')>=0){
  18.                 tmpFromBox = fromBoxArray[selectBoxIndex];
  19.                 tmpToBox = toBoxArray[selectBoxIndex];            
  20.             }else{
  21.                 tmpFromBox = toBoxArray[selectBoxIndex];
  22.                 tmpToBox = fromBoxArray[selectBoxIndex];    
  23.             }
  24.         }
  25.  
  26.         for(var no=0;no<tmpFromBox.options.length;no++){
  27.             if(tmpFromBox.options[no].selected){
  28.                 tmpFromBox.options[no].selected = false;
  29.                 tmpToBox.options[tmpToBox.options.length] = new Option(tmpFromBox.options[no].text,tmpFromBox.options[no].value);
  30.  
  31.                 for(var no2=no;no2<(tmpFromBox.options.length-1);no2++){
  32.                     tmpFromBox.options[no2].value = tmpFromBox.options[no2+1].value;
  33.                     tmpFromBox.options[no2].text = tmpFromBox.options[no2+1].text;
  34.                     tmpFromBox.options[no2].selected = tmpFromBox.options[no2+1].selected;
  35.                 }
  36.                 no = no -1;
  37.                 tmpFromBox.options.length = tmpFromBox.options.length-1;
  38.  
  39.             }            
  40.         }
  41.  
  42.  
  43.         var tmpTextArray = new Array();
  44.         for(var no=0;no<tmpFromBox.options.length;no++){
  45.             tmpTextArray.push(tmpFromBox.options[no].text + '___' + tmpFromBox.options[no].value);            
  46.         }
  47.         tmpTextArray.sort();
  48.         var tmpTextArray2 = new Array();
  49.         for(var no=0;no<tmpToBox.options.length;no++){
  50.             tmpTextArray2.push(tmpToBox.options[no].text + '___' + tmpToBox.options[no].value);            
  51.         }        
  52.         tmpTextArray2.sort();
  53.  
  54.         for(var no=0;no<tmpTextArray.length;no++){
  55.             var items = tmpTextArray[no].split('___');
  56.             tmpFromBox.options[no] = new Option(items[0],items[1]);
  57.  
  58.         }        
  59.  
  60.         for(var no=0;no<tmpTextArray2.length;no++){
  61.             var items = tmpTextArray2[no].split('___');
  62.             tmpToBox.options[no] = new Option(items[0],items[1]);            
  63.         }
  64.     }
  65.  
  66.     function sortAllElement(boxRef)
  67.     {
  68.         var tmpTextArray2 = new Array();
  69.         for(var no=0;no<boxRef.options.length;no++){
  70.             tmpTextArray2.push(boxRef.options[no].text + '___' + boxRef.options[no].value);            
  71.         }        
  72.         tmpTextArray2.sort();        
  73.         for(var no=0;no<tmpTextArray2.length;no++){
  74.             var items = tmpTextArray2[no].split('___');
  75.             boxRef.options[no] = new Option(items[0],items[1]);            
  76.         }        
  77.  
  78.     }
  79.     function moveAllElements()
  80.     {
  81.         var selectBoxIndex = this.parentNode.parentNode.id.replace(/[^\d]/g,'');
  82.         var tmpFromBox;
  83.         var tmpToBox;        
  84.         if(this.value.indexOf('>')>=0){
  85.             tmpFromBox = fromBoxArray[selectBoxIndex];
  86.             tmpToBox = toBoxArray[selectBoxIndex];            
  87.         }else{
  88.             tmpFromBox = toBoxArray[selectBoxIndex];
  89.             tmpToBox = fromBoxArray[selectBoxIndex];    
  90.         }
  91.  
  92.         for(var no=0;no<tmpFromBox.options.length;no++){
  93.             tmpToBox.options[tmpToBox.options.length] = new Option(tmpFromBox.options[no].text,tmpFromBox.options[no].value);            
  94.         }    
  95.  
  96.         tmpFromBox.options.length=0;
  97.         sortAllElement(tmpToBox);
  98.  
  99.     }
  100.  
  101.  
  102.     /* This function highlights options in the "to-boxes". It is needed if the values should be remembered after submit. Call this function onsubmit for your form */
  103.     function multipleSelectOnSubmit()
  104.     {
  105.         for(var no=0;no<arrayOfItemsToSelect.length;no++){
  106.             var obj = arrayOfItemsToSelect[no];
  107.             for(var no2=0;no2<obj.options.length;no2++){
  108.  
  109.                 obj.options[no2].selected = true;
  110.             }
  111.         }
  112.  
  113.     }
  114.  
  115.     function createMovableOptions(fromBox,toBox,totalWidth,totalHeight,labelLeft,labelRight)
  116.     {        
  117.         fromObj = document.getElementById(fromBox);
  118.         toObj = document.getElementById(toBox);
  119.  
  120.         arrayOfItemsToSelect[arrayOfItemsToSelect.length] = toObj;
  121.  
  122.  
  123.         fromObj.ondblclick = moveSingleElement;
  124.         toObj.ondblclick = moveSingleElement;
  125.  
  126.  
  127.         fromBoxArray.push(fromObj);
  128.         toBoxArray.push(toObj);
  129.  
  130.         var parentEl = fromObj.parentNode;
  131.  
  132.         var parentDiv = document.createElement('DIV');
  133.         parentDiv.className='multipleSelectBoxControl';
  134.         parentDiv.id = 'selectBoxGroup' + selectBoxIndex;
  135.         parentDiv.style.width = totalWidth + 'px';
  136.         parentDiv.style.height = totalHeight + 'px';
  137.         parentEl.insertBefore(parentDiv,fromObj);
  138.  
  139.  
  140.         var subDiv = document.createElement('DIV');
  141.         subDiv.style.width = (Math.floor(totalWidth/2) - 15) + 'px';
  142.         fromObj.style.width = (Math.floor(totalWidth/2) - 15) + 'px';
  143.  
  144.         var label = document.createElement('SPAN');
  145.         label.innerHTML = labelLeft;
  146.         subDiv.appendChild(label);
  147.  
  148.         subDiv.appendChild(fromObj);
  149.         subDiv.className = 'multipleSelectBoxDiv';
  150.         parentDiv.appendChild(subDiv);
  151.  
  152.  
  153.         var buttonDiv = document.createElement('DIV');
  154.         buttonDiv.style.verticalAlign = 'middle';
  155.         buttonDiv.style.paddingTop = (totalHeight/2) - 50 + 'px';
  156.         buttonDiv.style.width = '30px';
  157.         buttonDiv.style.textAlign = 'center';
  158.         parentDiv.appendChild(buttonDiv);
  159.  
  160.         var buttonRight = document.createElement('INPUT');
  161.         buttonRight.type='button';
  162.         buttonRight.value = '>';
  163.         buttonDiv.appendChild(buttonRight);    
  164.         buttonRight.onclick = moveSingleElement;    
  165.  
  166.         var buttonAllRight = document.createElement('INPUT');
  167.         buttonAllRight.type='button';
  168.         buttonAllRight.value = '>>';
  169.         buttonAllRight.onclick = moveAllElements;
  170.         buttonDiv.appendChild(buttonAllRight);        
  171.  
  172.         var buttonLeft = document.createElement('INPUT');
  173.         buttonLeft.style.marginTop='10px';
  174.         buttonLeft.type='button';
  175.         buttonLeft.value = '<';
  176.         buttonLeft.onclick = moveSingleElement;
  177.         buttonDiv.appendChild(buttonLeft);        
  178.  
  179.         var buttonAllLeft = document.createElement('INPUT');
  180.         buttonAllLeft.type='button';
  181.         buttonAllLeft.value = '<<';
  182.         buttonAllLeft.onclick = moveAllElements;
  183.         buttonDiv.appendChild(buttonAllLeft);
  184.  
  185.         var subDiv = document.createElement('DIV');
  186.         subDiv.style.width = (Math.floor(totalWidth/2) - 15) + 'px';
  187.         toObj.style.width = (Math.floor(totalWidth/2) - 15) + 'px';
  188.  
  189.         var label = document.createElement('SPAN');
  190.         label.innerHTML = labelRight;
  191.         subDiv.appendChild(label);
  192.  
  193.         subDiv.appendChild(toObj);
  194.         parentDiv.appendChild(subDiv);        
  195.  
  196.         toObj.style.height = (totalHeight - label.offsetHeight) + 'px';
  197.         fromObj.style.height = (totalHeight - label.offsetHeight) + 'px';
  198.  
  199.  
  200.         selectBoxIndex++;
  201.  
  202.     }
an here is the userform.cfm page

Expand|Select|Wrap|Line Numbers
  1. <cfmail to="#form.toBox#"
  2.     from="Customer Support Email Alert <Reports@howardcomputers.com>"
  3.     subject="Customer Support Email Notification"
  4.     type="HTML">
  5.     <cfinclude template="printticket.cfm">
  6. </cfmail>
  7.  
Sep 3 '08 #1
Share this Question
Share on Google+
25 Replies


acoder
Expert Mod 15k+
P: 16,027
Create a validation function to call in the form onsubmit event:
Expand|Select|Wrap|Line Numbers
  1. <form ... onsubmit="return validate()">
In the validate() function, perform your validation. First get the checkbox element. Use the checked property to check if it has been checked. Access the Assignees box element and loop through the options to see if any are selected. If not, you can use alert() to display a message. Alternatively, you can just display an error message next to the element using DOM methods. If it passes validation, return true to submit and false otherwise to prevent submission.
Sep 3 '08 #2

100+
P: 769
Hey Acoder,

well i was wondering could i just put it with another validation page i have now?
the original form is to long so i shorted it to show what i was working with. but anyway on my original form page i have this line

Expand|Select|Wrap|Line Numbers
  1. <input type="submit" class="officalsubmit" value="submit" name="submit" onClick="return validate_form();">
an was wondering if that was ok to leave it like that for validation?

an well this is what appears on my validation page.

Expand|Select|Wrap|Line Numbers
  1. function validate_form()
  2. {
  3. //VALIDATES HARDWARE
  4. var hardware = document.getElementById('hardwarefailure')
  5. var tag = document.getElementsByTagName('select')
  6.  
  7. for(var i=0; i<=tag.length-1; i++){
  8. //check each tag (tag[i]) to see if its hardware failure
  9.  //if it is, then see if its value is nothing
  10.  //Rachels Note (had to use name== instead of id because id is unique and the select each item does not need to be unique)
  11. if(tag[i].name=="hardwarefailure" && tag[i].value =='')
  12. {
  13.     alert ('Please Select Type of Hardware Failure');
  14.     return false;
  15. }
  16. }
  17. //VALIDATES DEPT/VENDOR RESPONSIBILTYS
  18. var dept = document.getElementById('deptvendor')
  19. var tag2 = document.getElementsByTagName('select')
  20.  
  21. for(var i=0; i<=tag2.length-1; i++){
  22. //check each tag (tag[i]) to see if its hardware failure
  23.  //if it is, then see if its value is nothing
  24. if(tag2[i].name=="deptvendor" && tag2[i].value =='')
  25. {
  26.     alert ('Please Select Dept/Vendor Responsibility');
  27.     return false;
  28. }
  29. }
  30. //VALIDATES PARTS RETURNED
  31. var parts = document.getElementById('partsreturn')
  32. var tag3 = document.getElementsByTagName('select')
  33.  
  34. for(var i=0; i<=tag3.length-1; i++){
  35. //check each tag (tag[i]) to see if its hardware failure
  36.  //if it is, then see if its value is nothing
  37. if(tag3[i].name=="partsreturn" && tag3[i].value =='')
  38. {
  39.     alert ('Please Select Have all parts been returned');
  40.     return false;
  41. }
  42. }
  43.  
  44. if(softhardware.value == ''){
  45. softhardware.value = 'NOW IT IS THIS' ;
  46. return false;
  47. }
  48.  
  49.  
  50.  
  51.  
  52.  
  53.  
  54. return true;
  55. }

but i am not sure how to check to see if the checkbox is checked. i have done a select an a input. but how would i do a checkbox?

Thank you again for all the help :),
Rach
Sep 3 '08 #3

acoder
Expert Mod 15k+
P: 16,027
You can add it to the current validate function.

To validate checkboxes, you'd normally loop over them, but if you only have one, you can just check it directly, e.g.
Expand|Select|Wrap|Line Numbers
  1. var chkbox = document.getElementById("chkboxID");
  2. if (chkbox.checked) {
  3.     //checkbox is checked...
  4. } else {
  5. // checkbox is not checked...
Sep 3 '08 #4

100+
P: 769
Hey Acoder,

Well i was on the right track that means. Figured out if the check box is not checked an had it displaying an alert, got that far. but anyway i changed mine to yours an this is what i have.

Expand|Select|Wrap|Line Numbers
  1. var chkbox = document.getElementById("assignees");
  2. if (chkbox.checked) {
  3.  
  4. }else {
  5.      alert ( "Checkbox 'assignees' must be selected in order to send email to assignees" );
  6.         return false;
  7. }
but how do i add the part about the tobox?

Thank you :),
Rach
Sep 3 '08 #5

acoder
Expert Mod 15k+
P: 16,027
If you've not got anything inside the if, it could be shortened to:
Expand|Select|Wrap|Line Numbers
  1. if (!chkbox.checked) {
  2.      alert ( "Checkbox 'assignees' must be selected in order to send email to assignees" );
For the multiple select box, access it by ID (or name), then use a for loop to loop over its options using the options array. This time you're checking the selected property.
Sep 3 '08 #6

100+
P: 769
Hey Acoder,

well i tried this, but its not working correctly. Did i do it wrong? heres the whole thing

Expand|Select|Wrap|Line Numbers
  1. var chkbox = document.getElementById("assignees");
  2. if (chkbox.checked) {
  3.  
  4. }else {
  5.      alert ( "Checkbox 'assignees' must be selected in order to send email to assignees" );
  6.         return false;
  7. }
  8.  
  9.  
  10. var selected = document.getElementById('toBox')
  11. var tag4 = document.getElementsByTagName('select')
  12.  
  13. for(var i=0; i<=tag4.length-1; i++){
  14. //check each tag (tag[i]) to see if its hardware failure
  15.  //if it is, then see if its value is nothing
  16. if(tag4[i].name=="toBox" && tag4[i].value =='')
  17. {
  18.     alert ('Please Select Dept/Vendor Responsibility');
  19.     return false;
  20. }
  21. }
  22.  
Thank you :),
Rach
Sep 3 '08 #7

acoder
Expert Mod 15k+
P: 16,027
Line 10 is the correct way to access it - get it directly rather than looping over all the select elements.

Then loop over selected.options. Check for options[i].selected.
Sep 3 '08 #8

100+
P: 769
Hey Acoder,

i am still doing something wrong,just not sure what. here is what i got


Expand|Select|Wrap|Line Numbers
  1. var selected = document.getElementById('toBox')
  2.  
  3. for(var i=0; i<=selected.options[i]; i++){
  4. //check each tag (tag[i]) to see if its hardware failure
  5.  //if it is, then see if its value is nothing
  6. if(selected.options[i].name=="toBox" && selected.options[i].value =='')
  7. {
  8.     alert ('Please Select a assignee');
  9.     return false;
  10. }
  11. }
Thank you,
Rach
Sep 3 '08 #9

acoder
Expert Mod 15k+
P: 16,027
You need to use another variable (boolean) and set it to false initially and true when you find an option selected. You also have problems in the for loop:
Expand|Select|Wrap|Line Numbers
  1. var selected = document.getElementById('toBox')
  2. var isSelected = false;
  3. for(var i = 0; i < selected.options.length; i++){
  4.     if (selected.options[i].selected) {
  5. ...
Sep 3 '08 #10

100+
P: 769
Hey Acoder,

Still missing something because when click submit now i get no errors an just takes me to the next page with or without the check box clicked an with or without anything in the multiple select box.

Expand|Select|Wrap|Line Numbers
  1. var chkbox = document.getElementById("assignees");
  2. if (chkbox.checked) {
  3.  
  4. }else {
  5.      alert ( "Checkbox 'assignees' must be selected in order to send email to assignees" );
  6.         return false;
  7. }
  8.  
  9. var selected = document.getElementById('toBox')
  10. var isSelected = false;
  11. for(var i=0; i<=selected.options.length; i++){
  12. if(selected.options[i].selected)
  13. {
  14.  
  15. }else{
  16.     alert ("Please Select a assignee");
  17.     return false;
  18. }
  19.  
  20.  
  21. return true;
  22. }
Thank you,
Rach
Sep 3 '08 #11

acoder
Expert Mod 15k+
P: 16,027
The alert has to be outside the loop. That's the whole point of the isSelected variable. If any option is selected, you set it to true in the loop. Outside the loop, check that isSelected is not true and display an alert:
Expand|Select|Wrap|Line Numbers
  1. if (!isSelected) {
  2.     alert(...
Sep 3 '08 #12

100+
P: 769
Hey Acoder,

I thought i understood what you said but i think i might of gotten confused. Here is what i tried

Expand|Select|Wrap|Line Numbers
  1. var chkbox = document.getElementById("assignees");
  2. if (chkbox.checked) {
  3. }else {
  4.      alert ( "Checkbox 'assignees' must be selected in order to send email to assignees" );
  5.         return false;
  6. }
  7.  
  8. var selected = document.getElementById('toBox')
  9. var isSelected = false;
  10. for(var i=0; i<=selected.options.length; i++){
  11. if(selected.options[i].selected){    
  12. }    
  13. }
  14. if (!isSelected){
  15.     alert ("Please Select a assignee");
  16.     return false;}
  17.  
  18.  
  19.  
  20. return true;
  21. }
  22.  
Thank you,
Rach
Sep 3 '08 #13

acoder
Expert Mod 15k+
P: 16,027
You have to set isSelected to true in the if statement and the for loop should loop from 0 to length-1:
Expand|Select|Wrap|Line Numbers
  1. for(var i=0; i<=selected.options.length-1; i++){
  2.     if(selected.options[i].selected){
  3.         isSelected = true;
  4.         break;
  5.     }    
  6. }
Sep 4 '08 #14

100+
P: 769
Hey Acoder,

here is what i got. on the if (!isSelected) do i need to change the if to an else? because the checkbox is working right now but the other part is not working.

Expand|Select|Wrap|Line Numbers
  1. var chkbox = document.getElementById("assignees");
  2. if (chkbox.checked) {
  3. }else {
  4.      alert ( "Checkbox 'assignees' must be selected in order to send email to assignees" );
  5.         return false;
  6. }
  7.  
  8. var selected = document.getElementById("toBox")
  9. var isSelected = false;
  10. for(var i=0; i<=selected.options.length-1; i++){
  11. if(selected.options[i].selected ){    
  12. isSelected = true;
  13. break;
  14. }    
  15. }
  16. if (!isSelected){
  17.     alert ("Please Select a assignee");
  18.     return false;}
  19.  
  20.  
  21.  
  22. return true;
  23. }
  24.  
Thank you,
Rach
Sep 4 '08 #15

acoder
Expert Mod 15k+
P: 16,027
When you say it's not working, what's happening instead?
Sep 4 '08 #16

100+
P: 769
When you say it's not working, what's happening instead?
Hey Acoder,

Right now what happens is when i test it with no checkbox check an i click submit i get the error for the checkbox. So then i click the checkbox an click submit again an i get the same error. its like its not getting past checkbox to get to the selected box. i am thinking maybe i didn't get something closed out on my validation page but i am not sure what since i looked it over an it looked ok. here is what i got

Expand|Select|Wrap|Line Numbers
  1. function validate_form()
  2. {
  3. //VALIDATES TYPE OF HARDWARE FAILURE
  4. var hardware = document.getElementById('hardwarefailure')
  5. var tag = document.getElementsByTagName('select')
  6.  
  7. for(var i=0; i<=tag.length-1; i++){
  8. //check each tag (tag[i]) to see if its hardware failure
  9.  //if it is, then see if its value is nothing
  10.  //Rachels Note (had to use name== instead of id because id is unique and the select each item does not need to be unique)
  11. if(tag[i].name=="hardwarefailure" && tag[i].value =='')
  12. {
  13.     alert ('Please Select Type of Hardware Failure');
  14.     return false;
  15. }
  16. }
  17. //VALIDATES DEPT/VENDOR RESPONSIBILTYS
  18. var dept = document.getElementById('deptvendor')
  19. var tag2 = document.getElementsByTagName('select')
  20.  
  21. for(var i=0; i<=tag2.length-1; i++){
  22. //check each tag (tag[i]) to see if its hardware failure
  23.  //if it is, then see if its value is nothing
  24. if(tag2[i].name=="deptvendor" && tag2[i].value =='')
  25. {
  26.     alert ('Please Select Dept/Vendor Responsibility');
  27.     return false;
  28. }
  29. }
  30. //VALIDATES HAVE ALL PARTS BEEN RETURNED
  31. var parts = document.getElementById('partsreturn')
  32. var tag3 = document.getElementsByTagName('select')
  33.  
  34. for(var i=0; i<=tag3.length-1; i++){
  35. //check each tag (tag[i]) to see if its hardware failure
  36.  //if it is, then see if its value is nothing
  37. if(tag3[i].name=="partsreturn" && tag3[i].value =='')
  38. {
  39.     alert ('Please Select Have all parts been returned');
  40.     return false;
  41. }
  42. }
  43.  
  44. //if(softhardware.value == ''){
  45. //softhardware.value = 'NOW IT IS THIS' ;
  46. //return false;
  47. //}
  48. //
  49. //if (document.userForm.assignees.checked == false)
  50. //    {
  51. //       alert ( "Checkbox 'assignees' must be selected in order to send email to assignees" );
  52. //        return false; 
  53. //    }
  54.  
  55.  
  56.  
  57.  
  58. var chkbox = document.getElementById('assignees');
  59. if (chkbox.checked) {
  60. }else {
  61.      alert ( "Checkbox 'assignees' must be selected in order to send email to assignees" );
  62.         return false;
  63. }
  64.  
  65. var selected = document.getElementById('toBox')
  66. var isSelected = false;
  67. for(var i=0; i<=selected.options.length-1; i++){
  68. if(selected.options[i].selected ){    
  69. isSelected = true;
  70. break;
  71. }    
  72. }
  73. if (!isSelected ){
  74.     alert ("Please Select a assignee");
  75.     return false;}
  76.  
  77.  
  78.  
  79. return true;
  80. }
but basically the checkbox checked or not i still get an error. even when i put people in the selected box i still got the error.

Thank you,
Rach
Sep 4 '08 #17

acoder
Expert Mod 15k+
P: 16,027
Hmm, not sure why it's not working. It may have something to do with how the toBox options are generated. Do you select them after moving the options from the fromBox?
Sep 4 '08 #18

100+
P: 769
Hey Acoder,

I figured out the problem. it was having a problem with the check box. However, i still have a problem. here is what i got as of now.

Expand|Select|Wrap|Line Numbers
  1. if (document.userForm.assignees.checked == true)
  2.    {
  3.    }else  {alert ( "Checkbox 'assignees' must be selected in order to send email to assignees" );
  4.   return false; }
  5.  
  6.  
  7.  
  8. var selected = document.getElementById('toBox')
  9. var isSelected = false;
  10. for(var i=0; i<=selected.options.length-1; i++){
  11. if(selected.options[i].selected ){    
  12. isSelected = true;
  13. break;
  14. }    
  15. }
  16. if (!isSelected ){
  17.     alert ("Please Select a assignee");
  18.     return false;}
  19.  
  20.  
  21. return true;
  22. }
the problems i am having is this. The form needs to still send even if an assignee is not selected an a check box is not selected (both of those together must not be selected for it to still send) if a check box is selected but no assignee it needs to bring an error an if a assignee is selected an a check box is not selected it needs to bring up an error.An the other problem i am having is when the errors come up the first problem i get is this. it first asks me to select the check box. i select the check box. then it asks me to select an assignee. i then select an assignee. it then asks me again to select an assignee again. an i found out the only way to prevent that error from continuing to come up is if i deselect the check box an reselect the checkbox. Anyway to accomplish all this?

Thank you,
Rach
Sep 4 '08 #19

acoder
Expert Mod 15k+
P: 16,027
To accomplish the first part, you need to make the toBox validation check in the if statement, e.g.
Expand|Select|Wrap|Line Numbers
  1. if (document.userForm.assignees.checked) {
  2.     var selected = document.getElementById('toBox')
  3.     var isSelected = false;
  4.     for(var i=0; i<=selected.options.length-1; i++){
  5.         if(selected.options[i].selected ){    
  6.             isSelected = true;
  7.             break;
  8.         }    
  9.     }
  10.     if (!isSelected ){
  11.     alert ("Please Select a assignee");
  12.     return false;
  13.     }
  14. }
I think it shouldn't matter if some options are selected and the checkbox is not selected. You can easily make a check on the server-side to avoid sending emails if the assignees checkbox hasn't been checked.
Sep 4 '08 #20

100+
P: 769
Hey Acoder,

i hear what your saying but i am trying to get an error if the assignees is selected and checkbox not an vis versa because i know that if i don't bring up an error for either situation an that form gets sent an someone don't get there email that it will come back on me an they will tell me to add this in later (we don't got the brightest tools in the tool box). i know its a pain an don't seem practical. normally i just apply it to the checkbox where if they didn't select the check box it don't send. but knowing my luck they will select the check box an forget to select who they need to send to.

but is there anyway to do all 3?

Thank you :),
Rach
Sep 4 '08 #21

acoder
Expert Mod 15k+
P: 16,027
In that case, call that function in the form validation function rather than onclick of the checkbox. Call it after the form passes validation, i.e. just before return true.

As for the validation both ways of the checkbox and the select element, just check for the checked property and the selected property without any alert just be setting a variable, i.e. isChecked/isSelected. Then combine the two, i.e. if isChecked is true, but isSelected is not, then there's an error and also vice versa, but if both are true or both are false, it's OK.
Sep 4 '08 #22

100+
P: 769
Hey Acoder,

i got the onclick working by putting onclick in the form. so every time something is added into toBox it is selected on.

But ok here is what i tried to do, but i kinda got confused in the middle of it.
Expand|Select|Wrap|Line Numbers
  1.       if (document.userForm.assignees.checked == true) {
  2.           var selected = document.getElementById('toBox')
  3.           var isSelected = false;
  4.           for(var i=0; i<=selected.options.length-1; i++){
  5.               if(selected.options[i].selected ){ 
  6.                   isSelected = true;
  7.                   break;
  8.               }   
  9.           }
  10.           if (!isSelected ){
  11.           alert ("Checkbox 'assignees' must be selected in order to send email to assignees");
  12.           return false;
  13.           }
  14.  
  15.       }
  16.  
  17.  if (selected.options[i].selected) {
  18.          var check = document.getElementByID('assignees')
  19.          var isChecked = false;
  20.           for(var i=0; i<=check.checked.length-1; i++){
  21.               if(check.checked){ 
  22.                   isChecked = true;
  23.                   break;
  24.               }   
  25.           }
  26.           if (!isChecked ){
  27.           alert ("Please Select a assignee");
  28.           return false;
  29.           }
  30.  
  31.       }
Thank you again for all the help (an sorry this is having to be so difficult),
Rach
Sep 4 '08 #23

acoder
Expert Mod 15k+
P: 16,027
There'd be too much redundancy that way. Try:
Expand|Select|Wrap|Line Numbers
  1. var isChecked = document.userForm.assignees.checked;
  2. var selected = document.getElementById('toBox')
  3. var isSelected = false;
  4. for(var i=0; i<=selected.options.length-1; i++){
  5.     if(selected.options[i].selected ){ 
  6.         isSelected = true;
  7.         break;
  8.     }   
  9. }
  10. // now you have isChecked and isSelected set, combine the two
  11. if (!isSelected && isChecked){
  12.     alert ("Checkbox 'assignees' must be selected in order to send email to assignees");
  13.     return false;
  14. }
  15. if (!isChecked && isSelected){
  16.     alert ("Please Select a assignee");
  17.     return false;
  18. }
Do you see how it works?
Sep 5 '08 #24

100+
P: 769
Hey Acoder,

i see how it works/looks a lot better then what i was trying lol. tried for a few hours to get it working but i got nothing. but THANK YOU so much for all the help!

But i do got another question. But its more of a just i want to know type question. In the part where it says if(). i see how you do a select an a input. But i am wondering how would i do a checkbox? . here is what i had tried
Expand|Select|Wrap|Line Numbers
  1.   for(var i=0; i<=document.form.check.length; i++){
  2.               if(document.form.check[i].checked){ 
  3.                   isChecked = true;
  4.                   break;
  5.               }  } 
but i tried all day to just do a check box an i looked online but there so many different ways to do it an none of them that i tried worked. but if you could explain how to do a check box that would be awesome because it was driving me nuts all night.

But thank you again for all the help, your awesome!!!

Thank you!!!
Rach
Sep 5 '08 #25

acoder
Expert Mod 15k+
P: 16,027
You made the same mistake of checking for one more than the number of checkboxes. Either remove the =:
Expand|Select|Wrap|Line Numbers
  1. for(var i=0; i<document.form.check.length; i++){
or loop till length-1:
Expand|Select|Wrap|Line Numbers
  1. for(var i=0; i<=document.form.check.length-1; i++){
Sep 5 '08 #26

Post your reply

Sign in to post your reply or Sign up for a free account.