Improve company productivity with a Business Account.Sign Up

x
?
Solved

selectbox and checkboxes

Posted on 2004-10-06
6
Medium Priority
?
595 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
Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
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

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

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

595 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