如何解决如何使用jQuery获取输入字段的总和
这是我用于动态添加输入字段的脚本,在这一部分中,字段的最大值为10。
$(document).ready(function() {
var max_fields = 10;
var wrapper = $(".container1");
var add_button = $(".add_form_field");
var x = 1;
$(add_button).click(function(e) {
e.preventDefault();
if (x < max_fields) {
x++;
var form_colis = '<div><input type="text" placeholder="Poids" name="poids[]"/> <input type="text" placeholder="Longueur" name="longueurs[]"/> <input type="text" placeholder="Largeur" name="largeurs[]"/> <input type="text" placeholder="Hauteur" name="hauteurs[]"/><a href="#" class="delete">Delete</a></div>';
//$(wrapper).append('<div><input type="text" name="mytext[]"/><a href="#" class="delete">Delete</a></div>'); //add input Box
$(wrapper).append(form_colis); //add input Box
} else {
alert('You Reached the limits')
}
});
$(wrapper).on("click",".delete",function(e) {
e.preventDefault();
$(this).parent('div').remove();
x--;
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container1">
<button class="add_form_field">Add New Field
<span style="font-size:16px; font-weight:bold;">+ </span>
</button>
<div>
<input type="text" placeholder="Poids" name="poids[]">
<input type="text" placeholder="Longueur" name="longueurs[]">
<input type="text" placeholder="Largeur" name="largeurs[]">
<input type="text" placeholder="Hauteur" name="hauteurs[]">
</div>
</div>
现在,我想在以前的字段名称之和的功能中添加字段。例如。对于字段名称poids [],如果总和大于100,则用户无法添加字段集,否则,他可以。
我希望你明白我的意思。
先谢谢您
解决方法
这是将要计算的版本。我也使代码更短-请注意CSS的更改以及为div添加的类
我假设您只想测试poids> 100吗?
$(function() {
var max_fields = 10;
var $wrapper = $(".container1");
var add_button = $(".add_form_field");
$(add_button).click(function(e) {
e.preventDefault();
const vals = $("> .item input[name^=poids]",$wrapper).map(function() { return +this.value }).get()
const val = vals.length === 0 ? 0 : vals.reduce((a,b) => a + b);
if ($("> .item",$wrapper).length < max_fields && val < 100) {
const $form_colis = $(".item").first().clone();
$form_colis.find("input").val("");
$wrapper.append($form_colis); //add input box
} else {
alert('You Reached the limits')
}
});
$wrapper.on("click",".delete",function(e) {
e.preventDefault();
$(this).parent('div').remove();
})
});
.container1 .item:first-of-type .delete {
display: none;
}
.delete { text-decoration: none; color: red; }
.add_form_field { white-space: nowrap; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="add_form_field">Add New Field ✚</button>
<div class="container1">
<div class="item">
<input type="text" placeholder="Poids" name="poids[]">
<input type="text" placeholder="Longueur" name="longueurs[]">
<input type="text" placeholder="Largeur" name="largeurs[]">
<input type="text" placeholder="Hauteur" name="hauteurs[]">
<a href="#" class="delete">Delete</a>
</div>
</div>
,
如果我正确理解了您的问题,请检查由我修改的此解决方案。如果所有字段的总和恰好小于100,则添加新字段,否则不添加。有必要吗?
$(document).ready(function() {
var max_fields = 10;
var wrapper = $(".container1");
var add_button = $(".add_form_field");
var x = 1;
$(add_button).click(function(e) {
e.preventDefault();
$('.inputs:last-of-type').each(function(){
var sum_inputs = 0;
$(this).find('input').each(function(){
sum_inputs += parseInt($(this).val());
});
if (x < max_fields && sum_inputs < '100') {
x++;
var form_colis = '<div class="inputs"><input type="text" placeholder="Poids" name="poids[]"/> <input type="text" placeholder="Longueur" name="longueurs[]"/> <input type="text" placeholder="Largeur" name="largeurs[]"/> <input type="text" placeholder="Hauteur" name="hauteurs[]"/><a href="#" class="delete">Delete</a></div>';
//$(wrapper).append('<div><input type="text" name="mytext[]"/><a href="#" class="delete">Delete</a></div>'); //add input box
$(wrapper).append(form_colis); //add input box
} else {
alert('You Reached the limits')
}
});
});
$(wrapper).on("click",function(e) {
e.preventDefault();
$(this).parent('div').remove();
x--;
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container1">
<button class="add_form_field">Add New Field
<span style="font-size:16px; font-weight:bold;">+ </span>
</button>
<div class="inputs">
<input type="text" placeholder="Poids" name="poids[]">
<input type="text" placeholder="Longueur" name="longueurs[]">
<input type="text" placeholder="Largeur" name="largeurs[]">
<input type="text" placeholder="Hauteur" name="hauteurs[]">
</div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。