使用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" 

就是这样..我希望它有用。