?
Solved

selectbox and checkboxes

Posted on 2004-10-06
6
Medium Priority
?
594 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
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
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
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 new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

Question has a verified solution.

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

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
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…

593 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