Jump to content

[SOLVED] Checkbox populating a text area


wagga2650

Recommended Posts

I have this javascript that works well in Firefox but in IE it behaves a little different.

 

what it does is when a checkbox is checked it transfers that value to a textbox and if Firefox if you check the boxes and remove them everything stays all ligned up.

 

Eg

 

Apples

Oranges

Grapes

 

However if you do the same in IE once you uncheck the box and re check one it continues to add the addition at the bottom all the time and eventually you don't see anything in the top of the box anymore you have to scroll to see it.

 

Is there any script gurus that can take a look and see if they can fix it for me please.

 

Here is the complete code. Thanks heaps in advance.

 

<html>
<head>
  <title>Fruits</title>
   <script type="text/javascript">
     function doIt(obj)
      {
        if (obj.checked){
           obj.form.txt1.value += ((obj.form.txt1.value!='') ? '\r\n':'') + obj.value;
        }
        else {
           obj.form.txt1.value = obj.form.txt1.value.replace(new RegExp("\n*" + obj.value, "g"), '').replace(/^,*/, '');
        } 
      }
   </script>
</head>
<body>
   <form name="myform">
     <<input type="checkbox" value="Oranges" onClick="doIt(this)"><font color="#808080">Oranges</font><br>
     <input type="checkbox" value="Apples" onClick="doIt(this)"><font color="#808080">Apples</font><br>
     <input type="checkbox" value="Grapes" onClick="doIt(this)"><font color="#808080">Grapes</font><br>
     <textarea rows="4" cols="10" name="txt1" style="color:#808080"  readonly></textarea>
   </form>
</body>
</html>

Link to comment
Share on other sites

I would not use regex for this. I think the problem is due to how IE and FF interpret new lines. But, anyway I wouldl completely repopulate the field on every checkbox change:

 

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

Link to comment
Share on other sites

Oh just one other question if you don't mind how can I add a check all box to it.

 

Thanks

 

Good thing I made the checkboxes an array by givign them the same name. Here's a simple function to do that. I also made some other corrections:

 

1. Do not use FONT tags, they have been deprecated for amny years. Use inline style properties or, even better, a style sheet and classes.

 

2. Modifies readonly attribue in textarea

 

3. Added closing "/" to input fields to make them compliant.

 

<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;
     }

     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;
           }
        }
        else
        {
           formObj[fieldName].checked = checkedState;
        }
        return;
     }
   </script>
</head>
<body>
   <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>
   </form>
</body>
</html>

 

 

Link to comment
Share on other sites

     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;
     }

Link to comment
Share on other sites

  • 1 year later...

Hi,

 

I use this great script with joy, the only thing is when someone check a checkbox some predifined txt put in the textarea...great!.......but when someone add some text to it and uncheck the box....all the added text disapear allso..................

 

I can't find how to NOT  disapear users own added text..

 

grest if somene can help

 

greet

Vink

 

Link to comment
Share on other sites

I use this great script with joy, the only thing is when someone check a checkbox some predifined txt put in the textarea...great!.......but when someone add some text to it and uncheck the box....all the added text disapear allso..................

 

I can't find how to NOT  disapear users own added text..

 

That is an entirely different problem. Because instead of following the easy appraoch I provided before you can't simply repopulate the textarea whenever a user makes a change. This is possible - BUT - there are issues to be aware of. If the user makes any changes to an existing record in the teaxtarea the script would not be able to identify it for removal if the user unchecks the checkbox. Plus, if the user selects a couple checkboxes, add some text, and then checks a third checkbox, where does that content go in relation to the existng content?

 

This should get you close to what you want. It will generate an occasional extra line break but should be close to what you want

<html>
<head>
  <title>Fruits</title>
   <script type="text/javascript">
     function addToList(checkObj, outputObjID)
     {
        var value = checkObj.value;
        var outputObj = document.getElementById(outputObjID);

        if(checkObj.checked)
        {
            //add value to text area
            linebreakbefore = (outputObj.value=='') ? '' : '\n';
            outputObj.value = outputObj.value + linebreakbefore + value;
        }
        else
        {
            //remove value from text area and empty lines
            myregexp = new RegExp('^'+value+'(\\r\\n|\\n|\\r|)', "gm");
            outputObj.value = outputObj.value.replace(myregexp, '');
        }
        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;
     }

   </script>
</head>
<body>
   <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="10" cols="40" name="txt1" id="txt1" style="color:#808080"></textarea>
   </form>
</body>
</html>

Link to comment
Share on other sites

Hi Mjdamato  ;D

 

Thanks for the quick reply and effort you put into it! ...I see what you mean with the text removal when check a new box...I gess its hard to to achieve that.

The code gives unfortunately a error in Dreamweaver an Frontpage and dasn't work in Explorer

I am running a datingsite where members can  (with your code (the first...works great!))    easily make a quick reply or respond to a receved message.

But I am getting complaints from members who want to add something and lost theare complete message...playing with the checkboxes...duh it happens..:)

I am not such a great coder and hope you would like to see whats wrong.

 

Thanks again from:

Vink

Amsterdam

Holland

 

 

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.