Search code examples
javascripthtmlcssinputtextinput

Reading Text From Dynamic Input Field JavaScript

I have a website where you can enter text into an input field, and press "Add new row" to add another input field.

When the user presses the submit button, I want to be able to read all of the text inside of the text field, but I can't seem to figure out how to access the text within the text fields.

Here is my code:

    <head>
        <script src = "https://code.jquery.com/jquery-3.3.1.min.js"
        crossorigin="anonymous"> </script>
    </head>

    <script type ="text/javascript">

    var array = []
    var track = 0;

        $(document).on("click", ".btn-add-row", function(){
            var row = $(".row").eq(0).clone().show();
            $(".element-wrapper").append(row);
            var ye = $(".element-wrapper")
        })

        $(document).on("click", ".btn-remove-row", function(){
            var index = $(".btn-remove-row").index(this);
            $(".row").eq(index).remove();
        })
    </script>

    <body>
    <h1>upload file</h1>

    <form method = "post" enctype="multipart/form-data" action = "/">
        <input type = "file" name = "filename">
        <input type = "submit" value = "upload">
    </form>


    <div class = "element-wrapper">
        <div class = "row" style = "display: none;">
            <input type = "text" placeholder = "Attribute" id = "ye">
            <button class = "btn-remove-row">
                Remove Row
            </button>
    </div>
    </div>

    <button class = "btn-add-row"> Add New Row </button>


    </body>
</html>

And here is a CodePen to go along with it: https://codepen.io/etills/pen/qBdEKPV

Would appreciate it if someone could tell me how to read all the text from the input rows when the user presses submit. I ultimately want to put the text into an array and make a .txt file with that text that is entered.

Thanks

Solution

  • You need this selector to capture only the visible textboxes:

    div.row:not([style='display: none;']) input[type=\"text\"]"

    Something like this:

    $("form").on("submit", function(e) {
  e.preventDefault();

  var inputs = document.querySelectorAll("div.row:not([style='display: none;']) input[type=\"text\"]");

  var len = inputs.length;
  for (var i = 0; i < len; i++) {
    array.push({
      input: i,
      value: inputs[i].value
    });
  }
  console.log(array);
});

    You'll get this result:

    enter image description here enter image description here

    See in this example:

    $(function() {
  var array = [];
  var track = 0;

  $(document).on("click", ".btn-add-row", function() {
    var row = $(".row").eq(0).clone().show();
    $(".element-wrapper").append(row);
    var ye = $(".element-wrapper")
  });

  $(document).on("click", ".btn-remove-row", function() {
    var index = $(".btn-remove-row").index(this);
    $(".row").eq(index).remove();
  });

  $("form").on("submit", function(e) {
    e.preventDefault();

    var inputs = document.querySelectorAll("div.row:not([style='display: none;']) input[type=\"text\"]");

    var len = inputs.length;
    for (var i = 0; i < len; i++) {
      array.push({
        input: i,
        value: inputs[i].value
      });
    }
    console.log(array);
  });
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>upload file</h1>
<form method="post" enctype="multipart/form-data" action="/">
  <input type="file" name="filename">
  <input type="submit" value="upload">
</form>
<div class="element-wrapper">
  <div class="row" style="display: none;">
    <input type="text" placeholder="Attribute">
    <button class="btn-remove-row">
                Remove Row
            </button>
  </div>
</div>
<button class="btn-add-row"> Add New Row </button>

    Remember: Element Id must be unique in a page. Avoid using the same id="ye" in <input type="text" placeholder="Attribute" id="ye">.