javascript - 获取每个动态创建的输入元素的动态值并将它们分配给单独的变量

Question

我想获取在 javascript 中创建的动态创建的输入元素的值。并将它们分配给以下代码中的变量。我似乎无法从 jquery 的 .each block 中获取值以将它们分配给变量。请注意，我还想根据用户创建的输入字段的数量创建变量。 代码: html:

<div class="col-md-4">
  <input list="roles" placeholder="" id="hrrole1" name="hrrole1" class="form-
     control role">
  <datalist id="roles">
          <option value="Driver">
          <option value="Helper">
          <option value="Custodian">
          <option value="Security">
          </datalist>
</div>
<div class="form-group">
  <div class="row">
    <div class="col-md-offset-2 col-md-4">
      <button class="btn btn-success add_form_field">Add New Role &nbsp; 
          <span style="font-size:16px; font-weight:bold;">+ </span></button>
    </div>
  </div>
</div>
<div class="add_form"></div>

JavaScript:

var max_input_field = 20;
var view_wrapper = $(".add_form");
var view_add_new_role = $(".add_form_field");
var x = 1;

$("form[name=hrregistration]").submit(function(e) {
  e.preventDefault();

  validateForm();
});

$(view_add_new_role).click(function(e) {
      e.preventDefault();

      if (x < max_input_field) {
        x++;
        $(view_wrapper).append('<div class="form-group dynamic"><div class="row"> <
          div class = "col-md-2" > < label class = "control-label"
          for = "hrrole'+x+'" > Role '+x+': < /label></div > < div class = "col-md-4" > < input list = "roles"
          placeholder = ""
          id = "hrrole'+x+'"
          name = "hrrole'+x+'"
          class = "form-control 
          role "><datalist id="
          roles "><option value="
          Driver "><option value="
          Helper "> <
          option value = "Custodian" > < option value = "Security" > < /datalist></div > < div class = "col-md-2" > < button class = "btn btn-danger delete"
          id = "delete" > Delete < /button></div > < /div></div > ');
        }
        else {
          swal("Oops!", "You Have Reached Maximum Limit", "error");
        }
      });

    $(view_wrapper).on("click", ".delete", function(e) {
      e.preventDefault();

      $(this).parentsUntil('.dynamic').remove();
      x--;
    });

    function validateForm() {
      var hrname = $("#hrname").val();
      var hrphone = $("#hrphone").val();
      var hrdriverslicense = $("#hrdriverslicense").val();
      var hrage = $("#hrage").val();
      var hraadhar = $("#hraadhar").val();
      var hridentity = $("#hridentity").val();
      var hridentitytype = $("#hridentitytype").val();
      var hraddress = $("#hraddress").val();
      var hrsalary = $("#hrsalary").val();
      var rolevalue;
      $(".role").each(function() {
        var roleid = $(this).attr('id');
        rolevalue = $(this).val();

      });

    }

Answer 1

function validateForm() {
  var hrname = $("#hrname").val();
  var hrphone = $("#hrphone").val();
  var hrdriverslicense = $("#hrdriverslicense").val();
  var hrage = $("#hrage").val();
  var hraadhar = $("#hraadhar").val();
  var hridentity = $("#hridentity").val();
  var hridentitytype = $("#hridentitytype").val();
  var hraddress = $("#hraddress").val();
  var hrsalary = $("#hrsalary").val();
  var rolevalue = {};
  $(".role").each(function() {
    var roleid = $(this).attr('id');
    rolevalue[roleid] = $(this).val();

  });
  for(var i=x; i > 0; i--){
     alert('hrrole'+i+' = ' + rolevalue['hrrole'+i]);
  }

}