Home/ Questions/Q 3665004
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-19T01:42:33+00:00

Hi i use the following simple jquery script to append input. Source http://muiomuio.com/web-design/add-remove-items-with-jquery <html

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I think I did what you want. The only thing you had to do, was make your code more consistent. Instead of asking size() once, you can just ask it every time you need it. This will be your i. I think this will be your full javascript. As you can see, I explicitly added the '#inputs input' question, so you count the right things. I think the .size() method is a bit deceiving, because it actually is a count method. Counting the numbers of objects that are matched.

    $(function() 
{
    $('a.add').click(function() 
    {
        var i = $('#inputs input').size() + 1;
        var newItem = newTextField('input',i);
        appendItem(newItem, '#inputs');
    });

    $('a.remove').click(function() 
    {
        var i = $('#inputs input').size();

        // can't remove the last
        if(i > 1)
            removeItem('#inputs input:last'); // be sure that the input is inside your #inputs
    });

    $('a.reset').click(function() 
    {
        while($('#inputs input').size() > 1) 
        {
            $('#inputs input:last').remove();
        }
    });

    $('a.add_o').click(function() 
    {
        var i = $('#outputs input').size() + 1;
        var newItem = newTextField('output',i);
        appendItem(newItem, '#outputs');
    });

    $('a.remove_o').click(function() 
    {
        var i = $('#outputs input').size();

        // can't remove the last
        if(i > 1) 
            removeItem('#outputs input:last'); // be sure that the output is inside your #outputs

    });

    $('a.reset_o').click(function() 
    {
        while($('#outputs input').size() > 1) 
        {
            $('#outputs input:last').remove();
        }
    });

    /*
     * @param type: a string of input of output
     * @param i: the number to add to
     */
    function newTextField(type, i)
    {
        return '<p><input type="text" value="' + type + ' ' + i + '" name="input_field"' + i + '" /></p>';
    }

    /*
     * append the item animated to the $(selector)
     * @param item: the item:string to append
     * @param selector: the selector:string to append to
     */
    function appendItem(item, selector)
    {
        $(item).animate({ opacity: 'show' }, 'slow').appendTo(selector);
    }

    /*
     * remove an item animated
     * @param item: the item:string to remove
     */
    function removeItem(item)
    {
        $(item).animate({opacity:"hide"}, "slow").remove();
    }
});
    • 0