Question

我为什么会出错-

TypeError: form is undefined[Learn More]

我何时提交表格？

我需要更改什么？

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

您的问题可能源于您的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元素是表格行。 HTML希望它们是表的孩子或表孩子的孩子。它们不是像其他元素那样松散的元素。它们必须属于一个表。因此，可能是您的浏览器试图通过关闭表格数据之前的表单来“修复”您的标记的情况。因此，当您尝试执行$(this).closest('form')时，它将找不到该表单，因为该按钮不是该表单的子级。要解决此问题，请尝试修复标记。

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

将tr放在表格中。

此外，您可以尝试转到表格行并从该元素而不是表单中查找输入元素，而不是直接转到表格。

$(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();
  });
});

Answer 2

我添加了一个“}）;”如果您希望删除“输入类型文件”，则可以在scrit的末尾使用，并且它可以与HTML一起使用（我没有对其进行修改）。

$(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]);
            }
        }
    }
    });

完整代码：

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Titre de la page</title>
  <!-- Latest compiled and minified CSS -->
<body>

<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>
</body>

<!-- Latest compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script>
$(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]);
            }
        }
    }
    });
</script>
</html>

据我所知，如果要删除提交的“ <td class="item_logo"><input name="file[]" type="file"></td>”，则应在表单上输入一个ID并执行

$('#idForm').submit(function() {
    //do something...
});

TypeError：表单未定义

2 个答案: