لدي قسم المنتج والحقول "Product name", "Qty" and "Add more"
. يقوم المستخدم الأول بإدخال اسم المنتج ثم يقوم المستخدم بإدخال الكمية (يمكن للمستخدم إدخال الكمية مباشرة في حقل الإدخال أو يمكنه النقر فوق علامة الجمع لزيادة الكمية أو تقليل الكمية)
دعنا نتحدث عن حقل "إضافة المزيد"
إذا كان المستخدم يريد منتجات متعددة ، فيجب عليه / عليها النقر على "إضافة زر" وسيعرض الحقل نفسه "Product name", "Qty" and "Remove"
.
الآن مشكلتي ، عندما يريد المستخدم منتجات متعددة فأنا أتلقى مشكلة الجودة. أقوم بزيادة كمية المنتج الثاني ولكن ذلك يزيد من كمية المنتج الأول. أعلم أن هذه المشكلة تحدث بسبب معرف المدخلات المقدمة.
هذا هو اسم المنتج الأول وكميته
الآن أضفت اسم منتج واحدًا وزادت الكمية 4. لذا فإن الكمية الخاصة بي تتغير في المنتج الأول.
function increaseValue() {
var value = parseInt(document.getElementById('number').value, 10);
value = isNaN(value) ? 0 : value;
value++;
document.getElementById('number').value = value;
}
function decreaseValue() {
var value = parseInt(document.getElementById('number').value, 10);
value = isNaN(value) ? 0 : value;
value < 1 ? value = 1 : '';
value--;
document.getElementById('number').value = value;
}
$(document).ready(function() {
var max_fields = 20; //maximum input boxes allowed
var wrapper = $(".add_row"); //Fields wrapper
var add_button = $(".add_row_click");
var x = 1; //initlal text box count
$(add_button).click(function(e) { //on add input button click
//alert("hellow");
e.preventDefault();
if (x < max_fields) { //max input box allowed
x++; //text box increment
var id_counter = 1;
$(wrapper).append('<div class="custom_fields"><input type="text" name="product" placeholder="Enter product name"><div class="value-button" id="decrease" onclick="decreaseValue()" value="Decrease Value">-</div><input type="number" id="number" value="0" /><div class="value-button" id="increase" onclick="increaseValue()" value="Increase Value">+</div> <div class="btn_row remove_field"> <span> - </span> Remove </div></div>');
}
});
$(wrapper).on("click", ".remove_field", function(e) { //user click on remove text
e.preventDefault();
//$(this).parent('custom_fields').remove();
$(this).closest('.custom_fields').remove();
x--;
})
});
form {
width: 300px;
margin: 0 auto;
text-align: center;
padding-top: 50px;
}
.value-button {
display: inline-block;
border: 1px solid #ddd;
margin: 0px;
width: 40px;
height: 20px;
text-align: center;
vertical-align: middle;
padding: 11px 0;
background: #eee;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.value-button:hover {
cursor: pointer;
}
form #decrease {
margin-right: -4px;
border-radius: 8px 0 0 8px;
}
form #increase {
margin-left: -4px;
border-radius: 0 8px 8px 0;
}
form #input-wrap {
margin: 0px;
padding: 0px;
}
input#number {
text-align: center;
border: none;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
margin: 0px;
width: 40px;
height: 40px;
}
input[type='number'] {
-moz-appearance: textfield;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.btn_row {
transition: .2s;
width: 100%;
font-weight: normal;
font-size: 14px;
font-family: Muli;
outline: none;
border: none;
padding: 7px;
background: #f4f2f3;
color: #999;
text-align: center;
cursor: pointer;
text-transform: uppercase;
color: #000;
font-weight: bold;
}
.btn_row span {
font-size: 18px;
}
.add_row_click {
background: #a8dabf;
}
<form>
<div class="add_row">
<input type="text" name="product" placeholder="Enter product name">
<div class="value-button" id="decrease" onclick="decreaseValue()" value="Decrease Value">-</div>
<input type="number" id="number" value="0" />
<div class="value-button" id="increase" onclick="increaseValue()" value="Increase Value">+</div>
<div class="btn_row add_row_click"> <span> + </span> Add </div>
</div>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>