У меня есть страница ASP, на которой мой пользователь может загружать элементы в текстовые поля. Поскольку количество загружаемых элементов в начале неизвестно, я использую Javascript для создания новых текстовых полей по мере необходимости.

<script>

var numerosesion = 0;

function crearBoton()

    {
    $('#contenedor').append('<p>Sesion número: ');

    numerosesion = numerosesion + 1;
    $('#contenedor').append(numerosesion)

    $('#contenedor').append('</p>');

    $('#contenedor').append('<input type="text" name="TextBoxSession">');

}

Пока это работает, как и ожидалось, всякий раз, когда пользователь нажимает кнопку «añadir sesion», создается новое текстовое поле.

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

Обычно я бы использовал document.getElementById('textbox_id').value

Однако я не могу понять, что такое «textbox_id» для динамически создаваемых полей ввода.

Есть ли:

  • а) способ получить идентификаторы любых новых элементов?
  • б) способ назначения идентификаторов на основе переменной нумерации? таким образом, я мог бы просто использовать цикл for, чтобы получить их все
  • в) совсем другой путь, который достигает этой цели?

Спасибо за ваше понимание и время. Я давно использовал переполнение стека, и это первый раз, когда я не смог найти ответ на свою проблему.

1
ap0r 21 Авг 2018 в 01:14

3 ответа

Лучший ответ

Вы можете добавить класс к новым входам, выбрать их по классу и выполнить итерацию массива результатов. Проверьте этот фрагмент (я перевел испанские названия на английский):

var inputNumber = 0;

function createInput() {
    inputNumber = inputNumber + 1;
    $('#container').append('<p>Input number ' + inputNumber + '</p>');
    $('#container').append('<input class="new-input" type="text" name="TextBoxSession">');
}
// Get the input values and show them
function showInputValues() {
  var newInputs = $('.new-input');

  if( newInputs.length ) {
    for(i = 0; i < newInputs.length; i++) {
      $('#values').append('<p>Value of input '+ (i+1) +': '+ newInputs[i].value + '</p>');
    }
  } else {
    $('#values').append('<p>There are no text inputs</p>');
  }
  
}

$( window ).load(function() {
  
  $('#add-btn').click(function(){
    createInput();
  });
  
  $('#show-values-btn').click(function(){
    showInputValues();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container"></div>
<br>
<button id="add-btn">Add new input</button>
<button id="show-values-btn">Show inputs values</button>
<div id="values"></div>
0
Jonathan Ramos 21 Авг 2018 в 07:47

Добавьте тег ID к элементу, который вы динамически создаете. Обязательно избегайте цитаты JavaScript, используя одинарные кавычки, поскольку вы используете их выше.

id=“‘+ numerosesion+’”

Затем добавьте следующее:

onkeypress=“setCurrent(this.id); return false;”

Затем:

var currentID = null; 
function setCurrent(id){ currentID = id; }

Затем, когда вы хотите получить значение, выполните:

document.getElementById(currentID).value
0
Jacob Gaiski 20 Авг 2018 в 22:43

JQuery


$ (". objectclass") возвращает массив элементов dom, позже вы можете повторить этот массив, запомнив:


" " (точка) селектор класса "#" (хэштег) селектор идентификатора

1
David Leonardo Chaves 20 Авг 2018 в 22:26
51939180