javascript - jquery 防止提交时重新加载表单

Question

我想使用 javascript/jquery/ajax 上传文件，就我而言，我必须防止在上传时提交的表单上重新加载。另外，我想添加一个删除按钮，这样，当上传文件时，删除按钮可以删除它，同样的情况也是如此，以防止表单提交时页面刷新/重新加载。

因此，我在一个表单中有三个按钮，上传、删除、下一步，在我的例子中，只有下一步允许通过刷新/表单操作来提交表单。显然，当刚刚选择文件并且用户直接单击下一步按钮时，它首先上传，然后执行操作。

HTML:

    <form name="myform" method="post" id="FORM2" enctype="multipart/form-data">
// OTHER VALUES OF FORM
                    <input type="file" name="FileUpload-1" id="FileUpload-1"  class="file_upload" />

                    <input type="submit" value="Upload" id="upload" class="submitUpload" />
                    <input type="submit" value="Delete" id="delete" class="submitDelete" />


<input type="submit" name="" id="FORMSUBMIT">
</form>

JS:

  $(".submitUpload").click(function(){ console.log('UPLOAD');
        action = "upload.php"; 
         $("#FORM").on('submit',function(){
          var options={
           url     : action,
           success : onsuccess
          };
        $(this).ajaxSubmit(options);
         return false;
         });
     }
     return false;

    });

     $(".submitDelete").click(function(){ console.log('DELETE');
        return false;
    });
 $('.FORMSUBMIT').click(function () {
         //CUSTOM HANDLING
      });

Answer 1

直接回答您的问题:

$("#FORM").on('submit',function(evt){
    evt.preventDefault();
});

这段代码会阻止正常的表单提交。我的建议是将更新和删除按钮从 type=submit 转换为 type=button。像这样:

<input type="button" value="Delete" id="Delete" class="submitDelete" />

这将阻止在按下删除或更新时提交表单...

我为你写了一个jsfiddle: https://jsfiddle.net/yL35bh10/