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

我试图通过AJAX将多个输入值发送到我的PHP脚本。当我使用

getElementById

时，它工作正常。但是，我可以选择添加一个子项。它迭代输入字段，然后我只从第一个子项获取值。我试图使用

getElementsByClassName

，但它给出的值为

undefined

。这是我的代码：

子女姓名
出生日期

//迭代子函数
jQuery（函数（$）{
$（“#添加子项”）。单击（函数（）{
$（“.name字段：first”）.clone（）.find（“输入”）.val（“”.end（）
.removeAttr（“id”）
.附录（“#附加选择”）
。附加（$（''）；
});
$（“body”）。在（'click'，.delete'，function（）上{
$（this）.closest（“.name字段”）.remove（）；
});
});
//发送值函数
函数btnSubmit（步骤）{
//使用名称设置变量
//用DoB设置Var
如果（步骤==“步骤1”）{
//使用ID的值
var Name=document.getElementById（“firstname”）.value；
var DoB=document.getElementById（“thedate”）.value；
//使用类名称的值
var Name=document.getElementsByClassName（“firstname”）.value；
var DoB=document.getElementsByClassName（“日期”）.value；
//创建一个变量catVar，该变量的Var名称和Var DoB与--
var stepVar=Name+“--”+DoB；
$（“.thevoornaam，.date”）。每个（函数（）{
警惕（）；
});
}否则{
}
var-xmlhttp；
if（window.XMLHttpRequest）{//IE7+、Firefox、Chrome、Opera、Safari的代码
xmlhttp=新的XMLHttpRequest（）；
}else{//IE6、IE5的代码
xmlhttp=新的ActiveXObject（“Microsoft.xmlhttp”）；
}
xmlhttp.onreadystatechange=函数（）{
if（xmlhttp.readyState==4&&xmlhttp.status==200）{
}
}
open（“GET”、“validations/btnSubmit.php？q=“+step+”&q2=“+stepVar，true”）；
xmlhttp.send（）；
}

如果我没有正确解释的话，我希望你们能理解我想用这个来实现什么

---

提前感谢。

使用jQuery，您可以这样做

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

在firstname中，您将看到所有值

更新 这是一支钢笔

---

使用jQuery，您可以这样做

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

在firstname中，您将看到所有值

更新 这是一支钢笔

返回一个数组。。。下面将给出索引i的元素值。要获得所有值，您需要执行ForEach

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

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

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

返回一个数组。。。下面将给出索引i的元素值。要获得所有值，您需要执行ForEach

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

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

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

---

最理想的方法是：

• 向字段中添加表单包装（

  id=“ajaxForm”

  ）
• 将

  名称

  添加到所有表单 字段并使用下面的代码生成要传递给的

  数据

  您的AJAX调用

$（“#ajaxForm”）.serialize（）

$.serialize（）

的返回值可以直接用作ajax调用的

数据


$（“#ajaxForm”）。关于（“提交”，函数（）{
var ajaxData=$（“#ajaxForm”）.serialize（）；
$（“#ajaxData”）.text（ajaxData）；
$.ajax({
url:“”，
键入：“获取”，
数据：ajaxData，
成功：函数（resp）{}
});
console.log（ajaxData）；
});
最理想的方法是：


向字段中添加表单包装（
id=“ajaxForm”
）
将
名称
添加到所有表单
字段并使用下面的代码生成要传递给的
数据
您的AJAX调用

$（“#ajaxForm”）.serialize（）

$.serialize（）
的返回值可以直接用作ajax调用的
数据


$（“#ajaxForm”）。关于（“提交”，函数（）{
var ajaxData=$（“#ajaxForm”）.serialize（）；
$（“#ajaxData”）.text（ajaxData）；
$.ajax({
url:“”，
键入：“获取”，
数据：ajaxData，
成功：函数（resp）{}
});
console.log（ajaxData）；
});

您的
日期
输入有
日期
类名，但您正在查找
日期
。另外，
getElementsByClassName
返回一个匹配元素的数组，因此您必须迭代，而不是尝试获取
。value
我也有日期ID，我编写了代码目标ID和类。您的
日期
输入有
日期
类名，但您正在查找
日期
。另外，
getElementsByClassName
返回一个匹配元素的数组，因此您必须迭代，而不是尝试获取
。value
我也有日期ID，我编写了代码目标ID和类。我尝试这样使用，但不起作用$（document）.ready（function（）{$（“#stepname”）。单击（function（）{var firstname=[]；$（“.firstname”）。每个（function（）{firstname.push（$（this.val（））；}）；}）；忘记您正在动态添加div，请查看更新的答案。给$（“#name field.firstname”）。each@SmitRaval很高兴我找到了这个。这是实现只获取输入值的最佳方法。我在做类似的事情，但我在做$（'.className'）。每个（函数（I，val）{array.push（val）}值都在那里，但有大量随机的dom乱码我不需要。这只允许我捕获输入的val。谢谢。我试着这样使用，但不起作用。$（文档）。就绪（函数（）{$（“#步骤名”）.click（function（）{var firstname=[]；$（“.firstname”）.each（function（）{firstname.push（$（this.val（））；}）；}）；忘记动态添加div，请查看更新的答案。Give$（“#name field.firstname”）。each@SmitRaval很高兴我找到了这个。这是r