Solved

selectbox and checkboxes

Posted on 2004-10-06
6
588 Views
Last Modified: 2009-07-29
hi everyone...
i have a form in which i have a group of checkboxes and a selectbox
i have a js which populates the selectbox with the value of the checkbox when it is checked

and when it is unchecked the js removes the option from the selectbox.

but i have another function which writes the options of the selectbox when the page submits
its just that i use a js to grab the options of the selectbox and write to them again when the page submits.

all i need now is.. i want to check whether the vaue is there in the selectbox.. if the value exists and the checkbox is unchecked i need to remove it. or else when the checkbox is checked again i want to check first if the value exists in the selecbox.. if not i need to append again..
0
Comment
Question by:archrajan
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
6 Comments
 
LVL 33

Expert Comment

by:knightEknight
ID: 12238517
show us the code
0
 
LVL 25

Author Comment

by:archrajan
ID: 12238853
<html>
<head>
<script>
function WriteCookie(cookieName,cookieValue)
{
   var expDate = new Date();
   expDate.setTime (expDate.getTime() + 3600000);
   var expDetails="; expires=" + expDate.toGMTString() + "; path=/";
   document.cookie=''+cookieName+"=" + cookieValue + expDetails+'';
}

function DeleteCookie(cookieName, cookieValue)
{
   var expDate = new Date();
   expDate.setTime (expDate.getFullYear() - 10);
   var expDetails="; expires=" + expDate.toGMTString() + "; path=/";
   document.cookie=''+cookieName+"=" + cookieValue + expDetails+'';

}

function frmSubmit()
{
      var len = document.testFrm.COLUMNS.options.length;
      var str = "";
      for(var i = 0; i < len; i++)
      {
            str += document.testFrm.COLUMNS.options[i].value;
            str += ",";
      }
      //for(var i=0; i<len;i++)
      //{
      
      //document.testFrm.COLUMNS.options[i].value="";
      //}

      WriteCookie("lstValues", str);
      document.testFrm.submit();
}

function populateList(obj)
{
      if(obj.checked)
      {
            var opt = new Option();
            opt.value = obj.value;
            opt.text = obj.value;
            opt.name = obj.name;

            var opt1 = new Option();
            opt1.value = obj.name;
            opt1.text = obj.name;
            opt1.name = obj.name;
            var lengt = document.testFrm.COLUMNS.options.length;
            var lengt1 = document.testFrm.COLUMNS1.options.length;
            //alert(lengt);
            
            document.testFrm.COLUMNS.options[lengt] = opt;
            
            document.testFrm.COLUMNS1.options[lengt] = opt1;
            //alert(opt);

      }
      else
      {
            for(var i = 0; i < document.testFrm.COLUMNS.options.length; i++)
            {
                  if(document.testFrm.COLUMNS.options[i].value == obj.value)
                  {
                        document.testFrm.COLUMNS.remove(i);
                        // This is the code for removing by normal means without using DOM but a a very complicated one...
                        /*document.testFrm.COLUMNS.options[i].value = "";
                        document.testFrm.COLUMNS.options[i].text = "";*/
                        break;
                  }
            }
            //refreshList();

      }

}
/*
function refreshList()
{
      for(var i = 0; i < document.testFrm.COLUMNS.options.length; i++)
            {
                        if(document.testFrm.COLUMNS.options[i].value == "")
                        {
                              for(var j = i; j < document.testFrm.COLUMNS.options.length - 1; j++)
                              {
                                    document.testFrm.COLUMNS.options[j].value =                                     document.testFrm.COLUMNS.options[j + 1].value;
                                    document.testFrm.COLUMNS.options[j].text =                               document.testFrm.COLUMNS.options[j + 1].text;
                              }
                              var ln = i;
                              break;
                        }


            }
      if(ln < document.testFrm.COLUMNS.options.length)  {
            document.testFrm.COLUMNS.options.length -= 1;
            refreshList(document.testFrm.COLUMNS);
   }
}*/
function MoveUp() {
//for(var i = 0; i < document.testFrm.COLUMNS.options.length; i++) {
      var i = document.testFrm.COLUMNS.selectedIndex;
      if(i == -1)
            return;
      var tmpval = document.testFrm.COLUMNS.options[i].value;
      var tmpval2 = document.testFrm.COLUMNS.options[i].text;
      var tmpval3 = document.testFrm.COLUMNS.options[i].name;
      if (i != 0)
      {

            document.testFrm.COLUMNS.options[i].value = document.testFrm.COLUMNS.options[i - 1].value;
            document.testFrm.COLUMNS.options[i].text = document.testFrm.COLUMNS.options[i - 1].text
            document.testFrm.COLUMNS.options[i].name = document.testFrm.COLUMNS.options[i-1].name;
            document.testFrm.COLUMNS.options[i-1].value = tmpval;
            document.testFrm.COLUMNS.options[i-1].text = tmpval2;
            document.testFrm.COLUMNS.options[i-1].name = tmpval3;
            document.testFrm.COLUMNS.selectedIndex = i-1;

      }
  // }
}
function MoveDown() {
      var i = document.testFrm.COLUMNS.selectedIndex;
      if(i == -1)
            return;
      var tmpval = document.testFrm.COLUMNS.options[i].value;
      var tmpval2 = document.testFrm.COLUMNS.options[i].text;
      var tmpval3 = document.testFrm.COLUMNS.options[i].name;

            if ( i != document.testFrm.COLUMNS.options.length - 1)
            {
                  document.testFrm.COLUMNS.options[i].value = document.testFrm.COLUMNS.options[i+1].value;
                  document.testFrm.COLUMNS.options[i].text = document.testFrm.COLUMNS.options[i+1].text;
                  document.testFrm.COLUMNS.options[i].name = document.testFrm.COLUMNS.options[i+1].name;
                  document.testFrm.COLUMNS.options[i+1].value = tmpval;
                  document.testFrm.COLUMNS.options[i+1].text = tmpval2;
                  document.testFrm.COLUMNS.selectedIndex = i + 1;

              }

}
function MoveToTop()
{
      var i = document.testFrm.COLUMNS.selectedIndex;
      if(i == -1)
            return;
      for(var j = i; j > 0; j--)
      {
            MoveUp();

      }
      document.testFrm.COLUMNS.selectedIndex = 0;

}
function MoveToBottom()
{
      var i = document.testFrm.COLUMNS.selectedIndex;
      if(i == -1)
            return;
      var lastIndex = document.testFrm.COLUMNS.options.length - 1;

      for(var j = i; j < document.testFrm.COLUMNS.options.length; j++)
      {
            MoveDown();
      }

      document.testFrm.COLUMNS.selectedIndex = lastIndex;

}




function init()
{

            var frm = document.testFrm;

            var cookieVal = getCookie("lstValues");

            if(cookieVal != "")
            {
                  populateListBoxFromCookie(cookieVal);
                  DeleteCookie("lstValues", cookieVal);
                  

            }

            else
            {

                  for(var i = 0; i < frm.elements.length; i++)
                  {
                        if(frm.elements[i].type == "checkbox")
                        {
                              if(frm.elements[i].checked && !frm.elements[i].disabled )
                              {
                                    populateList(frm.elements[i]);
                              }

                        }
                  }
            }

}

function init2()
{

            var frm = document.testFrm;

            for(var i = 0; i < frm.elements.length; i++)
            {
                  if(frm.elements[i].type == "checkbox")
                  {

                              populateList(frm.elements[i]);


                  }
            }
}

function exit()
{
var a=document.testFrm.COLUMNS;
for (var i=0;i<a.length; i++)
{
alert(a.options[i].value)
}
}

function checkall(doc)
{
var a =0;
//alert(doc.elements.length);
for (i=0; i<doc.elements.length; i++)
{
if (doc.elements[i].type == "checkbox" && !doc.elements[i].checked )
a++;
//alert(a);
}

{
for (i = 0; i < a; i++)
if(doc.elements[i].checked == false && !doc.elements[i].checkdisabled)
      doc.elements[i].checked = true ;
}
init2();
}
function uncheckall(doc)
{
var a =0;
for (i=0; i<doc.elements.length; i++)
{
if (doc.elements[i].type == "checkbox" && doc.elements[i].checked)
a++;
}

{
for (i = 0; i < doc.elements.length; i++)
if(doc.elements[i].checked == true && !doc.elements[i].checkdisabled)
      doc.elements[i].checked = false ;
}
init2();
alert();
}

function arch1()
                                          {

                                                var a=document.testFrm.COLUMNS;
                                                var body = "<tr><td><select name='dummyList' size=5 style='display:none'>";
                                                for (var i=0;i<a.length; i++)
                                                {
                                                      c = document.getElementById("me");
                                                       body += "<option value='";
                                                       body += a.options[i].value;
                                                       body += "'>";
                                                       body += a.options[i].value;
                                                       body += "</option>";
                                          
                                                }
                                                body += "</select></td></tr>";
                                                c.outerHTML = body;
                                                
}

function arch2()
{
var a = document.testFrm.COLUMNS1;
for (i=0; i<a.options.length; i++)
{
      alert(a.options[i].name);
}
}

function getCookie(cookieName)
{
     var reg=eval("/.*"+ cookieName + "=([^;]+).*/gi");
     var allCookies=document.cookie;
     return allCookies.replace(reg,"$1");
}

function populateListBoxFromCookie(vals)
{

     var objSlt=document.testFrm.COLUMNS;
     var ids;
     if(vals!="")
     {
          ids=vals.split(",");
          for(var i=0;i<ids.length;i++)
          {
                     if(ids[i] != "")
                     {
                           var opt = new Option();
                           opt.value =ids[i];
                           opt.text = ids[i];
                           var lengt = document.testFrm.COLUMNS.options.length;
                       document.testFrm.COLUMNS.options[lengt] = opt;
                        }
              
          }


     }
}

</script>


</HEAD>

<BODY onLoad="init()">

<form name="testFrm" action="revisedexample3.html">
<div id="me"></div>
<table>
<tr>
                                                <td colspan="4"><FONT class="arialGreenLarge"><b>Organization Profile Information</b></FONT></font></td>
</tr>
                                                <tr>
                                                <td valign="top" width="25%"><font class="arialNorm">
                                                <input name="ORGANIZATION_NAME_BX" type="checkbox" value="Organization Name" checked disabled="true"> Organization Name<br>

                                                <input name="SUB_SECTOR_BX" type="checkbox" value="Sub Sector"  checked disabled onclick="populateList(this)">  Sub Sector<br>
                                            <input name="REGION_BX" type="checkbox" value="Region"   onclick="populateList(this)"> Region<br>

                                                <input name="IND_ORG_TYPE_BX" type="checkbox" value="Industry or Org Type"  onclick="populateList(this)"> Industry or Org Type<br>


                                            <input name="COUNTRY_BX" type="checkbox" value="Country" checked onclick="populateList(this)"> Country</font></td>

                                          <td valign="top" width="25%"><font class="arialNorm">
                                          <input name="STATE_TERITORY_BX" type="checkbox" value="State/Province/Territory"checked  onclick="populateList(this)"> State/Province/Territory<br>

                                          <input name="INDUSTRY_BX"  type="checkbox" value="Industry" onclick="populateList(this)"> Industry<br>

                                          <input name="GICS_CODES_BX" type="checkbox" value=" GICS Codes" onclick="populateList(this)"> GICS Codes<br>
                                          <input name="SIC_CODES_BX" type="checkbox" value="SIC Codes"  onclick="populateList(this)"> SIC Codes</font></td>

                                          <td valign="top" width="25%"><font class="arialNorm">

                                          <input name="NAIC_BX" type="checkbox" value="NAIC"  checked onclick="populateList(this)"> NAIC<br>
                                          <input name="NAICS_BX" type="checkbox" value="NAICS" onclick="populateList(this)"> NAICS<br>
                                          <input name="TICKER_BX" type="checkbox" VALUE="Ticker" onclick="populateList(this)"> Ticker<br>

                                          <input  name="SUPER_PARENT_BX" type="checkbox" value="Super Parent"  onclick="populateList(this)"> Super Parent</font></td>

                                          <td valign="top" width="25%"><font class="arialNorm">
                                          <input name="PREVIUS_NAME_BX"  type="checkbox" value="Previous Name"    onclick="populateList(this)"> Previous Name<br>
                                          <input name="ANALYST_BX" type="checkbox" value="Analyst Name"  onclick="populateList(this)"> Analyst Name<br>
                                          <input name="BK_ANALYST_BX" type="checkbox" value="Back-up Analyst Name"  onclick="populateList(this)"> Back-up Analyst Name</font>
                                          </td>
                                     </tr>
                                    <tr>
                                     <td><FONT class="arialGreenLarge"><b>Column Order</b></FONT></td>
                                     <td><FONT class="arialGreenLarge"><b></b></FONT></td>
                                     <td><FONT class="arialGreenLarge"><b>Sort Rows By</b></FONT></td>
                                    </tr>
                                    <tr>
                                    <td valign="top"><select name="COLUMNS" size="10" class="arialSmallForm" size=15 style="width:135px">
                                    

                                    <td valign="top"><input name="textbox2" id="textbox2" type="text" class="arialSmallForm" size=15 style="width:135px">



                                                                                          <!--option>ICR LC LT Rating</option>
                                                                                          <option>ICR LC LT Rating Date</option>
                                                                                          <option>ICR LC ST Rating</option>
                                                                                          <option>ICR LC ST Rating Date</option>
                                                                                          <option>Evaluation</option>
                                                                                          <option>Evaluation Date</option-->
                                          </select>
                                          <select name="COLUMNS1" size="10" class="arialSmallForm" size=15 style="width:135px;display:none"/>
                                          </td>
                                    <td><INPUT TYPE='button' VALUE="Move Up" onclick="MoveUp()"></INPUT><br>
                                    <INPUT TYPE='button' VALUE="Move Down" onclick="MoveDown()"></INPUT><br><br><br>
                                    <INPUT TYPE='button' VALUE="Move to Top" onclick="MoveToTop()"></INPUT><br>
                                    <INPUT TYPE='button' VALUE="Move to Bottom" onClick="MoveToBottom()"></INPUT>
                                    <INPUT TYPE='button' VALUE="CheckAll" onClick="checkall(document.testFrm)"></INPUT>
                                    <INPUT TYPE='button' VALUE="UnCheckAll" onClick="uncheckall(document.testFrm)"></INPUT>
                                    <INPUT TYPE='button' VALUE="getname" onClick="arch2()"></INPUT>
                                    <INPUT TYPE='button' VALUE="submit" onClick="frmSubmit();"></INPUT></td>

                                    <td valign="top">
                                    <table border="0" cellspacing="0" cellpadding="2">
                                    <tr>
                                    <td nowrap><FONT class="arialNorm">Organization Name</font></td>
                                    <td><select name="SORT_BY_ORG_NAME" size="1" class="arialSmallForm">
                                    <option>None</option>
                                    <option selected>Ascending</option>
                                    <option>Descending</option>
                                    </select>
                                    </td>
                                    </tr>
                                    
                                    
                                    </table>
                                    </form>
                                    <!--<script>
                                          init();
                                    </script>-->

</BODY>
</HTML>
0
 
LVL 7

Expert Comment

by:bwasyliuk
ID: 12240069
The following code does as requested on each click of one of your checkboxes.  Unless I mis-understood the question, it should do as you require.

<script>
function auditlist(objcheck,objsrcList) {
 var inlist=-1;
 if (objsrcList.options.length > 0) {
  for( var i = 0; i < objsrcList.options.length; i++ )
  {
   if (objcheck.name == objsrcList.options[i].value)
      inlist=i;
  }
  if (inlist >= 0) {
    if (objcheck.checked == false)
      objsrcList.options[inlist] = null;
  } else {
    if (objcheck.checked) {
      // add it to the list (at the end)
      objsrcList.options[objsrcList.options.length] = new Option( objcheck.name, objcheck.name);
     }
  }
 } else {
      // select list is empty
   if (objcheck.checked) {
      // add it to the list (at the end)
      objsrcList.options[objsrcList.options.length] = new Option( objcheck.name, objcheck.name);
   }
 }
}
</script>
<form name="form2">
<input name="test1" type="checkbox" onclick="auditlist(this,document.form2.selecttest);">
<input name="test2" type="checkbox" onclick="auditlist(this,document.form2.selecttest);">
<select name="selecttest">
</select>
</form>
0
Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

 
LVL 25

Author Comment

by:archrajan
ID: 12240565
hi thanks so much bwasyliuk  but what i want is..
the reverse of this also.
i mean..
corresponding to the options in the selectbox i want a function to check or uncheck the checkbox

thanks
archana
0
 
LVL 9

Accepted Solution

by:
riyasjef earned 500 total points
ID: 12240940
hi archrajan

It is better to do it by calling the following fn to clear the listbox and repopulate the listbox based on the current status of the listbox (before submitting the form)

function clearListBox(objLst)
{
      for(var i=(objLst.options.length-1); i>=0; i--)
      {
          objSltFrom.options[i] = null;
      }
}

Riyasjef
0
 
LVL 7

Expert Comment

by:bwasyliuk
ID: 12241415
how about this....


function auditlist(objcheck,objsrcList) {
 var inlist=-1;
 if (objsrcList.options.length > 0) {
  for( var i = 0; i < objsrcList.options.length; i++ )
  {
   if (objcheck.name == objsrcList.options[i].value)
      inlist=i;
  }
  if (inlist >= 0) {
    if (objcheck.checked == false)
      objsrcList.options[inlist] = null;
  } else {
    if (objcheck.checked) {
      // add it to the list (at the end)
      objsrcList.options[objsrcList.options.length] = new Option( objcheck.name, objcheck.name);
     }
  }
 } else {
      // select list is empty
   if (objcheck.checked) {
      // add it to the list (at the end)
      objsrcList.options[objsrcList.options.length] = new Option( objcheck.name, objcheck.name);
   }
 }
}

function checkthoseboxes(objsrcList) {

for( var i = 0; i < objsrcList.options.length; i++ )
  {
   if (document.getElementById("check_" + objsrcList.options[i].value)) {
     //if it exists
     document.getElementById("check_" + objsrcList.options[i].value).checked=true;
   }
  }

}
</script>
<input name="test1" id="check_test1" type="checkbox" onclick="auditlist(this,document.form2.selecttest);">
<input name="test2" id="check_test2" type="checkbox" onclick="auditlist(this,document.form2.selecttest);">
<input name="test3" id="check_test3" type="checkbox" onclick="auditlist(this,document.form2.selecttest);">
<select name="selecttest">
  <option value="test1">test1</option>
  <option value="test3">test3</option>
</select>
<button name="go" value="GO" onclick="checkthoseboxes(document.form2.selecttest);">

all you need is something to triger the "checkthoseboxes" function, could be an onload...

Ben
0

Featured Post

Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

623 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question