wagga2650 Posted August 17, 2009 Share Posted August 17, 2009 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> Quote Link to comment https://forums.phpfreaks.com/topic/170591-solved-checkbox-populating-a-text-area/ Share on other sites More sharing options...
Psycho Posted August 17, 2009 Share Posted August 17, 2009 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> Quote Link to comment https://forums.phpfreaks.com/topic/170591-solved-checkbox-populating-a-text-area/#findComment-899820 Share on other sites More sharing options...
wagga2650 Posted August 17, 2009 Author Share Posted August 17, 2009 Thankyou very much for your quick response and the fix for my issue. Much appreciated Quote Link to comment https://forums.phpfreaks.com/topic/170591-solved-checkbox-populating-a-text-area/#findComment-899842 Share on other sites More sharing options...
wagga2650 Posted August 17, 2009 Author Share Posted August 17, 2009 Oh just one other question if you don't mind how can I add a check all box to it. Thanks Quote Link to comment https://forums.phpfreaks.com/topic/170591-solved-checkbox-populating-a-text-area/#findComment-899975 Share on other sites More sharing options...
Psycho Posted August 17, 2009 Share Posted August 17, 2009 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> Quote Link to comment https://forums.phpfreaks.com/topic/170591-solved-checkbox-populating-a-text-area/#findComment-900032 Share on other sites More sharing options...
wagga2650 Posted August 18, 2009 Author Share Posted August 18, 2009 The check all doesn't work if you click it all it does is put a check int he boxes and then if you click again it removes it. The text area is not being populated with it is checked or unchecked Quote Link to comment https://forums.phpfreaks.com/topic/170591-solved-checkbox-populating-a-text-area/#findComment-900700 Share on other sites More sharing options...
Psycho Posted August 18, 2009 Share Posted August 18, 2009 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; } Quote Link to comment https://forums.phpfreaks.com/topic/170591-solved-checkbox-populating-a-text-area/#findComment-900890 Share on other sites More sharing options...
wagga2650 Posted August 19, 2009 Author Share Posted August 19, 2009 Thankyou mjdamato, all sorted and I thankyou for your time it was much appreciated. Graham Quote Link to comment https://forums.phpfreaks.com/topic/170591-solved-checkbox-populating-a-text-area/#findComment-901516 Share on other sites More sharing options...
Vink Posted March 4, 2011 Share Posted March 4, 2011 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 Quote Link to comment https://forums.phpfreaks.com/topic/170591-solved-checkbox-populating-a-text-area/#findComment-1182969 Share on other sites More sharing options...
Psycho Posted March 5, 2011 Share Posted March 5, 2011 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> Quote Link to comment https://forums.phpfreaks.com/topic/170591-solved-checkbox-populating-a-text-area/#findComment-1183082 Share on other sites More sharing options...
Vink Posted March 5, 2011 Share Posted March 5, 2011 Hi Mjdamato 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 Quote Link to comment https://forums.phpfreaks.com/topic/170591-solved-checkbox-populating-a-text-area/#findComment-1183202 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.