Блог

Главная - Вопросы по программированию - Доступ к входным значениям, созданным функцией javascript

Доступ к входным значениям, созданным функцией javascript

#javascript #html

#javascript #HTML

Вопрос:

У меня есть форма в таблице со столбцами заголовка и описания, и строки могут быть добавлены динамически с помощью кнопки. Мне нужно получить доступ и сохранить входные значения в текстовых полях, созданных функцией javascript, при сохранении формы с помощью кнопки сохранения. входные значения позже сохраняются в локальном хранилище. Сохраненные значения используются для повторного заполнения формы в случае неудачной проверки.

 function add_text_input() {
  var table = document.getElementById('mytable');
  var x = table.rows.length;
  table.insertRow(-1).innerHTML = '<tr>'  
    '<td> <input type="text" id="title'   x   '" /></td>'  
    '<td> <input type="text" id="description'   x   '" /></td></tr>';
}

function save_data() {
  var table = document.getElementById('mytable');
  var tableRows = table.rows.length;
  var data = [];
  for (var i = 1; i <= tableRows; i  ) {
    for (var j = 0; j < 2; j  ) {
      var title = document.getElementById('title'   i).value;
      var desc = document.getElementById('description'   i).value;
      var temp = {
        title: title,
        description: desc
      };
      data.push(temp);
    }
  }
  window.localStorage.setItem('Table1', JSON.stringify(data));
} 
 <form>
  <table id="mytable">
    <tr>
      <td> Title </td>
      <td> Description </td>
    </tr>
  </table>
  <input type="button" onclick="add_text_input()" value="add row">
  <input type="button" onclick="save_data()" value="save">
</form>

Комментарии:

1. Итак .. в чем вопрос?

Ответ №1:

вы имели в виду что-то подобное?

 $(document).ready(()=>{ 

    $('#container').append('<input id="addedTxt" type="text" />');
  $('#addedTxt').val('Test');

    $('#saveBtn').on('click', ()=>{
        alert($('#addedTxt').val());
  });

});

<div id="container">

</div>
<input id="saveBtn" type="button" value="save" />

(с использованием jquery)

https://jsfiddle.net/u6vnxwzc/1/#amp;togetherjs=rQ2b5IsJQ1

или в чем проблема?

Ответ №2:

Почему в вашем коде вы используете второй цикл For ? Я думаю, что в этом нет необходимости.

найдите рабочий фрагмент кода

https://s.codepen.io/mastersmind/debug/VNyKrY/DqADdKoRXEjA

 function add_text_input() {
  var table = document.getElementById('mytable');
  var x = table.rows.length;
  table.insertRow(-1).innerHTML = '<tr>'  
    '<td> <input type="text" id="title' x '" /></td>' 
    '<td> <input type="text" id="description' x '" /></td></tr>';
}
function save_data(){
  var table = document.getElementById('mytable');
  var tableRows = table.rows.length;
  var data = [];
  for (var i = 1; i <= tableRows-1; i  ) {
    var title = document.getElementById('title'  i).value;
    var desc = document.getElementById('description'  i).value;
    var temp = {title: title, description: desc};
    data.push(temp);
  }
  window.localStorage.setItem('Table1', JSON.stringify(data));
}

loadData = function(){
  let data = JSON.parse(window.localStorage.getItem('Table1'));
  for(i=0; i<data.length;i  ){
    add_text_input();
    document.getElementById('title'  (i 1)).value = data[i].title;
    document.getElementById('description'  (i 1)).value = data[i].description;
  }
}


loadData(); 
 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form>
    <table id="mytable">
        <tr>
            <td> Title </td>
            <td> Description </td>
        </tr>
    </table>

    <input type="button" onclick="add_text_input()" value="add row">
    <input type="button" onclick="save_data()" value="save">
</form>
</body>
</html>
Метки: ,