如何生成動態輸入並使用jquery獲取id的值

其實我有一個表單，我在輸入框中輸入名稱，html頁面名稱並將其保存到數據庫中。在這裏我得到了一些問題如何生成動態輸入並使用jquery獲取id的值

我能夠生成輸入框，但如何獲得該輸入框的值？
如何獲得在動態框中輸入的輸入框的動態值並將其發送到發佈請求，因爲我知道如何發送多個靜態輸入框值請求，我們如何發送它。

這裏是什麼下面是我的代碼

<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生成和動態發佈所有到數據庫

來源

2017-09-01 TechieBoy

你能告訴我們你是如何獲得價值的嗎？如果你不顯示我們，很難說出了什麼問題...... – Salketer

產生的數值您可以使用jQuery的功能是這樣的：

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>

來源

2017-09-01 13:19:37 kukkuz

是啊，可以嘗試這樣的事情

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); 
});

希望這有助於你:)

來源

2017-09-01 13:19:38

另一種方法，添加以下按鈕形式：

<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); 
});

來源

2017-09-01 13:29:59

如何生成動態輸入並使用jquery獲取id的值

回答

相關問題