所以我正在form为一个允许一个人在input标签中输入他们的信息进行注册的网站做一个，所以我需要信息（即姓名、地址、年龄）。我还希望在屏幕底部有一个按钮，以便能够发出AJAX请求以input再次将所有相同的元素带入，这样用户就可以注册另一个人而无需转到另一个页面。
我正在这样做form，所以我需要每个input人都有一个唯一的名称，这样当我访问服务器端的信息时我就可以得到它。
所以这是我的代码：
<div id="registrationfield">
<div class="registerfield">
<label>First Name:</label>
<input type="text" id="first" name="first0" />
</div>
<div class="registerfield">
<label>Last Name:</label>
<input type="text" id="last" name="last0" />
</div>
<div class="registerfield">
<label>Age:</label>
<input type="text" id="age" name="age0" />
</div>
<div class="registerfield">
<label>Gender</label>
<select name="gender0" >
<option></option>
<option>Male</option>
<option>Female</option>
</select>
</div>
<div class="registerfield">
<label>Email:</label>
<input type="text" id="emailregistration" name="email0" />
</div>
<div class="registerfield">
<label>Phone:</label>
<input type="text" id="phone" name="phone0" />
</div>
<div class="registerfield">
<label>Address:</label>
<input type="text" id="address" name="address0" />
</div>
<div class="registerfield">
<label>City:</label>
<input type="text" id="city" name="city0" />
</div>
<div class="registerfield">
<label>Zip Code:</label>
<input type="text" id="zip" name="zip0" />
</div>
<div class="registerfield">
<label>T-Shirt Size</label>
<select id="tshirt" name="tshirt0" >
<option>S</option>
<option>M</option>
<option>L</option>
<option>XL</option>
<option>XXL</option>
</select>
<button id="moreregistration">More</button>
</div>
</div>
</div>
这是我在AJAX请求中引入的 HTML：
<div class="registerfield">
<label>First Name:</label>
<input type="text" name="first" />
</div>
<div class="registerfield">
<label>Last Name:</label>
<input type="text" name="last" />
</div>
<div class="registerfield">
<label>Age:</label>
<input type="text" name="age"/>
</div>
<div class="registerfield">
<label>Gender</label>
<select name="gender">
<option>Male</option>
<option>Female</option>
</select>
</div>
<div class="registerfield">
<label>Email:</label>
<input type="text" name="email" />
</div>
<div class="registerfield">
<label>Phone:</label>
<input type="text" name="phone" />
</div>
<div class="registerfield">
<label>Address:</label>
<input type="text" name="address" />
</div>
<div class="registerfield">
<label>City:</label>
<input type="text" name="city" />
</div>
<div class="registerfield">
<label>Zip Code:</label>
<input type="text" name="zip" />
</div>
<div class="registerfield">
<label>T-Shirt Size</label>
<select name="tshirt" >
<option>S</option>
<option>M</option>
<option>L</option>
<option>XL</option>
<option>XXL</option>
</select>
</div>
而我所做的，一旦我将 HTML 加载到我的主 HTML 文档中，就是将name每个input和select元素的属性更改为最后有一个额外的数字。
例如，当发出第一个 AJAX 请求时，它会发出name="first"to name="first1"，并且每次发出请求时，该数字都会增加 1。
现在，在我的JavaScript中，我发出警报以确保每个元素的属性都按照应有的方式设置，并且从警报中我得到它看起来是正确的。
但是，我在谷歌浏览器中查看了源代码，属性name非常不正确。我不知道问题可能是什么。这是我的jQuery，任何帮助将不胜感激。
$(document).ready(function () {
//this is the variable that will be added on to the end of the form attribute
var counter = 1;
$('#moreregistration').click(function () {
$.get("registerform.html", function (data) {
$(data).appendTo('#registrationfield').hide().fadeIn();
}).complete(function () {
//this variable sets my index so I do not effect the input elements already in the html.
var formElementIndexToInsert = (counter * 10);
//loop through all elements for a single ajax request
for (var j = formElementIndexToInsert; j <= formElementIndexToInsert + 9; j++) {
alert(j);
if ((j % 10 == 3) || (j % 10 == 9)) {
var formName = $('.registerfield').eq(j).children('select').attr('name');
formName = (formName + counter);
alert(formName);
$('.registerfield').eq(j).children('select').attr('name', formName);
} else {
var formName = $('.registerfield').eq(j).children('input').attr('name');
formName = (formName + counter);
alert(formName);
$('.registerfield').eq(formElementIndexToInsert).children('input').attr('name', formName);
}
}
counter++;
});
});
});