Add elements to a textarea in checkbox order

Question

Add elements to a textarea in checkbox order

Asked 10 years, 3 months ago

Viewed 1,531 times

1

Well people would like to know who can help me. I found this script in this American forum http://forums.phpfreaks.com/topic/170591-solved-checkbox-populating-a-text-area works the script, literally shows the values marked inside the textarea, with everything 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 wonder how I can change this so that it puts the values in the textarea by adding the items in the order in which I activate a checkbox, ie, say I have items 1,2 and 3; if I add the way the script is at the moment 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. Is that possible? If yes, could someone help me? I’m a beginner yet and it would help me a lot.

Valeu worked more like if it is not bothering see I only found it with a complement with a full button would be able to help me with this by putting in the code that you already pass me and I really appreciate putting in it the full function ? As this in the code below old 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>

2

Put what you’ve managed to develop so far into the question.

– ptkato

2014/08/08 at 02:52
1

When asking questions, try not to leave the title so vague, and make the most of the added tags. For this specific question the tag php is unnecessary since the treated code concerns only HTML and Javascript, ie client-side (browser).

– Adriano Leal

2014/08/08 at 18:01
1

A tip: Try to understand the code before posting. A lot can be solved just by understanding the code. If you don’t have any language skills, it’s a great time to learn. Putting codes here for others to do for you is not the best solution. At some point, people get as boring as the international, and they’re not gonna do their job. Nothing personal, just that this community is to help people with doubts and programming problems and not do the work or think for others. Anything, take a look at FAQ.

– Ricardo Souza

2014/08/12 at 20:01

1 answer

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.

by Adriano Leal • **401** points · Answer 1 · 2014-08-08T17:59:15+00:00

Using jQuery that you search for should be much easier and optimized, but based on what I understood you want and 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>

Note that the change was made only in the function addToList and the array has been created listCheckedOptions. But try to do something similar using jQuery... I hope I’ve helped.

Edited

As requested, so that the code also works with the option of "Check All" can be used the function checkAllBox 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 done inside the function. Only the function that already existed is called addToList when the tested element is not checked and is marking all, or when the tested element is marked and is unchecking all.

Don’t 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 several ways to implement, some even cleaner than having little code, I just tried to use the code you had posted.

Hug!