在我给定的代码中,我用diff-ids动态创建了textbox,在javascript中,我一个接一个地获取textbox的值,直到这里所有的东西都很完美,但当我将这些数据从ajax post方法传递到其他文件时,获取的数据序列将改变
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script>
$(document).ready(function(){
var i = $('input').size() + 1;
$('#add').click(function() {
var value = parseInt(document.getElementById('number').value, 10);
value = isNaN(value) ? 0 : value;
value++;
document.getElementById('number').value = value;
$('<div id="d"><input type="text" id="field'+value+'" name="dynamic[]" value="' + i + '" /><br/><input type="text" class="field1" name="dynamic1[]" value="' + i+i + '" /></div> ').fadeIn('slow').appendTo('.inputs');
i++;
});
$('#remove').click(function() {
if(i > 1) {
$('.field:last').remove();
$('.field1:last').remove();
i--;
}
});
$('#reset').click(function() {
while(i > 2) {
$('.field:last').remove();
$('.field1:last').remove();
i--;
}
});
$('.submit').click(function(){
var number = document.getElementById("number").value;
for(var i=1;i<=number;i++)
{
answers = $('#field'+i).val();
alert(answers);
$.ajax({
type: "POST",
url: " dd.php",
data: {answers:answers},
cache: false,
success: function(html)
{
alert(html);
}
})
}
return false;
});
});
</script>
<style>
.field{
padding:0 0 0 0;
margin: 0 5px 24px 78px;
}
.field1{
padding:0 0 0 0;
margin: 0 5px 24px 78px;
}
#d{
display:flex;
}
.submit{
width:110px;
background-color:#FF6;
padding:3px;
border:1px solid #FC0;
margin-top:20px;}
</style>
<body>
<div>
<a href="#" id="add">Add</a> | <a href="#" id="remove">Remove</a> | <a href="#" id="reset">Reset</a>
<form>
<input type="hidden" id="number" value="0"/>
<div class="inputs">
</div>
<input name="submit" type="button" class="submit" value="Submit">
</form>
</div>
</body>
</html>
上面的代码不起作用。您在第一个输入字段中错过了类,您保留了id而不是类名。
$(document).ready(function(){
var i = $('input').size() + 1;
$('#add').click(function()
{
$('<div class="d"><input type="text" class="field" name="dynamic[]" value="' + i + '" /><br/><input type="text" class="field1" name="dynamic1[]" value="' + i+i + '" /></div> ').fadeIn('slow').appendTo('.inputs');
i++;
});
$('#remove').click(function() {
if(i > 1) {
$('.field:last').remove();
$('.field1:last').remove();
i--;
}
});
$('#reset').click(function() {
while(i > 2) {
$('.field:last').remove();
$('.field1:last').remove();
i--;
}
});
});
</script>
<style>
.field{
padding:0 0 0 0;
margin: 0 5px 24px 78px;
}
.field1{
padding:0 0 0 0;
margin: 0 5px 24px 78px;
}
.d{
display:flex;
}
.submit{
width:110px;
background-color:#FF6;
padding:3px;
border:1px solid #FC0;
margin-top:20px;
}
</style>
<body>
<div>
<a href="#" id="add">Add</a> | <a href="#" id="remove">Remove</a> | <a href="#" id="reset">Reset</a>
<form method="post" action="dd.php">
<div class="inputs">
</div>
<input name="submit" type="submit" class="submit" value="Submit">
</form>
</div>
搜索后,我得到了问题的答案,所以我想与所有人分享,所以我只发布了我的问题答案。
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script>
$(document).ready(function(){
var i = $('input').size() + 1;
$('#add').click(function()
{
$('<div id="d"><input type="text" id="field" name="dynamic[]" value="' + i + '" /><br/><input type="text" class="field1" name="dynamic1[]" value="' + i+i + '" /></div> ').fadeIn('slow').appendTo('.inputs');
i++;
});
$('#remove').click(function() {
if(i > 1) {
$('.field:last').remove();
$('.field1:last').remove();
i--;
}
});
$('#reset').click(function() {
while(i > 2) {
$('.field:last').remove();
$('.field1:last').remove();
i--;
}
});
});
</script>
<style>
.field{
padding:0 0 0 0;
margin: 0 5px 24px 78px;
}
.field1{
padding:0 0 0 0;
margin: 0 5px 24px 78px;
}
#d{
display:flex;
}
.submit{
width:110px;
background-color:#FF6;
padding:3px;
border:1px solid #FC0;
margin-top:20px;
}
</style>
<body>
<div>
<a href="#" id="add">Add</a> | <a href="#" id="remove">Remove</a> | <a href="#" id="reset">Reset</a>
<form method="post" action="dd.php">
<div class="inputs">
</div>
<input name="submit" type="submit" class="submit" value="Submit">
</form>
</div>
</body>
</html>
dd.php
<?php
foreach($_POST["dynamic"] as $key)
{
echo $key;
}
?>