TypeError: form is undefined

Question

Why do i get error -

TypeError: form is undefined[Learn More]

when i submit the form?

What do i need to change?

$(document).on("click", ".edit_save-btn", function(e) {

  var element = $(this);

  var form = $(this).closest('form')[0];
  for (i = 0; i < form.elements.length; i++) {
    if (form.elements[i].type == 'file') {
      if (form.elements[i].value == '') {
        form.elements[i].parentNode.removeChild(form.elements[i]);
      }
    }
  }

var formData = new FormData(form);
var act = "edit";
formData.push({name: 'act', value: 'edit'});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action='#' method='post' enctype='multipart/form-data'>
  <tr id="4" class="fadeSec item">
    <td class="item_logo"><input name="file[]" type="file"></td>
    <td class="item_name"><input name="agnt[name]" value="Agency 2" type="text"><span>*</span></td>
    <td class="item_mainEmail"><input name="agnt[mainEmail]" value="email@gmail.com" type="text"></td>
    <td class="item_contact"><textarea type="text" name="agnt[contact]">some details</textarea></td>
    <td class="panel-menu">
      <div class="edit_msg"></div>

      <i class="fa fa-refresh fa-spin fa-2x fa-fw edit_form-loader"></i>
      <a href="#" class="btn btn-success edit_save-btn">Save</a>

    </td>
  </tr>
</form>

................ ............. ................. ......................

Answer 1

You issue may be stemming from the fact that you have invalid html.

<form action='#' method='post' enctype='multipart/form-data'>
  <tr id="4" class="fadeSec item">
    <td class="item_logo"><input name="file[]" type="file"></td>
    <td class="item_name"><input name="agnt[name]" value="Agency 2" type="text"><span>*</span></td>
    <td class="item_mainEmail"><input name="agnt[mainEmail]" value="email@gmail.com" type="text"></td>
    <td class="item_contact"><textarea type="text" name="agnt[contact]">some details</textarea></td>
    <td class="panel-menu">
      <div class="edit_msg"></div>

      <i class="fa fa-refresh fa-spin fa-2x fa-fw edit_form-loader"></i>
      <a href="#" class="btn btn-success edit_save-btn">Save</a>

    </td>
  </tr>
</form>

tr elements are table rows. HTML expects them to be children of a table or a table child's child. They are not loose elements like others. They must belong to a table. So it may be the case that your browser is trying to "fix" your markup by closing the form before the table data. So then when you try to do $(this).closest('form') it would not find the form, because the button is not a child of the form. To fix this, try fixing your markup.

<form action='#' method='post' enctype='multipart/form-data'>
  <table>
    <tr id="4" class="fadeSec item">
      <td class="item_logo"><input name="file[]" type="file"></td>
      <td class="item_name"><input name="agnt[name]" value="Agency 2" type="text"><span>*</span></td>
      <td class="item_mainEmail"><input name="agnt[mainEmail]" value="email@gmail.com" type="text"></td>
      <td class="item_contact"><textarea type="text" name="agnt[contact]">some details</textarea></td>
      <td class="panel-menu">
        <div class="edit_msg"></div>

        <i class="fa fa-refresh fa-spin fa-2x fa-fw edit_form-loader"></i>
        <a href="#" class="btn btn-success edit_save-btn">Save</a>

      </td>
    </tr>
  </table>
</form>

Put the tr in a table.

Also, rather than going up to the form, you could try going to the table row and find the input elements off of that element, rather than the form.

$(document).on("click", ".edit_save-btn", function(e) {
  //go from the button, up to the row, then find the children file inputs
  $(this).closest('tr').find('[type=file]').each(function(index, fileInput){
    //remove the file input if it does not have a value set
    if (fileInput.value == '') $(fileInput).remove();
  });
});