如何通过ajax发送具有相同类名或id的多个输入值

Question

我正在尝试通过 AJAX 将多个输入值发送到我的 PHP 脚本。当我使用getElementById 时它工作正常。但是我可以选择添加一个孩子。它迭代输入字段，然后我只从第一个孩子那里得到值。我尝试使用getElementsByClassName，但它给出的值是undefined。这是我的代码：

<div id="name-field" class="name-field row">
  <div class="col-xs-12 col-sm-6 childname">
    <div class="field text-left">
      <label class="text-left">Name of child</label>
      <input id="firstname" class="firstname" name="firstname" type="text" />
    </div>
  </div>
  <div class="col-xs-12 col-sm-6 dateofbirth">
    <div class="field text-left">
      <label class="text-left">Date of birth</label>
      <input type="text" class="date" id="thedate" />
    </div>
  </div>
</div>

<a href="#" id="addChild" name="addchild" class="btn-success">Add Child</a>

<a href="#" id="stepname" class="btn" onclick="btnSubmit('step1')">Next Step</a>

//Iterate child function
jQuery(function($) {
  $("#addChild").click(function() {
    $(".name-field:first").clone().find("input").val("").end()
      .removeAttr("id")
      .appendTo("#additionalselects")
      .append($('<a class="delete" href="#"><i class="fa fa-times"></i></a>'));
  });
  $("body").on('click', ".delete", function() {
    $(this).closest(".name-field").remove();
  });
});

//Sending values function
function btnSubmit(step) {
  //Set Var with Name
  //Set Var with DoB
  if (step == 'step1') {

    //values using ID
    var Name = document.getElementById("firstname").value;
    var DoB = document.getElementById("thedate").value;

    //Values using classname
    var Name = document.getElementsByClassName("firstname").value;
    var DoB = document.getElementsByClassName("date").value;

    //Create a Variable catVar Having the Var Name and Var DoB Concatinated with a --

    var stepVar = Name + "--" + DoB;

    $(".thevoornaam, .date").each(function() {
      alert();
    });
  } else {

  }
  var xmlhttp;
  if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp = new XMLHttpRequest();
  } else { // code for IE6, IE5
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {



    }
  }
  xmlhttp.open("GET", "validations/btnSubmit.php?q=" + step + "&q2=" + stepVar, true);
  xmlhttp.send();
}

如果我没有正确解释，我希望你们能理解我想要达到的目的。

提前致谢。

Answer 1

使用 jQuery 你可以这样做。

var firstname = [];
$("#name-field .firstname").each(function(){
 firstname.push($(this).val());
});

在名字中，您将包含所有值。

更新

这是一支工作笔。

https://codepen.io/smitraval27/pen/dmvwVB

Answer 2

document.getElementsByClassName("firstname")

返回一个数组...所以下面将为您提供索引为 i 的元素值。要获取所有值，您需要执行 ForEach。

document.getElementsByClassName("firstname")[0].value

既然您在其他地方使用 JQuery，为什么不使用...

$('.firstname')[0].val();

Answer 3

最理想的方法是：

• 将表单包装器添加到您的字段 (id="ajaxForm")
• 为您的所有表单添加name 字段并使用以下代码生成要传递给的data 您的 AJAX 调用

$("#ajaxForm").serialize()

$.serialize()的返回值可以直接作为ajax调用的data

$("#ajaxForm").on("submit", function () {
  var ajaxData = $("#ajaxForm").serialize();
  
  $("#ajaxData").text(ajaxData);
  
  
  $.ajax({
    url:"",
    type: "get",
    data : ajaxData,
    success: function (resp) {}
  });
  console.log(ajaxData);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="ajaxForm" onsubmit="return false" >
  <input id="firstname" class="firstname" name="firstname" type="text" />
  <input type="text" name="date" class="date" id="date" />
  
  <input type="submit" value="submit">
</form>

<div id="ajaxData"></div>