Question

I have a form containing some dynamic elements. These are basically text input boxes that will contain phone numbers with a button to the right to delete the element.
Another button adds a new element and the final one to save it to the database.
What I’m wanting to do is to “mark” numbers that have changed, been removed or new numbers.
So that I can do a update, insert or delete on the database as I don’t want to delete all and insert all each time in the database.

The delDisaNumber isn’t quite what I want… I want to hide the element so I can mark it as deleted. But doing so makes it appear like the form gets submitted. On the other hand, using .remove visibly behaves how I want it to, but removes the element completely which is not what I want (I want it hidden).

Here is the code in question so far. (this is written in jquery and php using 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>

EDIT: It seems that form::button isn’t behaving as expected. If I replace it with echo ‘X’ it doesn’t post the form.

Answer 1

My suggestion is that instead of changing the name, add a class like “modified”. And then submit only those.

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

How this works is that disabled input elements aren’t submitted to the server.