Question

我有一个包含一些动态元素的表单。这些基本上是文本输入框，其中包含电话号码，右侧有一个按钮可删除该元素。另一个按钮添加一个新元素，最后一个按钮将其保存到数据库中。我想要做的是“标记”已更改，已删除或新数字的数字。这样我就可以在数据库上进行更新，插入或删除，因为我不想删除所有内容并在数据库中每次都插入。

delDisaNumber不是我想要的......我想要隐藏元素，以便将其标记为已删除。但这样做会使表单看起来像提交。另一方面，使用.remove可视地表现我想要的方式，但完全删除了我想要的元素（我希望它隐藏）。

到目前为止，这是有问题的代码。（这是使用kohana在jquery和php中编写的）

<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>

编辑：似乎form :: button的行为不符合预期。如果我用echo'X'替换它，它不会发布表单。

Answer 1

我的建议是，不要更改名称，而是添加类似“已修改”的类。然后只提交那些。

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

这是如何工作的，禁用的输入元素不会提交给服务器。

Answer 2

在delDisaNumber里面

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

Answer 3

我认为有几种方法可以解决您的问题。

这个可能更快，更优雅。您需要创建一系列操作，然后通过AJAX将它们提交给服务器。让我解释一下：

假设您的“电话”字段包含“phone”类和带有“id”的包装DIV：示例：（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个数组，其中一个用于更新，一个用于删除，一个用于插入并分别发送。但为了简单起见，我决定这样做。此外，您可以在发送列表之前执行一些检查。

您不再需要“form”标记，也不需要标记内的javascript操作。如果你想完全兼容（JQuery - ＆gt; 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"

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

使用jquery隐藏表单元素而不提交？

3 个答案: