Generate text file with concatinated string via checkboxes

Question

I have a problem of thinking a way of generating a text document with the values from multiple checkboxes. For example:

Checkbox 1 value : Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Checkbox 2 value: Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.

Checkbox 3 value: It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.

After selecting checkboxes 1,2 and 3 the generated text document should look like this:

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.

Can somebody provide me a solution about that. Sorry for the dumb question. Please help me

Thank you in advance

Wouldn't you just toggle the paragraphs on the page? Are you exporting the text to a document (file)? — Mr. Polywhirl, Jul 09 '20 at 13:52
Yes, I need the strings concatenate and formed as a text with paragraphs after that exported to a file — Vladimir Tasev, Jul 09 '20 at 14:01

score 1 · Answer 1 · answered Jul 09 '20 at 14:26

After you retrieve your selected paragraphs, you can send the text to a new window as an object URL:

window.open(URL.createObjectURL(new Blob([text], {
  type: 'text/plain;charset=utf-8'
})))

Demo

Note: Stack Overflow disallows calling window.open, but you can test the code yourself in your favorite IDE/web browser.

const paragraphs = [
  "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.",
  "Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.",
  "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout."
]

const main = () => {
  populateCheckboxes(paragraphs, document.querySelector('.paragraphs'))
  document.querySelector('.btn-export').addEventListener('click', handleExport)
}

const handleExport = () => {
  const text = [...document.querySelectorAll('.checkbox-wrapper > input[type="checkbox"]')]
    .filter(checkbox => checkbox.checked)
    .map(checkbox => checkbox.value)
    .join('\n\n')
  
  // Initiate file download in a new window
  window.open(URL.createObjectURL(new Blob([text], {
    type: 'text/plain;charset=utf-8'
  })))
}

const populateCheckboxes = (paragraphs, target) => {
  paragraphs.forEach(paragraph => {
    let checkboxWrapper = document.createElement('div')
    let checkbox = document.createElement('input')
    let span = document.createElement('span')

    checkboxWrapper.classList.add('checkbox-wrapper')
    checkbox.setAttribute('type', 'checkbox')
    checkbox.value = paragraph
    span.textContent = paragraph

    checkboxWrapper.appendChild(checkbox)
    checkboxWrapper.appendChild(span)
    target.appendChild(checkboxWrapper)
  })
}

main()

.checkbox-wrapper {
  margin-bottom:  1em;
}

.checkbox-wrapper input[type="checkbox"] {
  margin-right: 1em;
}

<div class="paragraphs"></div>
<button class="btn-export">Export</button>

Live filtering demo

This does not export the paragraphs, but lets you toggle them.

const paragraphs = [
  "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.",
  "Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.",
  "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout."
]

const toggleClick = e => {
  e.target.parentElement.classList.toggle('expanded')
  e.target.parentElement.querySelector('.togglable').classList.toggle('hidden')
}

paragraphs.forEach(paragraph => {
  let wrapper = document.createElement('p')
  wrapper.classList.add('expander', 'expanded')
  let toggler = document.createElement('span')
  toggler.classList.add('toggler')
  toggler.addEventListener('click', toggleClick)
  let content = document.createElement('span')
  content.classList.add('togglable')
  content.textContent = paragraph
  wrapper.appendChild(toggler)
  wrapper.appendChild(content)
  document.body.appendChild(wrapper)
})

.expander .toggler {
  display: inline-block;
  width: 1em;
  cursor: pointer;
  text-align: center;
  font-weight: bold;
}

.expander .toggler:before {
  content: "+";
}

.expander.expanded .toggler:before {
  content: "-";
}

.hidden {
  display: none;
}

maswerdna · Answer 2 · 2020-07-09T14:21:58.717

One way can be to add an onclick Event Listener to the checkboxes, avoid onchange due to some of the issues outlined here: https://stackoverflow.com/a/4471462/4570202

<input type="checkbox" value="whatever value you want">
<input type="checkbox" value="whatever value you want">
<input type="checkbox" value="whatever value you want">

<p id="textOutput"></p>

<script type="text/javascript">
    var p = document.getElementById("textOutput");
    document.querySelectorAll("input[type='checkbox']").forEach(function(el){
        el.addEventListener('click', function(){
            if (this.checked) {
                p.innerHTML += this.getAttribute("value") + "<br><br>";
            }
        });
    });
    //
    // You can add a button for the conversion and export
    // Read about how to convert an html content to a PDF or a text file
</script>

Read this answer on how to convert to a .txt file and export/download: https://stackoverflow.com/a/22085875/4570202

score 0 · Answer 3 · answered Jul 09 '20 at 14:23

This solution will take the values from the marked checkboxes inputs and let you save them as a text file.

function SaveFile(){

    var data=[];

$("input:checkbox:checked").each(function(){
    data.push($(this).data('value'));
    data.push('\n'); //To Add a new line   
});
    
   var blob = new Blob([data],{ type: 'plain/text;charset=UTF-8' }),
        fileURL = URL.createObjectURL(blob),
        pom = document.createElement('a');

    pom.setAttribute('href', fileURL);
    pom.setAttribute('download', 'myfile.txt');
    pom.click();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="ck1" data-value="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book."/>
<label for="ck1">Check 1</label>
<br/>

<input type="checkbox" name="ck2" data-value="Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old."/>
<label for="ck2">Check 2</label>
<br/>

<input type="checkbox" name="ck3" data-value="It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout."/>
<label for="ck3">Check 3</label>

<br/>

<input type="button" value="Save as file" onclick="SaveFile()"/>

Generate text file with concatinated string via checkboxes

3 Answers3

Demo

Live filtering demo