Click here to Skip to main content
15,939,853 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
I have a jsp page here, the upload will show up based on one of the dropdown value. till there its working fine. I have used submit action for upload here. but also tried Ajax call etc...nothing working :( ideal goal is to upload file without submit action. Kindly assist how we can achieve this. it would be great help.Thanks


What I have tried:

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<html>
<style type="text/css">
body {
    background-image:
        url('https://cdn.crunchify.com/wp-content/uploads/2013/03/Crunchify.bg_.300.png');
}
</style>

<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>First JSP Servlet Example</title>
</head>
<body>
    <div align="center" style="margin-top: 50px;">

        <form action="FirstwebServlet">
        <br> Please select the option
            : <select required="required" name="sel" id="selType">
                <option value="None">Choose from the list</option>
                <option value="MyReport">MyReport</option>
                <option value="Myview">Myview</option>
                <option value="mycustom">mycustom</option>

            </select> <br>


            <form id="upload-form" class="upload-box" action="/Upload" method="post" enctype="multipart/form-data">
            <div id="otherType" style="display: none;">
    <input type="file" id="file" name="file1" />
    <span id="upload-error" class="error">${uploadError}</span>
    <input type="submit" id="upload-button" value="upload" />
    </div>
</form>


            <input type="submit" value="submit">
        </form>

    </div>
<script src="jquery.js"></script>
<script src="jquery.form.js"></script>
<script>
    $(function() {
        $('#upload-form').ajaxForm({
            success: function(msg) {
                alert("File has been uploaded successfully");
            },
            error: function(msg) {
                $("#upload-error").text("Couldn't upload file");
            }
        });
    });
</script>
    <script
        src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script
        src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
    ‌​
    <script>
        $('#selType').change(function(){
               selection = $(this).val();    
               switch(selection)
               { 
                   case 'Mycustomtemplate':
                       $('#otherType').show();
                       break;
                   default:
                       $('#otherType').hide();
                       break;
               }
            });
        </script>
</body>
</html>
Posted
Updated 11-Sep-19 5:37am
Comments
Member 12974741 11-Sep-19 9:15am    
Sorry i am not getting. May i know what is your recommendation. i tried in google fu... tried few didnt work with jsp. thats why raised a question here thinking i can get some insights. Thanks

1 solution

Well for starters you have invalid HTML; form nesting is generally prohibited
HTML
<form action="FirstwebServlet">
	<br> Please select the option:
	<select required="required" name="sel" id="selType">
		<option value="None">Choose from the list</option>
		<option value="MyReport">MyReport</option>
		<option value="Myview">Myview</option>
		<option value="mycustom">mycustom</option>
	</select>
	<br>
	<form id="upload-form" class="upload-box" action="/Upload" method="post" enctype="multipart/form-data">
		<div id="otherType" style="display: none;">
			<input type="file" id="file" name="file1" />
			<span id="upload-error" class="error">${uploadError}</span>
			<input type="submit" id="upload-button" value="upload" />
		</div>
	</form>
	<input type="submit" value="submit">
</form>
And then you basically are redefining jQuery after you've called descendant libraries and defined functions
HTML
<script src="jquery.js"></script>
<script src="jquery.form.js"></script>
<script>
$(function() {
	$('#upload-form').ajaxForm({
		success: function(msg) { alert("File has been uploaded successfully"); }
		, error: function(msg) { $("#upload-error").text("Couldn't upload file"); }
	});
});
</script>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
My recommendations would be to:
1. Write valid HTML
2. Call only one or the other jQuery libraries (I'd do the CDN over the local)
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900