In this article, we’ll learn how to create dynamic input fields using jQuery. Creating dynamic input fields is one of the most common techniques applied in web-app development; for instance, in an invoicing app, one needs to enter multiple inventory items in an invoice. Since exact number of inventory items are unknown at the start, we have to build a mechanism to insert each inventory item row dynamically.
Although modern JS frameworks like Vue, make it a much easier job, however, achieving the same results with the help of traditional toolkit i.e., jQuery, is worth noting as jQuery is still very potent tool and used abundantly by traditionalists who avoid the headache of bundling / compiling which come along with heavy-duty JS frameworks.
Here we’ll also employ Bootstrap for managing look and feel. Sometimes it’s nice to see that by including couple of lines in <head> we can have all the power in the world to quickly develop UIs of modern look and feel. So, let’s create an empty HTML file and insert the following code;
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Dynamic Input Fields</title>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.3/dist/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<form action="" class="prevent-multi">
<div class="dynamic_rows">
<div class="row p-2">
<div class="col-md-3">
<label for="item[]" class="form-label">Item</label>
<input type="text" class="form-control form-control-sm" name="item[]"/>
</div>
<div class="col-md-3">
<label for="quantity[]" class="form-label">Quantity</label>
<input type="text" class="form-control form-control-sm" name="quantity[]"/>
</div>
<div class="col-md-3">
<label for="rate[]" class="form-label">Rate</label>
<input type="text" class="form-control form-control-sm" name="rate[]"/>
</div>
</div>
</div>
<div class="row p-2">
<div class="col-md-3">
<button class="btn btn-sm btn-secondary add_row">Add Row</button>
<button type="submit" class="btn btn-sm btn-primary prevent-multi-submit">Submit Form</button>
</div>
</div>
</form>
<script>
$(document).ready(function() {
var x = 0;
html = '<div class="row p-2">';
html+= '<div class="col-md-3"><input type="text" class="form-control form-control-sm" name="item[]"/></div>';
html+= '<div class="col-md-3"><input type="text" class="form-control form-control-sm" name="quantity[]"/></div>';
html+= '<div class="col-md-3"><input type="text" class="form-control form-control-sm" name="rate[]"/></div>';
html+= '<div class="col-md-3"><a href="#" class="btn btn-sm btn-danger remove_row">X</a></div></div>';
$('.add_row').click(function(e){
e.preventDefault();
$('.dynamic_rows').append(html);
x++;
console.log(x); // Remove this line...it's just for testing...
})
$('.dynamic_rows').on("click",".remove_row", function(e){
e.preventDefault();
$(this).parent('div').parent('div').remove();
x--;
console.log(x); // Remove this line...it's just for testing...
})
// Form submission helper functions...
$(document).on("keydown", ":input:not(textarea):not(:submit)", function(event) {
if(event.keyCode == 13) {
event.preventDefault();
return false;
}
}) // helper function to prevent submission of form on pressing 'Enter' in input fields.
$('.prevent-multi').on('submit', function(){
$('.prevent-multi-submit').attr('disabled','true');
return true;
}) // helper function to prevent double submission of form.
});
</script>
</body>
</html>
Save it as an HTML file and then open it in the browser…that’s it.
In next post we’ll see how to get similar results with much neat and clean code using Vue.
1 thought on “Dynamic input fields using jQuery”