如何獲取動態創建的表單的值？

Question

這裏是我的代碼中動態生成的3以下的表格。

<form id="abc"> 
    <input id="link" value ="aa">name 
    <button type="submit">Submit</button> 
</form> 
<form id="abc"> 
    <input id="link" value ="bb">name 
<button type="submit">Submit</button> 
</form> 
<form id="abc"> 
    <input id="link" value ="cc">name 
<button type="submit">Submit</button> 
</form> 

在js我試圖獲取被點擊的表單的輸入值。

$(document).ready(function() { 
    $('#abc').submit(function (e) { 
    var bla = $('#link').val(); 
    alert(bla);  
    e.preventDefault(); 
    }); 
}); 

但無論形式我提交我總是有第一次的形式輸入值。我知道我在做這件事，你能解釋我怎樣才能獲得當前提交的表格的輸入值。

Answer 1

id應始終是唯一的。在你的情況下使用class作爲共同選

這裏有

HTML

ID替換類的更改使用類選擇

<form class="abc"> 
    <input class="link" value="aa">name 
    <button type="submit">Submit</button> 
</form> 
<form class="abc"> 
    <input class="link" value="bb">name 
    <button type="submit">Submit</button> 
</form> 
<form class="abc"> 
    <input class="link" value="cc">name 
    <button type="submit">Submit</button> 
</form> 

JS

& jQuery的find方法找到一個input帶班link

$(document).ready(function() { 
    $('.abc').submit(function(e) { 
    e.preventDefault(); 
    var bla = $(this).find('input.link').val(); 
    alert(bla); 

    }); 
}); 

DEMO

Answer 2

HTML id s應該只用於每個元素。對於多個元素，您應該使用class屬性，該屬性可以使用$（'。abc'）在jQuery中進行選擇。

HTML：

<form class="abc"> 
    <input id="link" value ="aa">name 
    <button type="submit">Submit</button> 
</form> 
<form class="abc"> 
    <input id="link" value ="bb">name 
    <button type="submit">Submit</button> 
</form> 
<form class="abc"> 
    <input id="link" value ="cc">name 
    <button type="submit">Submit</button> 
</form> 

的JavaScript：

$(document).ready(function() { 
    $('.abc').submit(function (e) { 
    var bla = $('#link').val(); 
    alert(bla); 
    e.preventDefault(); 
    }); 
}); 

Answer 3

在處理動態創建表單元素，結合其事件而採取document的來龍去脈即$(document).on("event_name", 'dynamic_element', function(){ ... });

所以，下面的代碼應工作在你的情況。

$(document).on("submit", 'form.abc', function(){ 
    ... // you can get the form elements value here. 
    var bla = $(this).find('.link').val(); 
    alert(bla);  
    e.preventDefault(); 
}); 

注：避免使用相同ID的多個元素，使用class ES代替。

Answer 4

元素的documentid應該是唯一的。替換.className重複.id在<form>，<input>元素。使用事件代表附加submit事件form元素.className​​;使用jQuery()與".link"選擇器和context在事件處理程序中設置爲this，鏈.val()獲得當前<input>元件的.value。

// dynamic `html` 
 
var html = `<form class="abc"> 
 
    <input class="link" value ="aa">name 
 
    <button type="submit">Submit</button> 
 
</form> 
 
<form class="abc"> 
 
    <input class="link" value ="bb">name 
 
    <button type="submit">Submit</button> 
 
</form> 
 
<form class="abc"> 
 
    <input class="link" value ="cc">name 
 
    <button type="submit">Submit</button> 
 
</form>`; 
 

 
$(document).ready(function() { 
 
    $(document).on("submit", ".abc", function (e) { 
 
    var bla = $(".link", this).val(); 
 
    alert(bla);  
 
    e.preventDefault(); 
 
    }); 
 
    $("body").append(html); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 5

你可以嘗試$（ 「形式」）提交事件來處理這個

$(document).ready(function() { 
    $("form").submit(function(e) { 
    var bla = $(this).find('#link').val(); 
    alert(bla);  
    e.preventDefault(); 
    }); 
}); 

這裏是工作示例： https://jsfiddle.net/e7r14p3t/