[英]Adding/Removing Input Boxes with jQuery - Added Input Boxes Duplicating Values of First Input Boxes
[英]How to Grab input values of dynamically added input boxes using jquery
我試圖在點擊時添加動態字段,並希望獲取用戶鍵入的每個輸入框值。 這是我的工作代碼。 HTML代碼
<div class="input_fields_wrap">
<div><input type="text" name="mytext"> <button class="add_field_button">Add More Fields</button>
</div>
</div>
JS代碼
$(document).ready(function() {
var max_fields = 10; //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><tr><td><input type="text" name="textbox' + x + '" id="removeId' + x + '" value="' + x + '" ></td><td><button class="remove_field" >Remove</button><button class="save_field" >save</button></td></tr></div>'); //add input box
}
});
$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
e.preventDefault();
$(this).parent('div').remove();
x--;
})
$(wrapper).on("click",".save_field", function(e){ //user click on remove text
e.preventDefault();
//Here on click of each save button I wanna grab particular text box value that user types in
})
});
每次單擊添加更多字段時,我都會得到一個新的文本框以及“刪除並保存”按鈕,單擊“保存”按鈕后,我要獲取用戶鍵入的文本框值。
PFB代碼,希望對您有所幫助
$(document).ready(function() { var max_fields = 10; //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><tr><td><input type="text" name="textbox' + x + '" id="removeId' + x + '" value="' + x + '" ></td><td><button class="remove_field" >Remove</button><button class="save_field" >save</button></td></tr></div>'); //add input box } }); $(wrapper).on("click", ".remove_field", function(e) { //user click on remove text e.preventDefault(); $(this).parent('div').remove(); x--; }) $(wrapper).on("click", ".save_field", function(e) { //user click on remove text var inpVal = $(this).siblings('input').val(); alert('inp value is :' + inpVal); e.preventDefault(); //Here on click of each save button I wanna grab particular text box value that user types in }) });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="input_fields_wrap"> <div> <input type="text" name="mytext"> <button class="add_field_button">Add More Fields</button> </div> </div>
單擊的按鈕是必需的輸入標記的同級。 您可以將.siblings('input')
或.prevAll('input')
與.val()
一起作為輸入元素的目標,以獲取其值:
$(this).siblings('input').val();
處理器:
$(wrapper).on("click",".save_field", function(e){ //user click on remove text
e.preventDefault();
alert($(this).siblings('input').val());
//Here on click of each save button I wanna grab particular text box value that user types in
});
您可以將動態ID替換為您的文本框:
id="removeId'
同
id="removeId'+k
然后您可以使用
$("#id").val();
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.