フォームの入力テキスト フィールドを追加または削除するために、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>
私が混乱しているのは、ブラウザでページを見るときの理由です。
画像の追加ボタンで 2 つのテキスト フィールドが表示されますが、追加ボタンをクリックすると、追加ボタンと削除ボタンで新しい行を取得する代わりに非表示になります。
誰かがこれについて私に教えてもらえますか?