[英]how to generate dynamic input and get the value by id using jquery
實際上,我有一種表單,可以在輸入框中輸入name,html page name並將其保存到數據庫。 在這里我有一些問題
我能夠生成輸入框,但如何獲取該輸入框的值?
我如何知道如何發送靜態輸入框值請求多個,如何獲取在動態框中輸入的輸入框的動態值並將其發送到發布請求。
這是我的代碼
<div class="input_fields_wrap">
<button class="add_field_button">Add More Fields</button>
<div><input type="text" name="mytext[]"></div>
</div>
$(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><input type="text" name="mytext[]"/><a href="#" class="remove_field">Remove</a></div>'); //add input box
}
});
$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
e.preventDefault(); $(this).parent('div').remove(); x--;
})
});
我在上面變薄了,我可以生成動態輸入框並可以將其刪除,但無法獲取值,因此如何使用id生成並將所有動態生成的值發布到數據庫中
您可以像這樣使用jquery #map()
函數:
var list = wrapper.find('input').map(function() {
return $(this).val();
}).get();
當您想將值列表 提交給發送到服務器時-請參見下面的演示:
$(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><input type="text" name="mytext[]"/><a href="#" class="remove_field">Remove</a></div>'); //add input box } }); $(wrapper).on("click", ".remove_field", function(e) { //user click on remove text e.preventDefault(); $(this).parent('div').remove(); x--; }); /* ADDED THIS */ $('.submit').click(function() { var list = wrapper.find('input').map(function() { return $(this).val(); }).get(); // send to server here console.log(list); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="input_fields_wrap"> <button class="add_field_button">Add More Fields</button> <div><input type="text" name="mytext[]"></div> </div> <button class="submit">Submit</button>
是的,可以嘗試這樣的事情
var inputField = $('<div><input type="text" name="mytext[]"/><a href="#" class="remove_field">Remove</a></div>');
$(wrapper).append(inputField);
然后,您可以將事件附加到該變量。
inputField.on('change', 'input', function() {
var value = $(this).val();
console.log(value);
});
希望這對您有所幫助:)
另一種方法,在表單中添加以下按鈕:
<button class="getValue">Get Field Values</button>
在加載時在JS中添加以下按鈕單擊事件:
$(getValue).click(function (e) {
e.preventDefault();
let fieldValues = "";
$("input").each(function(i,e){
fieldValues = fieldValues == "" ? $(e).val() : fieldValues + ", " + $(e).val();
})
alert(fieldValues);
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.