javascript - 如何使用动态创建的 id 或 id 作为变量使用 jQuery 从表单字段中获取值

Question

我创建了一个小型应用程序，我在其中使用 jQuery 动态创建了表单元素及其 ID。稍后为了进行表单验证，我需要获取条目的字段。我能够获取输入字段的值，但无法获取文件、 radio 和其他选择字段。这是仅用于文件的小代码

var x = 1;    
function validate() {
  for(i=0;i<10;i++) {
    var filename = $('input[id="f'+ i +'"]').val().replace(/.*(\/|\\)/, '');
    alert(filename);
  }
  
  return false;
}

$(document).ready(function() {   
  $("#fd").on("click",".but",function() {
    $(this).parent().remove();
  });

  $("#c").click(function() {       
    var txt = "<div class='di'><input type='file'id='f"+ x +"'><input type='text' id='t"+ x +"'><button class='but' id='d'> "+ x +" Button </button></div>";
    x++;
    $("#fd").append(txt);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="c">Create Element</button>
<br> <br>
<form action="temp.php" onsubmit="return validate()" method="GET">
  <div id="fd">
    <button id="d">First Element</button>
    <input type="submit" name="submit">
  </div>
</form>

如何使用为表单元素动态创建的 id 检索数据。考虑 10 个元素谢谢您的帮助。

Answer 1

您可以将相同的 class 添加到所有输入并使用 jQuery 获取它们的值，如下所示 -

var inputs = $(".className");    // your class name
// iterate over the inputs any way you want
for(var i = 0; i < inputs.length; i++){
    alert($(inputs[i]).val());
}

或者这样 -

var valueArray = $('.className').map(function() {
    return this.value;
}).get();