Adding elements to a textarea in checkbox order

Question

Adding elements to a textarea in checkbox order

Navigation

#1 by (1 votes)

1

Well folks would like to know who can help me. I found this script in this American forum link script, it literally does appear the values marked inside the textarea, yet it adds the items following the order of the checkboxes list.

<html>
 <head>
  <title>Fruits</title>
   <script type="text/javascript">
     function addToList(checkObj, outputObjID)
     {
        var checkGroup = checkObj.form[checkObj.name];
        var checkGroupLen = checkGroup.length;
        var valueList = new Array();
        for (var i=0; i<checkGroupLen; i++)
        {
           if (checkGroup[i].checked)
           {
              valueList[valueList.length] = checkGroup[i].value;
           }
        }
        document.getElementById(outputObjID).value = valueList.join('\r\n');
        return;
     }
   </script>
 </head>
 <body>
   <form name="myform">
     <input type="checkbox" name="fruit[]" value="Oranges" onClick="addToList(this, 'txt1')"><font color="#808080">Oranges</font><br>
     <input type="checkbox" name="fruit[]" value="Apples"  onClick="addToList(this, 'txt1')"><font color="#808080">Apples</font><br>
     <input type="checkbox" name="fruit[]" value="Grapes"  onClick="addToList(this, 'txt1')"><font color="#808080">Grapes</font><br>
     <textarea rows="4" cols="10" name="txt1" id="txt1" style="color:#808080"  readonly></textarea>
   </form>
 </body>
</html>

Now here's my question, I would like to know how I can change it so that it places the values in the textarea by adding the items in the order in which I activate a checkbox, that is, say I have items 1,2 and 3 ; if I add the way the script is currently in that order 2,1,3 the order placed inside the textarea will be 1,2,3 I would like following the example to be in the order I marked, ie 2,1,3 . It is possible? If so, could anyone help me? I'm still a beginner and it would help me a lot.

Well, it worked, but if it does not bother you, just find it with a full complement of buttons. How would you help me by putting in the code that you already pass and thank you for putting the full function on it? As it is in the code below that I posted more complement.

<script type="text/javascript">
 function addToList(checkObj, outputObjID)
 {
    var checkGroup = checkObj.form[checkObj.name];
    var checkGroupLen = checkGroup.length;
    var valueList = new Array();
    for (var i=0; i<checkGroupLen; i++)
    {
       if (checkGroup[i].checked)
       {
          valueList[valueList.length] = checkGroup[i].value;
       }
    }
    document.getElementById(outputObjID).value = valueList.join('\r\n');
    return;
 }

    function checkAllBox(formObj, fieldName, checkedState)
 {
    if(formObj[fieldName].length)
    {
       var fieldLen = formObj[fieldName].length;
       for(var i=0; i<fieldLen; i++)
       {
          formObj[fieldName][i].checked = checkedState;
          addToList(formObj[fieldName][i], 'txt1');
       }
    }
    else
    {
       formObj[fieldName].checked = checkedState;
       addToList(formObj[fieldName], 'txt1');
    }
    return;
 }

<form name="myform">
 <input type="checkbox" name="checkAll" value="all"  onClick="checkAllBox(this.form, 'fruit[]', this.checked);" /><b>Check All</b><br>
 <input type="checkbox" name="fruit[]" value="Oranges" onClick="addToList(this, 'txt1');" /><span style="color:#808080">Oranges</span><br>
 <input type="checkbox" name="fruit[]" value="Apples"  onClick="addToList(this, 'txt1');" /><span style="color:#808080">Apples</span><br>
 <input type="checkbox" name="fruit[]" value="Grapes"  onClick="addToList(this, 'txt1');" /><span style="color:#808080">Grapes</span><br>
 <textarea rows="4" cols="10" name="txt1" id="txt1" style="color:#808080" readonly="readonly"></textarea>

javascript html

asked by anonymous 08.08.2014 / 04:42

1 answer

Limit range for displaying the tooltip in area chart with Highcharts Checklistbox when loaded dynamically does not mount the check's

score 1 · Accepted Answer

Using jQuery this is what you are looking for should be a lot easier and more optimized, but based on what I understood you want and in the script found in the last link as an example you could do something like this:

<html>
  <head>
    <title>Fruits</title>
    <script type="text/javascript">
      //Array que guarda a ordem em que os elementos foram inseridos
      var listCheckedOptions = [];

      function addToList(checkObj, outputObjID)
      {
        //Remove do array caso o elemento já esteja inserido
        if (listCheckedOptions.indexOf(checkObj.value) >= 0) {
          listCheckedOptions.splice(listCheckedOptions.indexOf(checkObj.value), 1);
        } else { //Adiciona casojá esteja inserido
          listCheckedOptions.push(checkObj.value);
        }

//        alert(listCheckedOptions); //debug para verificar os elementos inseridos
        document.getElementById(outputObjID).value = ""; //Limpa o textarea
        document.getElementById(outputObjID).value = listCheckedOptions.join('\r\n'); //Adiciona no textarea

        return;
      }
    </script>
  </head>
  <body>
    <form name="myform">
      <input type="checkbox" name="fruit[]" value="Oranges" onClick="addToList(this, 'txt1')"><font color="#808080">Oranges</font><br>
      <input type="checkbox" name="fruit[]" value="Apples"  onClick="addToList(this, 'txt1')"><font color="#808080">Apples</font><br>
      <input type="checkbox" name="fruit[]" value="Grapes"  onClick="addToList(this, 'txt1')"><font color="#808080">Grapes</font><br>
      <textarea rows="4" cols="10" name="txt1" id="txt1" style="color:#808080"  readonly></textarea>
    </form>
  </body>
</html>

Notice that the change was made only in the addToList function, and the listCheckedOptions array was created. But try doing something similar using jQuery ... I hope I have helped.

Edited

As requested, so that the code also works with the "Check All" option you can use the checkAllBox function as follows:

  function checkAllBox(formObj, fieldName, checkedState)
  {
    if(formObj[fieldName].length)
    {
      var fieldLen = formObj[fieldName].length;
      for(var i=0; i<fieldLen; i++)
      {
        //Call addToList function only when element isn't checked and is checking all
        //or when element is checked and is uncheckin all
        if ((formObj[fieldName][i].checked == false && checkedState) || 
        (formObj[fieldName][i].checked == true && !checkedState))
        {
          formObj[fieldName][i].checked = checkedState;
          addToList(formObj[fieldName][i], 'txt1');
        }
      }
    }
    return;
  }

See the check that is made inside the function. It is only called the function that already existed addToList when the tested element is not checked and is marking all, or when the tested element is checked and is unchecking all.

Do not forget to add the check box that will be responsible for checking / unchecking all.

<input type="checkbox" name="checkAll" value="all"  onClick="checkAllBox(this.form, 'fruit[]', this.checked);" /><b>Check All</b>

Remembering that there are a number of ways to implement, some even cleaner than having a little code, I just tried to use the code that you had posted.

Hugs!