counter是在单击add字段时递增值,而不是在单击remove字段时递减值
counter is increment the value when click on add field but not decrements when click on remove field
单击"添加字段"按钮时,顶部的文本字段显示增量,这是正确的,但当我单击"删除字段"按钮后,值显示的是增量而不是递减。
<div id="awaien">
<input type="text" value="1" name="cntr" />
</div>
<div class="input_fields_wrap">
<div class="form-group">
<label>Email</label>
<button class="add_field_button">Add More Fields</button>
<p>
<input type="text" class="form-control" name="Email" value="<?php echo htmlspecialchars($team->email);?>" />
</p>
</div>
</div>
脚本
$(document).ready(function() {
var scntDiv = $('input_fields_wrap');
var i = $('#input_fields_wrap p').size() + 1;
var max_fields = 20; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID
var x = 1; //initlal text box count
$(add_button).click(function(e) { //on add input button click
e.preventDefault();
if(x < max_fields) { //max input box allowed
x++; //text box increment
$(wrapper).append('<div><input type="text" name="Email' + i +'"/><a href="#" class="remove_field">Remove</a></div>'); //add input box
i++;
}
});
$(wrapper).on("click",".remove_field", function(e) { //user click on remove text
e.preventDefault();
$(this).parent('div').remove();
i--;
x--;
})
});
$(document).ready(function() {
$(".input_fields_wrap").on('click',function(){
$("#awaien input").val(parseInt($("#awaien input").val()) + 1);
});
$(".remove_field").on('click',function(){
$("#awaien input").val(parseInt($("#awaien input").val()) - 1);
});
});
我们如何解决这个问题,以便当我单击删除字段按钮时,它应该递减?
您的代码中有一些错误,有些逻辑非常奇怪,但我已经尽力纠正:
$(document).ready(function() {
var scntDiv = $('input_fields_wrap');
var i = $('#input_fields_wrap p').size() + 1;
var max_fields = 20; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID
var x = 1; //initlal text box count
$(add_button).click(function(e) { //on add input button click
e.preventDefault();
if(x < max_fields) { //max input box allowed
x++; //text box increment
$(wrapper).append('<div><input type="text" name="Email' + i +'"/><a href="#" class="remove_field">Remove</a></div>'); //add input box
i++;
}
});
$(wrapper).on("click",".remove_field", function(e) { //user click on remove text
e.preventDefault();
$(this).parent('div').remove();
$("#awaien input").val(parseInt($("#awaien input").val()) - 1);
i--;
x--;
});
$(".add_field_button").on('click',function(){
$("#awaien input").val(parseInt($("#awaien input").val()) + 1);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="awaien">
<input type="text" value="1" name="cntr" />
</div>
<div class="input_fields_wrap">
<div class="form-group">
<label>Email</label>
<button class="add_field_button">Add More Fields</button>
<p>
<input type="text" class="form-control" name="Email" value="<?php echo htmlspecialchars($team->email);?>" />
</p>
</div>
</div>
您正在执行此部分
$(".remove_field").on('click',function(){
$("#awaien input").val(parseInt($("#awaien input").val()) - 1);
});
文档外侧已准备好。这意味着按钮还不存在,因此不会连接把手。更改
$(document).ready(function() {
$(".input_fields_wrap").on('click',function(){
$("#awaien input").val(parseInt($("#awaien input").val()) + 1);
});
$(".remove_field").on('click',function(){
$("#awaien input").val(parseInt($("#awaien input").val()) - 1);
});
至
$(document).ready(function() {
$(".input_fields_wrap").on('click',function(){
$("#awaien input").val(parseInt($("#awaien input").val()) + 1);
$(".remove_field").on('click',function(){
$("#awaien input").val(parseInt($("#awaien input").val()) - 1);
});
});
相关文章:
- 通过单击动态加载的表中同一行的另一个字段来更新一行的字段
- 单击鼠标,用MySQL数据填充html表单输入字段
- 单击带有按钮的字段的复制值
- 使用javascript提交表单并从字段/单选框/复选框/文本区域获取数据
- 防止在输入字段上单击事件
- 如何在单击时从输入字段中删除最后一个字符
- 当用户单击按钮(在光标位置)时,在输入字段中添加一个文本字符串
- 如何在操作前验证必填字段单击review.save
- 如何用数据库中的值填充输入文本字段 单击复选框
- 验证“取消”上的字段 单击Onbeforeunload事件JQUERY
- 复选框在字段单击时自动检查
- 如何复制一个html表单字段值到另一个字段点击使用javascript
- 在标记上填充文本字段单击
- Wordpress自定义字段单选按钮无法选中
- 当“喜欢”时,使用ajax异步更新mysql字段;点击
- 如何使用socket.io判断哪个套接字连接单击了按钮?
- 启用和禁用输入字段点击(不切换)
- JavaScript添加新的输入字段点击
- 如何启用其他文本字段单击文本字段
- 当输入类型="0"时;图像";,onclick操作是通过从另一个输入字段中点击回车来触发的