使用jquery隱藏表單元素而不提交？

Question

我有一個包含一些動態元素的表單。這些基本上都是文本輸入框，其中將包含帶有按鈕的電話號碼，以便刪除該元素。 另一個按鈕添加一個新元素，最後一個將其保存到數據庫。 我想要做的是「標記」已更改，已刪除或新號碼的號碼。 因此，我可以在數據庫上進行更新，插入或刪除操作，因爲我不想刪除所有數據，並且每次都在數據庫中插入所有數據。

delDisaNumber是不是我想要的...我想隱藏的元素，所以我可以標記爲刪除。但是這樣做會使表單看起來像表單被提交。另一方面，使用.remove可見地表現出我想要的樣子，但完全刪除了不是我想要的元素（我希望隱藏它）。

以下是迄今爲止有關的代碼。 （這是寫在jQuery和PHP使用kohana）

<script type="text/javascript"> 
    var disaId = 1; 

    function setModified(element){ 
    $(element).attr('name', 'update'); 
    } 

    function delDisaNumber(element){ 
     $(element).prev('name','delete'); 
     $(element).parent().remove(); /* has the effect I want, but removes the element */ 
     // $(element).parent().hide() /* this is what I want but submits the form */ 
    } 

    function addDisaNumber(){ 
     $("#disa_numbers").append('<li id="disa_num"'+disaId+'><input /><button onClick="delDisaNumber">X</button></li>'); 
    $disaId++; 
    } 
    </script> 

    ... 

<div id="disa"> 
    <?php 
    echo form::open("edit/saveDisaNumbers/".$phone, array("class"=>"section", "id"=>"other")); 
    echo form::open_fieldset(array("class"=>"balanced-grid")); 
    ?> 
    <ul class="fields" id="disa_numbers"> 
    <?php 
     $disaId = 1; 
     foreach ($disa_numbers as $disa_number){ 
      $disaid_name = 'disa_num'.$disaId; 
      echo '<li id="'.$disaid_name.'">'; 
      echo form::input("disa".$disaId, $disa_number->cid_in, "onKeyDown='setModified(this)'"); 
      echo form::button("",'X','onClick="delDisaNumber(this)" class="button image"'); 
      echo "</li>"; 
      $disaId++; 
     } 
    ?> 
    </ul> 
    <button type="button" onclick="addDisaNumber()">Add another number</button> 
    <?php 
     echo form::submit('submit', 'Save'); 
     echo form::close(); 
    ?> 
</div> 

編輯：似乎表單::按鈕不按預期行事。如果我用echo'X'替換它，它不會發布表單。

Answer 1

我的建議是，不要更改名稱，而是添加一個類似「修改」的類。然後只提交那些。

$("form").submit(function() { 
    $("input:not(.modified)").attr("disabled", true); 
}); 

這是如何工作的：禁用的輸入元素未提交給服務器。

Answer 2

內delDisaNumber

$(element).parent().css("visibility", "hidden"); 

Answer 3

我覺得有幾個方法可以解決你的問題。

這一個可能會更快，更優雅一點。您需要創建一組操作，然後通過AJAX將其提交給服務器。讓我解釋一下：

假設你的「手機」字段是與類「手機」和包裝的DIV與「ID」： 例如:(該ID可以是你的數據庫的ID或手機的前綴（如如果你願意的話，你可以先將它們添加到一個數組中，然後分配一個臨時ID，這樣你就可以在最後驗證這些變化了）。

<div id="p_18003526445"> 
    <input type="text" class="phone" value="1800-3526-445" /> 
    <button class="del">Delete</button> 
</div> 
... 
<button id="add">Add More...</button> 
<button id="save">Save Changes</button> 

現在JQuery的：

var phones = new Array(); 
var new_id = 0; //keep track of added ids 
$(window).load(function() { 
    $("input.phone").change(function() { 
     //you could check here if the phone id is the same as the val... (and skip) 
     phones[$(this).parent().attr("id")] = $(this).val();    
    }); 
    $("button.del").click(function() { 
     var id = $(this).parent().attr("id"); 
     $(this).prev("input.phone").val("deleted"); //setting to "deleted" 
     $("#"+id).hide(); //hide the DIV (input + button) 
    }); 
    $("#add").click(function() { 
     new_id++; 
     $("#main").append("<div id='n_"+new_id+"'> 
      <input type='text' class='phone' /> 
      <button class='del'>Delete</button> 
     </div>"); 
    }); 
    $("#save").click(function() { 
     $.post("save.php",{ phones : $.toJSON(phones) }, 
      function(reply, status){ 
        if(status == "success" && reply == "OK") { 
         alert("UPDATED!"); 
        } else { 
         alert("ERROR: Try again"); 
        } 
      } 
     ); 
    }); 
}); 

現在，在你 「save.php」，您將需要執行類似：

<?php 
    $import = json_decode($_POST["phones"]); 
    if($import) { 
    $phones = array(); 
    foreach($import as $i => $p) { 
     $phones[$i] = $p; 
    } 
    } 
    //print_r($phones); 
    ... 
    echo "OK"; //Tell JQuery everything went fine! 
?> 

在你PHP，你將有一個數組現在用ID和行動去做。如果該操作被「刪除」，則繼續刪除它（記住該ID將爲p _ #####），如果該數字是一個數字，則更新並且如果該ID以「n_」開始，則其爲新數字。其他方法是創建3個數組，分別用於更新，一個用於刪除，另一個用於插入並分別發送。但我決定爲了簡單而這樣做。另外，您可以在發送清單之前執行一些檢查。

您不需要「表單」標籤，也不需要標籤內的JavaScript操作。 如果您想完全兼容（JQuery - > PHP），我建議您使用JSON Jquery plugin。

此代碼未經測試和未完成，它只是這個想法......您需要實現它。如果你想要的話，你可以添加一些JQuery UI對話框來顯示「Please wait ...」，同時將表單發送到服務器。

如果你想保持你的方法去，你可以隨時更改輸入類型：

$("#disa_num input").attr("type","hidden"); 

和其他輸入「潛伏」着的行動，或預先準備追加到形式向價值 的動作的標識如：

var oldvalue = $("#disa_num input").val(); 
$("#disa_num input").val("d-"+oldvalue); //prepend "d-" to identify it as "deleted" 

就是這樣..我希望它有用。