Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

selectbox and checkboxes

Posted on 2004-10-06
6
Medium Priority
?
590 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
The top UI technologies you need to be aware of

An important part of the job as a front-end developer is to stay up to date and in contact with new tools, trends and workflows. That’s why you cannot miss this upcoming webinar to explore the latest trends in UI technologies!

 
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 2000 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

The top UI technologies you need to be aware of

An important part of the job as a front-end developer is to stay up to date and in contact with new tools, trends and workflows. That’s why you cannot miss this upcoming webinar to explore the latest trends in UI technologies!

Question has a verified solution.

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

The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
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…

688 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