在 jquery 和 PHP 中添加或删除输入字段
add or remove input fields in jquery and php
我一直在尝试让一个函数与JQuery一起工作来添加或删除表单输入文本字段。我一直在使用我找到的一个例子作为起点。
这是我到目前为止所拥有的。，
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org /TR/xhtml1/DTD/xhtml`enter code here`1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
function valid_to(txt1id) {
var toval = document.getElementById(txt1id).value;
if(toval == "") {
alert("Text Field1 is Empty");
document.getElementById(txt1id).focus();
return false;
}
}
function calc_from(txt2id) {
if(document.getElementById(txt2id).value == "") {
alert("Text Field2 is Empty");
document.getElementById(txt2id).focus();
return false;
}
}
</script>
<script type="text/javascript">
$(document).ready(function(){
var max = 10, append_data, tabindex = 23;
/*If the add icon was clicked*/
$(".add").live('click',function(){
var divid = parseInt(document.getElementById("txt_rowcnt").value)+parseInt(1);
var id = parseInt(document.getElementById("txt_rowcnt").value)+parseInt(1);
if($("div[id^='txt_']").length <10){ //Don't add new textbox if max limit exceed
$(this).remove(); //remove the add icon from current text box
var tabindex2 = parseInt(tabindex)+1;
var append_data = '<div id="txt_'+divid+'" class="txt_div" style="display:none;"><div class="left"><input type="text" id="txt1_'+id+'" name="txt1_'+id+'" class="medium_input" dir="rtl" style="width:94px;" readonly="true" tabindex="'+tabindex+'" onblur="valid_to(this.id);"/><input type="text" id="txt2_'+id+'" name="txt2'+id+'" class="medium_input" dir="rtl" style="width:94px;" maxlength="5" tabindex="'+tabindex2+'" onblur="calc_from(this.id);"/></div><span class="right" style="float: left; margin-left: 7px; margin-top: 7px;"><img src="add.png" class="add"/> <img src="remove.png" class="remove"/></span></div>';
$("#text_boxes").append(append_data); //append new text box in main div
$("#txt_"+divid).effect("bounce", { times:3 }, 300); //display block appended text box with silde down
divid++;
id = parseInt(id)+1;
tabindex = parseInt(tabindex)+2;
} else {
alert("Maximum 100 textboxes are allowed");
}
document.getElementById("txt_rowcnt").value=parseInt(divid)-parseInt(1);
})
/*If remove icon was clicked*/
$(".remove").live('click',function(){
var prev_obj = $(this).parents().eq(1).prev().attr('id'); //previous div id of this text box
$(this).parents().eq(1).slideUp('medium',function() { $(this).remove(); //remove this text box with slide up
if($("div[id^='txt_']").length > 1){
append_data = '<img src="remove.png" class="remove"/>'; //Add remove icon if number of text boxes are greater than 1
}else{
append_data = '';
}
if($(".add").length < 1){
$("#"+prev_obj+" .right").html('<img src="add.png" class="add"/> '+append_data);
document.getElementById("txt_rowcnt").value=parseInt(document.getElementById("txt_rowcnt").value)-parseInt(1);
}
});
})
});
</script>
</head>
<body>
<form method="post" action="" enctype="multipart/form-data" >
<table>
<tr>
<td> Textboxes </td>
</tr>
<tr>
<td>
<div id="text_boxes">
<div id="txt_1" class="txt_div">
<div class="left">
<input type="text" name="txt1_1" id="txt1_1" tabindex="21" onblur="valid_to(this.id);" />
<input type="text" name="txt2_1" id="txt2_1" tabindex="22" onblur="calc_from(this.id);"/>
<span class="right" style="margin-top:7px;"> <img src="add.png" class="add"/> </span>
</div>
</div>
</div>
</td>
</tr>
<input type="hidden" name="txt_rowcnt" id="txt_rowcnt" value="1" />
</table>
</form>
</body>
</html>
我感到困惑的是，当我在浏览器中查看页面时，为什么。
我可以看到两个带有添加图像按钮的文本字段，但是当我单击添加按钮时，它会隐藏起来，而是使用添加和删除按钮获取新行。
有人可以启发我吗？
试试这个：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org /TR/xhtml1/DTD/xhtml`enter code here`1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript" src="jquery1.9.1.js"></script>
</head>
<script type="text/javascript">
function valid_to(txt1id) {
var toval = document.getElementById(txt1id).value;
if(toval == "") {
alert("Text Field1 is Empty");
document.getElementById(txt1id).focus();
return false;
}
}
function calc_from(txt2id) {
if(document.getElementById(txt2id).value == "") {
alert("Text Field2 is Empty");
document.getElementById(txt2id).focus();
return false;
}
}
</script>
<script type="text/javascript">
$(document).ready(function(){
var max = 10, append_data, tabindex = 23;
/*If the add icon was clicked*/
$(".add").click(function(){
alert('test');
var divid = parseInt(document.getElementById("txt_rowcnt").value)+parseInt(1);
var id = parseInt(document.getElementById("txt_rowcnt").value)+parseInt(1);
if($("div[id^='txt_']").length <10){ //Don't add new textbox if max limit exceed
$(this).remove(); //remove the add icon from current text box
var tabindex2 = parseInt(tabindex)+1;
var append_data = '<div id="txt_'+divid+'" class="txt_div" style="display:block;"><div class="left"><input type="text" id="txt1_'+id+'" name="txt1_'+id+'" class="medium_input" dir="rtl" style="width:94px;" readonly="true" tabindex="'+tabindex+'" onblur="valid_to(this.id);"/><input type="text" id="txt2_'+id+'" name="txt2'+id+'" class="medium_input" dir="rtl" style="width:94px;" maxlength="5" tabindex="'+tabindex2+'" onblur="calc_from(this.id);"/></div><span class="right" style="float: left; margin-left: 7px; margin-top: 7px;"><img src="add.png" class="add"/> <img src="remove.png" class="remove"/></span></div>';
$("#text_boxes").append(append_data); //append new text box in main div
//$("#txt_"+divid).effect("bounce", { times:3 }, 300); //display block appended text box with silde down
divid++;
id = parseInt(id)+1;
tabindex = parseInt(tabindex)+2;
} else {
alert("Maximum 100 textboxes are allowed");
}
document.getElementById("txt_rowcnt").value=parseInt(divid)-parseInt(1);
})
/*If remove icon was clicked*/
$(".remove").click(function(){
var prev_obj = $(this).parents().eq(1).prev().attr('id'); //previous div id of this text box
$(this).parents().eq(1).slideUp('medium',function() { $(this).remove(); //remove this text box with slide up
if($("div[id^='txt_']").length > 1){
append_data = '<img src="remove.png" class="remove"/>'; //Add remove icon if number of text boxes are greater than 1
}else{
append_data = '';
}
if($(".add").length < 1){
$("#"+prev_obj+" .right").html('<img src="add.png" class="add"/> '+append_data);
document.getElementById("txt_rowcnt").value=parseInt(document.getElementById("txt_rowcnt").value)-parseInt(1);
}
});
})
});
</script>
<body>
<form method="post" action="" enctype="multipart/form-data" >
<table> <tr>
<td> Textboxes </td> </tr>
<tr> <td> <div id="text_boxes">
<div id="txt_1" class="txt_div">
<div class="left">
<input type="text" name="txt1_1" id="txt1_1" tabindex="21" onblur="valid_to(this.id);" />
<input type="text" name="txt2_1" id="txt2_1" tabindex="22" onblur="calc_from(this.id);"/>
<span class="right" style="margin-top:7px;"> <img src="add.png" alt="add" class="add"/> </span>
</div> </div> </div> </td>
</tr>
<input type="hidden" name="txt_rowcnt" id="txt_rowcnt" value="1" />
</table>
</form>
</body>
</html>
相关文章：
- React 15使用空字符串删除输入值
- 删除输入中输入的符号
- 使用jquery删除输入框上的外部处理程序/库
- 附加和删除输入值的一部分
- 根据下拉选择向表单添加和删除输入标记
- 尝试擦除时删除输入中的零
- 当按键不匹配时删除输入字符
- AngularJS自定义过滤器调用了两次，并在第二次调用时删除输入数据
- 检测用户是否没有't输入任何内容/删除输入jQuery
- React.js引导添加或删除输入字段
- 删除输入jquery中的值时清除所有更改
- 类似开关的按钮可以创建和删除输入框
- 按下“Enter”键时删除输入框中的文本
- 输入时，正在删除输入框文本
- 如何删除输入类型文本
- 从打印预览中删除输入框
- 在表单中添加/删除输入
- 删除输入的最后一个值
- 修剪标签上的空白区域，而不删除<输入>内部
- JQuery 验证代码不允许删除输入的文本
