Чтение текста из Dynami c Поле ввода JavaScript - PullRequest
Новая
       29

Чтение текста из Dynami c Поле ввода JavaScript

0 голосов
/ 09 февраля 2020

У меня есть веб-сайт, где вы можете ввести текст в поле ввода и нажать «Добавить новую строку», чтобы добавить другое поле ввода.

Когда пользователь нажимает кнопку отправки, я хочу иметь возможность читать весь текст внутри текстового поля, но я не могу понять, как получить доступ к тексту в текстовых полях.

Вот мой код: 

    <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>

И вот CodePen для go вместе с ним: https://codepen.io/etills/pen/qBdEKPV

Был бы признателен, если бы кто-то мог сказать мне, как читать весь текст из строк ввода, когда пользователь нажимает Отправить. В конечном итоге я хочу поместить текст в массив и создать файл .txt с введенным текстом.

Спасибо

Ответы [ 2 ]

1 голос
/ 09 февраля 2020

Этот селектор нужен для захвата только видимых текстовых полей: 

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

Примерно так: 

$("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);
});

Вы получите такой результат:

enter image description here enter image description here

См. В этом примере: 

$(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>

Помните: идентификатор элемента должен быть уникальным на странице. Избегайте использования того же id="ye" в <input type="text" placeholder="Attribute" id="ye">.

0 голосов
/ 09 февраля 2020

При отправке проверьте все входные данные, которые вы хотите, и соберите их значения. 

$(document).on("click", "input[type=submit]", function(e){ 
  e.preventDefault()
  $('input[type=text]').each((i, input) => {
    console.log(input.value)
  })
})

Пример: https://codepen.io/jzabala/pen/vYOErpa?editors=1111

...