When I click on add, then it will be adding and I’m getting the same values of select and input boxes but I want the different id’s every time for ajax call and change the value dynamically and send those values in Django.
I have tried 1 solution but after applying that my add functionality stopped working.
I have tried multiple solutions and have been working on it for 2-3 weeks, but I didn’t get what I want.
$(document).ready(function() {
var maxField = 10; //Input fields increment limitation
var addButton = $('.add_button'); //Add button selector
var wrapper = $('.field_wrapper'); //Input field wrapper
var fieldHTML = '<section class="row"><div class="col-md-3 mt-2"><label for="CustomerCity" class="">Select Product</label><select class="form-control selectitem" name="item[]" id="selectitem" required><option selected>Select Item</option></select></div><div class="col-md-2 mt-2"><label for="CustomerCity" class="">Unit Price</label><input name="customer_city" id="customer_city" type="text" class="form-control" value="" placeholder="Unit Price" required></div><div class="col-md-2 mt-2"><label for="CustomerCity" class="">Quantity</label><input name="customer_city" id="customer_city" type="text" class="form-control" value="" placeholder="Quantity" required></div><div class="col-md-2 mt-2"><label for="CustomerCity" class="">Tax Amount</label><input name="customer_city" id="customer_city" type="text" class="form-control" value="" placeholder="Tax Amount" required></div><div class="col-md-2 mt-2"><label for="CustomerCity" class="">Extended Total</label><input name="customer_city" id="customer_city" type="text" class="form-control" value="" placeholder="Extended Total" required></div><div class="col-md-1 mt-2"><a href="javascript:void(0);" class="remove_button btn btn-danger mt-4 p-2 form-control">Delete</a></div></section>'; //New input field html
var x = 1; //Initial field counter is 1
//Once add button is clicked
$(addButton).click(function() {
//Check maximum number of input fields
if (x < maxField) {
x++; //Increment field counter
$(wrapper).append(fieldHTML); //Add field html
}
});
//Once remove button is clicked
$(wrapper).on('click', '.remove_button', function(e) {
e.preventDefault();
$(this).parents('section').remove(); //Remove field html
x--; //Decrement field counter
});
});
html code
.position-relative {
position: relative !important
}
.form-group {
margin-bottom: 1rem
}
.col-md-12, .col-md-3, .col-md-2, .col-md-1{
position: relative;
width: 100%;
padding-right: 15px;
padding-left: 15px
}
a {
color: #3f6ad8;
text-decoration: none;
background-color: transparent
}
a:hover {
color: #0056b3;
text-decoration: underline
}
.btn {
display: inline-block;
font-weight: 400;
color: #495057;
text-align: center;
vertical-align: middle;
user-select: none;
background-color: transparent;
border: 1px solid transparent;
padding: .375rem .75rem;
font-size: 1rem;
line-height: 1.5;
border-radius: .25rem;
transition: color 0.15s, background-color 0.15s, border-color 0.15s, box-shadow 0.15s
}
.btn-primary {
color: #fff;
background-color: #3f6ad8;
border-color: #3f6ad8
}
.btn-primary:hover {
color: #fff;
background-color: #2955c8;
border-color: #2651be
}
.row {
display: flex;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px
}
.form-control {
display: block;
width: 100%;
height: calc(2.25rem + 2px);
padding: .375rem .75rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #495057;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
border-radius: .25rem;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out
}
label {
display: inline-block;
margin-bottom: .5rem
}
input,
button,
select,
optgroup,
textarea {
margin: 0;
font-family: inherit;
font-size: inherit;
line-height: inherit
}
@media (min-width: 576px) {
.form-group {
display: flex;
flex: 0 0 auto;
flex-flow: row wrap;
align-items: center;
margin-bottom: 0
}
}
css code
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="position-relative mt-3 form-group col-md-12 field_wrapper">
<div class="row ">
<div class="col-md-3">
<label for="CustomerCity" class="">Select Product</label>
<select class="form-control selectitem" name="item[]" id="selectitem" required>
<option selected>Select Item</option>
</select>
</div>
<div class="col-md-2">
<label for="CustomerCity" class="">Unit Price</label>
<input name="customer_city" id="customer_city" type="text" class="form-control" value="" placeholder="Unit Price" required>
</div>
<div class="col-md-2">
<label for="CustomerCity" class="">Quantity</label>
<input name="customer_city" id="customer_city" type="text" class="form-control" value="" placeholder="Quantity" required>
</div>
<div class="col-md-2">
<label for="CustomerCity" class="">Tax Amount</label>
<input name="customer_city" id="customer_city" type="text" class="form-control" value="" placeholder="Tax Amount" required>
</div>
<div class="col-md-2">
<label for="CustomerCity" class="">Extended Total</label>
<input name="customer_city" id="customer_city" type="text" class="form-control" value="" placeholder="Extended Total" required>
</div>
<div class="col-md-1">
<a href="javascript:void(0);" class="add_button btn form-control mt-4 btn-primary p-2" title="Add field">ADD</a>
</div>
</div>
</div>