Solved

selectbox and checkboxes

Posted on 2004-10-06
6
582 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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
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…
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…

762 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

Need Help in Real-Time?

Connect with top rated Experts

24 Experts available now in Live!

Get 1:1 Help Now