Jquery append input for 2 different input-sections
- by Email
Hi i use the following simple jquery script to append input.
Source http://muiomuio.com/web-design/add-remove-items-with-jquery
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Add and Remove - jQuery tutorial</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
var i = $('input').size() + 1;
$('a.add').click(function() {
$('<p><input type="text" value="input ' + i + '" name="input_field'+ i +'" /></p>').animate({ opacity: "show" }, "slow").appendTo('#inputs');
i++;
});
$('a.remove').click(function() {
if(i > 2) {
$('input:last').animate({opacity:"hide"}, "slow").remove();
i--;
}
});
$('a.reset').click(function() {
while(i > 2) {
$('input:last').remove();
i--;
}
});
});
</script>
</head>
<body>
<h1>Add / remove text fields from webform</h1>
<a href="#" class="add"><img src="add.png" width="24" height="24" alt="add" title="add input" /></a>
<a href="#" class="remove"><img src="remove.png" width="24" height="24" alt="remove input" /></a>
<a href="#" class="reset"><img src="reset.png" width="24" height="24" alt="reset" /></a>
<div id="inputs">
<p>
<input type="text" value="input 1" name="input_field1">
</p>
</div>
</div>
</body>
</html>
I know want to add more input fields
so i add this html
<div id="outputs">
<p>
<input type="text" value="output 1" name="output_field1">
</p>
how can i achieve that the
var i = $('input').size() + 1;
will be individually for every input section?
EDITED:
the full script is the following. copy and paste will get you a full clone of mine.
Problem still exists
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Add and Remove - jQuery tutorial</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
var i = $('input').size() + 1;
$('a.add').click(function() {
$('<p><input type="text" value="input ' + i + '" name="input_field'+ i +'" /></p>').animate({ opacity: "show" }, "slow").appendTo('#inputs');
i++;
});
$('a.remove').click(function() {
if(i > 2) {
$('input:last').animate({opacity:"hide"}, "slow").remove();
i--;
}
});
$('a.reset').click(function() {
while(i > 2) {
$('input:last').remove();
i--;
}
});
$('a.add_o').click(function() {
$('<p><input type="text" value="output ' + i + '" name="input_field'+ i +'" /></p>').animate({ opacity: "show" }, "slow").appendTo('#outputs');
i++;
});
$('a.remove_o').click(function() {
if(i > 2) {
$('input:last').animate({opacity:"hide"}, "slow").remove();
i--;
}
});
$('a.reset_o').click(function() {
while(i > 2) {
$('input:last').remove();
i--;
}
});
});
</script>
<style rel="stylesheet" type="text/css">
h1 { font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;}
.hide {visibility:hidden;}
img {border:none;}
input {
width:500px;
height:20px;
padding:10px;
background:#f7f7f7;
border:1px solid #f0f0f0;
color:#333;
font-size:20px;
text-align:center;
line-height:120px;
margin:0;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
#inputs {
width:520px;
padding:0px 20px;
border:1px solid #f0f0f0;
-moz-border-radius:20px;
-webkit-border-radius:20px;
}
</style>
</head>
<body>
<h1>Add / remove text fields from webform</h1>
<a href="#" class="add"><img src="http://muiomuio.com/tutorials/jquery/add-remove/add.png" width="24" height="24" alt="add" title="add input" /></a>
<a href="#" class="remove"><img src="http://muiomuio.com/tutorials/jquery/add-remove/remove.png" width="24" height="24" alt="remove input" /></a>
<a href="#" class="reset"><img src="http://muiomuio.com/tutorials/jquery/add-remove/reset.png" width="24" height="24" alt="reset" /></a>
<div id="inputs">
<p>
<input type="text" value="input 1" name="input_field1">
</p>
</div>
<a href="#" class="add_o"><img src="http://muiomuio.com/tutorials/jquery/add-remove/add.png" width="24" height="24" alt="add" title="add input" /></a>
<a href="#" class="remove_o"><img src="http://muiomuio.com/tutorials/jquery/add-remove/remove.png" width="24" height="24" alt="remove input" /></a>
<a href="#" class="reset_o"><img src="http://muiomuio.com/tutorials/jquery/add-remove/reset.png" width="24" height="24" alt="reset" /></a>
<div id="outputs">
<p>
<input type="text" value="output 1" name="output_field1">
</p>
</div>
</body>
</html>
