Question

我有一个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ñadirsesion”按钮，就会创建一个新的文本框。

但是现在我发现我已经将自己编码到一个角落，因为我不知道如何获取用户在文本框中输入的字符串。

通常，我会使用document.getElementById('textbox_id').value

但是我不知道什么是动态创建的输入框的'textbox_id'。

是否存在：

a）一种获取任何新元素的ID的方法？
b）一种基于numerosesion变量分配ID的方法？这样，我可以使用for循环将其全部获取
c）完全不同的方式来实现这一目标目标？

感谢您的理解和时间。我已经使用堆栈溢出很长时间了，这是我第一次找不到解决问题的方法。

Answer 1

jQuery

$（“。objectclass”）这将返回一个dom元素数组，稍后您可以迭代该数组记住：

”。（点）类选择器 “＃”（标签）ID选择器

Answer 2

您可以将一个类添加到新输入中，按类选择它们，然后迭代结果数组。检查以下代码段（我将西班牙语命名翻译为英语）：

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>

Answer 3

向要动态创建的元素添加ID标记。请确保使用单引号将JavaScript引号转义，因为您已在上面使用它们。

id=“‘+ numerosesion+’”

然后，添加以下内容：

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

然后：

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

然后，当您想要获取值时，请执行以下操作：

document.getElementById(currentID).value

获取动态添加的文本元素的ID

3 个答案: