0
Hi,

i am new to javascript  i have requirement
where

<div>
name:<input type="text" name="name"/>
age:<input type="text" name="age"/>
<input type="button" value="add"/>
</div>

when i click on add button it should add one set that is both name and age textbox,
one add click 2 textboxes name and age with label. like this

any help would be useful i should do this in javascript.

i have done similar thing using jquery but to add single text boxe
here is sample code
<html>
<head>
<title></title>

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>

<style type="text/css">
    div{
        padding:8px;
    }
</style>

</head>

<body>



<script type="text/javascript">

$(document).ready(function(){

    var counter = 2;

    $("#addButton").click(function () {

    if(counter>10){
            alert("Only 10 textboxes allow");
            return false;
    }   

    var newTextBoxDiv = $(document.createElement('div'))
         .attr("id", 'TextBoxDiv' + counter);

    newTextBoxDiv.after().html('<label>Textbox #'+ counter + ' : </label>' +
          '<input type="text" name="textbox' + counter + 
          '" id="textbox' + counter + '" value="" >');

    newTextBoxDiv.appendTo("#TextBoxesGroup");


    counter++;
     });

  });
</script>
</head><body>

<div id='TextBoxesGroup'>
    <div id="TextBoxDiv1">
        <label>Textbox #1 : </label><input type='textbox' id='textbox1' >
    </div>
</div>
<input type='button' value='Add Button' id='addButton'>

</body>
</html>




regards
2
Contributors
1
Reply
12
Views
4 Years
Discussion Span
Last Post by codersempire
0

You can do this with append.Below is a code & demo for it:

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
</script>
<script>
function getinput()
{
var name="<br>Name : <input type='text' name='name'>";
var age=" Age : <input type='text' name='age'>";
$("#inputs").append(name,age);
}
</script>
</head>
<body>
<div id="inputs">
Name : <input type='text' name='name'>
Age : <input type='text' name='age'>
<button onclick="getinput()">Add</button>
</div>
</body>
</html>

You can view demo here

Good Luck!

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.