如何 return 返回而不提交表单

Question

我正在使用 multipart 上传文件；如果文件尚未 selected，我想阻止提交表单。

我怎样才能做到这一点？这是我的代码：

<form id="uploadFile" name="uploadFileForm" action="<s:url value="/admin/saveExcelDatarestore" />" method="post" enctype="multipart/form-data"><span>
    <input type="hidden" name="s360securetoken" value="<s:property value="#session.s360securetoken"/>"/>
    <s:hidden name="user.userId"></s:hidden>
    <s:hidden name="user.emailId"></s:hidden>
    <div><label>DownLoad Sample :</label><input type="button" class="submit" value="XLS" onclick="dnldSampleData('XLS');"></span></div>
 <div><label>Upload File :</label> <input type="file" name="upload" value="" id="uploadFile_upload"></span>

<span><select id="selectedTimeZone" name="timeZone" style="width:100%;white-space: nowrap; overflow: hidden;" class="chosen-select1">
 <jsp:include page="../../../../timezone.jsp"/> 
    </select></span><div>
<input type="submit" value="upload" class="submit" onclick="upload_file();"></form>

在这里，如果我没有 select 文件，它也会将 tme 重定向到 saveExecelDatarstore，但我希望如果没有文件 selected 那么它不应该显示任何消息， return 返回

Answer 1

您可以在 java-script 中编写代码，点击提交按钮

function upload_file()
{
        e.preventdefault();
        var file = document.getElementById("uploadFile_upload");
        if(file.value!=""){
         $("#uploadFile").submit()
         alert("file selected");
        }else{
        alert("nothing selected");
         return false;
        }
}

Answer 2

假设 upload_file() 正在检查文件是否存在（否则，不清楚它做了什么，因为它应用于提交按钮），您需要 return 其结果。如果为假，提交将被中止：

<input type="submit" value="upload" class="submit" onclick="return upload_file();">

<script>
    function upload_file(){
        return document.getElementById("uploadFile_upload").files.length > 0;
    }
<script>

Answer 3

首先让您的输入标签的 onclick 将一个事件作为 upload_file 函数的参数（ 事件，这是传递给函数的空间对象，您可以在函数中使用它们而无需在函数中声明它们函数头):

<input type="submit" value="upload" class="submit" onclick="upload_file(event);"></form>

然后定义 upload_file 如下：

function upload_file(e)
{
        e.preventdefault(); // or event.preventdefault();
        var file = document.getElementById("uploadFile_upload");
        if(file.value!=""){
            // get form element through id:
            document.getElementById("uploadFile").submit();
        } 
        return false;           
}

阅读更多：

onClick Function “this” Returns Window Object

How to get the onclick calling object?

onclick assigned function with parameters

How to submit a form with JavaScript by clicking a link?

顺便说一下，你可以使用一个很好的 jquery 表单插件来发送包含文件上传的 ajax 表单请求，它在过去对我有很大帮助 struts2 ： http://malsup.com/jquery/form/#file-upload

如何 return 返回而不提交表单

How to return back and do not submit form

html

javascript

jquery

jsp

struts2