CODEWITHSUNDEEP
javascripthtml
syreeni
syreeni

Reputation: 35

Checkbox text to textarea

I'd need to have a lot of sentences which can be chosen by checkboxes and they will appear immediately to a textarea below them. On the textarea it is possible to change sentences and then the textarea is exported as docx and pdf. I found this nice script from the year 2007 from Sitepoint.com forum by user dinheiro.

Every sentence should be on its own line and linebreak between sentences. Everything goes smoothly when sentences are added but when sentence is removed, linefeed is missed between the sentences. I've made some changes to original script on line

df[1][0].value+=this.name+'\n\n ';

the original is df[1][0].value+=this.name+' ';

and added a line df[1][0].value=df[1][0].value.replace(/\n/g, '');

Anyone could help with this or does anyone have better solution to make this? Thanks!

window.onload = function() {
  df = document.forms;
  inp = df[0].getElementsByTagName('input');
  for (c = 0; c < inp.length; c++) {
    if (inp[c].type == 'checkbox') {
      inp[c].onclick = function() {
        if (this.checked == true) {
          df[1][0].value += this.name + '\n\n ';
        } else {
          df[1][0].value = df[1][0].value.replace(/\n/g, '');
          df[1][0].value = df[1][0].value.replace(this.name + ' ', '');
        }
      }
    }
  }
}
<form action="#">
  <div>
    <input type="checkbox" name="- foo" />foo<br>
    <input type="checkbox" name="- blah" />blah<br>
    <input type="checkbox" name="- dodah" />dodah<br>
  </div>
</form>

<form action="#">
  <div>
    <textarea cols="20" rows="10"></textarea>
  </div>
</form>

What about to add a checkbox text to a textarea, edit the text on the textarea, add some extra text and send it with other fields to a handler?

Upvotes: 1

Views: 434

Answers (1)

Hiteshdua1
Hiteshdua1

Reputation: 2286

The issue was this line was removing the new line character which made the text appear in same line

df[1][0].value=df[1][0].value.replace(/\n/g, '');

Hence, I catered only the new line character related to the specific word to be deleted :

df[1][0].value=df[1][0].value.replace(this.name+'\n\n','');

Here is the working code : 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <script type="text/javascript">
    
    window.onload=function() {
        
        df=document.forms;
        inp=df[0].getElementsByTagName('input');
    for(c=0;c<inp.length;c++) {
    if(inp[c].type=='checkbox') {
        inp[c].onclick=function() {
        debugger;
    if(this.checked==true){
        df[1][0].value+=this.name+'\n\n';
    }
    else {
        df[1][0].value=df[1][0].value.replace(this.name+'\n\n','');
          }
         }
        }
       }
      }
    </script>
    
    </head>
    <body>
    
    <form action="#">
        <div>
            <input type="checkbox" name="- foo"/>foo<br>
            <input type="checkbox" name="- blah"/>blah<br>
            <input type="checkbox" name="- dodah"/>dodah<br>
        </div>
    </form>
    
    <form action="#">
        <div>
            <textarea cols="20" rows="10"></textarea>
        </div>
    </form>
    
    </body>
    </html>

Upvotes: 2

Related Questions