pTutorial

New way to learn Programming

JQuery dynamic form example

how to create dynamic form using jquery

In this article we demonstrate how to make form dynamicly with the help of live example. The following JQuery Script can be used to create form dynamicly and get the complete form data.

Dynamic form example


<!DOCTYPE html>
<html>
<head>
<script src="http://freeonlinecompiler.ptutorial.com/
js/jquery.min.js"></script>
<link rel="stylesheet" href="http://freeonlinecompiler.ptutorial.com/
css/bootstrap.min.css">
<script>
$(document).ready(function(){
$('#password1').click(function() {
$("#hh").prepend("<input class='form-control' type='text' name='myInputs[]'><br>");
$("#sub").click(function(){
var k=$("#form").serialize()
console.log(k);
alert(k);
return false;
});
});


});
</script>
</head>
<body>
<div class="container-fluid">
<div class="col-sm-5">
<form action="#" id="form" method="post">
<div class="form-group">
<label>Last Name  :</label>  
<div id="hh"></div>
<input type='text' class="form-control" name='myInputs[]'>

</div>
<div id="password1" class="btn btn-danger">Add more Element</div>
<input type="submit" id="sub" class="btn btn-danger">
</form>
</div>
</div>
</body>
</html>


Download

See Also


QUOTES OF THE DAY

We are never deceived we deceive ourselves.

LIKE ON FACEBOOK

+1 ON GOOGLE

SHARE ON TWITTER