How to return back and do not submit form

Question

I am using multipart to upload a file; I want to prevent the form from being submitted if the file has not been selected.

How can I achieve this ? This is my code:

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

Here if I do not select file it's also redirecting tme to saveExecelDatarstore, but I want that if there is no file selected then it shoud not show any message, and return back

`` scares me to death. BTW, why not `` ? – Andrea Ligios Jan 29 '16 at 12:56 — Andrea Ligios, Jan 29 '16 at 12:56

vikas singh aswal · Accepted Answer · 2016-01-29T12:55:24.327

2

You can write a code in java-script on click of the submit button

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

edited Jan 29 '16 at 12:55

answered Jan 29 '16 at 12:23

vikas singh aswal

202
2
7

i did this but still form is submitting – Shakti Sharma Jan 29 '16 at 12:29
use e.preventdefault(); before return false – vikas singh aswal Jan 29 '16 at 12:35
its still rediectiin onn url if not file selected – Shakti Sharma Jan 29 '16 at 12:45

score 0 · Answer 2 · answered Jan 29 '16 at 13:04

Assuming upload_file() is performing a check on the presence of the file (otherwise, it's not clear what it does, since it's applied to a submit button), you need to return its result. If it's false, the submit will be aborted:

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

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

score 0 · Answer 3 · edited May 23 '17 at 12:31

First make your input tag's onclick take an event as paramter to upload_file function (event and this are spacial objects passed to function and you can use them inside a function without declaring them in the function header):

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

then define the upload_file as following:

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

How to return back and do not submit form

3 Answers3