Member Avatar for jinxmc 
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
  • 2K Views
  • 19 Hours Discussion Span
  • Latest Post Latest Post by codersempire
Member Avatar for codersempire

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!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.