Using a .txt file to populate many text areas within an HTML form-CodePudding

when the txt file is selected, I want to add as many inputs as the number of lines in the file and place the text of each line into the generated inputs.

https://jsfiddle.net/w80dv2fx/


<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Untitled Document</title>
</head>

<body>

  <form name="mainForm" method="get" id="Main">
    <p>input 1:<textarea id="input1" cols="20" rows="2"></textarea>
      <p>input 2:<textarea id="input2" cols="20" rows="2"></textarea>
        <p>input 3:<textarea id="input3" cols="20" rows="2"></textarea>
          <p>
            <div>
              <label for="file">Choose file to upload</label>
              <input type="file" id='fileinput' accept=".txt">
            </div>
  </form>



</body>

</html>

JQUERY:

(function() {
  var input = document.getElementById("fileinput");
  input.addEventListener("change", loadFile, false);

  function loadFile() {
    var file, fr;

    if (typeof window.FileReader !== 'function') {
      alert("The file API isn't supported on this browser yet.");
      return;
    }

    if (!input.files) {
      alert("This browser doesn't seem to support the `files` property of file inputs.");
    } else if (!input.files[0]) {
      alert("Please select a file before clicking 'Load'");
    } else {
      file = input.files[0];
      fr = new FileReader();
      fr.onload = receivedText;
      fr.readAsText(file);
    }

    function receivedText() {
      var data = fr.result.split('\n');
      document.getElementById("input1").value = data[0];
      document.getElementById("input2").value = data[1];
      document.getElementById("input3").value = data[2];
    }
  }
})();

Now it only works for 3 inputs and does not add as many inputs as the number of lines.

CodePudding user response：

html

<form name="mainForm" method="get" id="Main">
    
          <p>
            <div>
              <label for="file">Choose file to upload</label>
              <input type="file" id='fileinput' accept=".txt">
            </div>
  </form>

javascript receivedText() function

function receivedText() {
  var data = fr.result.split('\n');
  for(let i = 0; i < data.length; i  ) {
    let app = document.querySelector('#Main');
    let html = `<p>input ${i}:<textarea id="input1" cols="20" rows="2">${data[i]}</textarea></p>`;
    app.insertAdjacentHTML("beforebegin", html);
  }
}

CodePudding user response：

as i see u working only with first 3 lines (data[0],data[1],data[2]).

You need to create same amount of inputs as u have lines

So in receivedText function u need to run over data variable

var data = fr.result.split('\n');

const formEl = document.querySelector('form[name=mainForm]')
// or define id attribute for parent element
data.forEach((line) => {|
  const inputEl = document.createElement('input')
  input.value = line
  formEl.appendChild(input)
})