Google Ads

Simple Dynamic Input Using jQuery/MySQL PHP Script


Simple Dynamic Input Using jQuery/MySQL PHP Script

The Simple Dynamic Input was built using jQuery/PHP. I used Bootstrap as a front-end framework for the design. This simple application will show you how dynamic input can submit multiple data to MySQL database server.

This is the sample code for the HTML

 

<div class = "row">
<div class = "col-md-3">
</div>
<div class = "col-md-1" style = "margin-left:10px;" >
<button class = "btn btn-success" id = "add"><span class = "glyphicon glyphicon-plus"></span> Add new Entry</button>
<br />
<br />
</div>
<form method = "POST" action = "save_data.php">
<button class = "btn btn-primary" name = "submit" ><span class = "glyphicon glyphicon-save"></span> Submit</button>
<div style = "margin-left:30px;" id = "input" class = "col-md-3">
<div class = "well">
<div class = "form-group">
<label>Firstname</label>
<input class = "form-control" type = "text" name = "firstname[]"/>
</div>
<div class = "form-group">
<label>Lastname</label>
<input class = "form-control" type = "text" name = "lastname[]"/>
</div>
</div>
</div>
</form>
</div>
</body>
<script src = "js/jquery.js"></script>
<script type = "text/javascript">
$(document).ready(function(){
$('#add').click(function(){
$input = $('<div class = "well">'
+ '<br />'
+ '<div class = "form-group">'
+ '<label>Firstname</label>'
+ '<input class = "form-control" type = "text" name = "firstname[]" required = "required"/>'
+ '</div>'
+ '<div class = "form-group">'
+ '<label>Lastname</label>'
+ '<input class = "form-control" type = "text" name = "lastname[]" required = "required"/>'
+ '</div>');
$input.fadeIn(1000).appendTo('#input');
});
});
</script>

 

I hope that this kind of Source Code can be used to your projects and future project. For more tutorials and updates just visit this site. Enjoy Coding!

 

 

Have any Question or Comment?

Leave a Reply

Your email address will not be published. Required fields are marked *