如何重新填充表單提交使用jQuery隱藏的CSV字段

 
<form> 

    <input type="checkbox" id="01" name="01" /> 
    <input type="checkbox" id="02" name="02" /> 
    <input type="checkbox" id="03" name="03" /> 

    <input type="hidden" value="03,01," /> 

</form>

我有上面的表格;使用下面的代碼在頁面完成加載時勾選複選框01和03。如何重新填充表單提交使用jQuery隱藏的CSV字段

我現在需要確保當複選框的值發生變化時，隱藏的CSV字段也會發生變化（儘管當表單提交時可能會這樣做）。我認爲使用創建的變量，應該可以在表單提交時重新填充CSV字段。即使用selected_ids將複選框的id添加到CSV的末尾（如果它們尚不存在）。這可以做到嗎？

var csvValue = $('#csv-input').val(); 
var selected_ids = csvValue.split(','); 
for (var i = 0; i < selected_ids.length; i++) 
{ 
    var selected_id = selected_ids[i]; 
    $('#' + selected_id).attr('checked', 'checked'); 
}

一些善良的人給了我這個代碼在我剛纔的問題：

 
$(':checkbox').bind('change', function(event){ 
    if (this.checked == true){ 
     // add to hidden field 
     var tempIdStr = $('#cvs-input').val(); 
     // if not in hidden value already 
     if (tempIdStr.indexOf(this.id) > -1){ 
      tempIdStr += "id,"; // or ", id" depending on how you are seperating the ids 
     $('#cvs-input').val(tempIdStr); 
     } 
    } else { 
    // remove from hidden field 
     var tempIds = $('#cvs-input').val().split(','); 
     var index = tempIds.indexOf(this.id); 
     if (index > -1){ 
      tempIds.splice(index, 1); 
      $('#cvs-input').val(tempIds.join(','); 
    } 
});

我認爲這是接近，但還沒有應用。任何進一步的幫助將是非常好的，在此先感謝。

來源

2010-11-25 CherryFlavourPez

請記住，以數字開頭的ID無效並可能導致問題。 – RoToRa 2010-11-25 11:59:20

你可以建立從元素屬性簡明使用.map一個CSV：

$(":checkbox").change(function() { 
    var csv = $(":checkbox:checked").map(function() { 
     return this.id; 
    }).get().join(","); 
    alert(csv); 
    $("input:hidden").val(csv); 
});

演示：http://jsfiddle.net/karim79/tqAnX/2/

作爲一個側面說明，元素ID不應該以數字開始。

來源

2010-11-25 11:15:34 karim79

+1 - 需要注意的是，ID號限制是HTML4特有的，而不是HTML5 :) – 2010-11-25 11:29:12

如何重新填充表單提交使用jQuery隱藏的CSV字段

回答

相關問題