Jquery序列化對於動態文本框獲得相同的值

Question

我正在使用以下代碼用複選框創建動態文本框。

function addNewModifier() 
    { 
     $('#modifiersList tr:last').after('<tr><td></td><td><form id="insertModifier"><input name="modifierName" id="modifierName" class="focused form-control" type="text"></input></td><td align="center"><span class="glyphicon glyphicon-folder-open" style = "cursor:pointer"></span></td><td><input name="status" id="status" type="checkbox"></input></td><td align="center"><span class="btn btn-primary" onclick="saveNewModifier()"><i class="icon-white fa-plus-circle fa fa-align-left"></i>Save</span></td><td><span class="btn btn-default" onclick="deleteNewSuperCategory(this)"><i class="icon-white fa-plus-circle fa fa-align-left"></i>Cancel</span></td></form></tr>'); 
    } 

通過使用上述功能我在一個表中添加新行，然後點擊保存按鈕，我需要的表單數據。

我的保存功能如下。

function saveNewModifier() 
    { 
     var groupName = $("#insertModifier").serialize(); 
     alert(groupName); 
    } 

上述saveNewModifier()功能只給文本框的值並且總是相同的。

請幫助我如何獲得複選框和文本框的價值總是不同的創建新行。

Answer 1

這裏是一個例子。這可能幫助你

function saveNewModifier() 
 
    { 
 
     var groupName = $("#insertModifier").serialize(); 
 
     var checkValue = $("#status").serialize(); 
 
     alert(groupName); 
 
     alert(checkValue); 
 
     
 
    } 
 
function addNewModifier() 
 
    { 
 
     $('#modifiersList tr:last').after('<tr><td></td><td><form id="insertModifier"><input name="modifierName" id="modifierName" class="focused form-control" type="text"></input></td><td align="center"><span class="glyphicon glyphicon-folder-open" style = "cursor:pointer"></span></td><td><input name="status" id="status" type="checkbox"></input></td><td align="center"><span class="btn btn-primary" id="btnSave"><i class="icon-white fa-plus-circle fa fa-align-left"></i>Save</span></td><td><span class="btn btn-default" onclick="deleteNewSuperCategory(this)"><i class="icon-white fa-plus-circle fa fa-align-left"></i>Cancel</span></td></form></tr>'); 
 
     $(this).serialize(); 
 
    } 
 

 

 
addNewModifier(); 
 

 
$(document).ready(function(){ 
 
    $("#btnSave").on('click', function() { 
 
     saveNewModifier(); 
 
    }); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> 
 
<table id="modifiersList"> 
 
    <tr><td>Dummy Data</td></tr> 
 
</table>

這是你的問題的精確解click here

function saveNewModifier() 
    { 
     var groupName = $("#insertModifier").serialize(); 
     var checkValue = $("#status").serialize(); 
     alert(groupName); 
     alert(checkValue); 

    }; 

function addNewModifier() 
    { 
$('#modifiersList tr:last').after('<tr><td></td><td><form id="insertModifier"><input name="modifierName" id="modifierName" class="focused form-control" type="text"></input></td><td align="center"><span class="glyphicon glyphicon-folder-open" style = "cursor:pointer"></span></td><td><input name="status" id="status" type="checkbox"></input></td><td align="center"><span class="btn btn-primary" id="btnSave"><i class="icon-white fa-plus-circle fa fa-align-left"></i>Save</span></td><td><span class="btn btn-default" onclick="deleteNewSuperCategory(this)"><i class="icon-white fa-plus-circle fa fa-align-left"></i>Cancel</span></td></form></tr>'); 
    }; 



$(document).ready(function(){ 
    $("body").on('click', '#btnSave', function() { 
     saveNewModifier(); 
    }); 
}); 

---

<table id="modifiersList"> 
    <tr><td onclick="addNewModifier();">add new html</td></tr> 
</table>