We Keep Coding

Submitting multiple text fields and files in HTML form with AJAX

Im new to AJAX/JQuery, and I'm wondering if there is a way to send, via an AJAX request, data from an HTML form that includes a text file, and 2 separate text boxes. I have been able to send the data from the text boxes, but the file is not sent.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
// this is the id of the form
$("#SQLsubmit").submit(function() {
var url = "DAOserv"; // the script where you handle the form input.
$.ajax({
type : "POST",
url : url,
data : $("#SQLsubmit").serialize(), // serializes the form's elements.
success : function(data) {
alert(data); // show response from the php script.
}
});
return false; // avoid to execute the actual submit of the form.
});
</script>
This is my AJAX call^
<div class="row">
<form id="SQLsubmit" name="SQLsubmit">
<div class="form-group col-lg-4">
<textarea rows="11" id="BAU" name="BAU" class="form-control"
placeholder="BAU Reason" form="SQLsubmit"></textarea>
<input type="file" name="file" /> <input type="submit"
class="btn btn-primary" value="Submit">
</div>
<div class="form-group col-lg-8">
<textarea rows="11" id="SQL" name="SQL" class="form-control"
placeholder="SQL Statements" form="SQLsubmit"></textarea>
</div>
</form>
Here is the HTML.
If anyone could show me how to get the two text files, and the file into my Java Servlet (using the doPOST method), so I am able to parse all into strings, that would be greatly appreciated!
Thanks!
edit: The problem I am having when running the code in the original post is that the text fields get sent, but the file is not being sent.

You should define enctype: 'multipart/form-data. Otherwise how jquery should know you are sending a file.
This link might help:
How can I upload files asynchronously?

Have you tried
$("#SQLsubmit").submit(function() {
var url = "DAOserv"; // the script where you handle the form input.
$.ajax({
type : "POST",
url : url,
data : new FormData(this),
success : function(data) {
alert(data); // show response from the php script.
}
});
return false; // avoid to execute the actual submit of the form.
});

Login using Angular JS and Java

I got to know somewhat about Angular JS. I have watched this tutorial, but just basic only. I want to try out it in my Java application. I searched for a demo, but I don’t get any idea. So I am asking here.
I have Java entity baean model class called User, now it has just two fields.
String name;
String password;
I have service classes and daos for that to save data to a database using hibernate.
Now I want to try angularjs. I haven’t created any action class.
Here is the form in my HTML page
index.html
<div ng-app class="container">
<form class="form-signin" method="post">
<h2 class="form-signin-heading">Please sign in</h2>
<input type="text" class="input-block-level" placeholder="User name" required ng-model="name" name="name">
<input type="password" class="input-block-level" placeholder="Password" required name="password" ng-model="password">
<br>
<label class="checkbox">
<input type="checkbox" value="remember-me"> Remember me
</label>
<button class="btn btn-large btn-primary" type="submit">Sign in</button> or Signup
</form>
How can I use Angularjs to get the data and call action class? Based on success or error, how can I redirect to a success or error page?
Can someone give some idea(sample code) or some demo link(get some java object from HTML page, pass to java class redirect to some page based on return)? Because I don't find anyone. I want to learn how to use AngularJS using Java.

I give you an example from one of my project, hopefully it will point you in the right direction, basically you have to use $http in your factory/service:
(function() {
'use strict';
angular.module('app').factory('myService', myService);
function myService($http, config) {
var service = {
postData : postData
}
function postData(param) {
return $http.post(config.apiUrl + '/api/postData', param)
.then(function(result) {
return result;
});
}
return service;
}
})();
Don't worry about the config and config.apiUrl - thats basically = "http://localhost:8080/" + your api url ex. getData/postData etc. You just put your full URL $http.post('http://localhost:8080/api/postData', param). If you don't want to pass parameter just leave the param part out.
Or if you want a simple one that you can call directly from your controller:
$scope.postData = function(){
$http({
method: "POST",
url: "http://localhost:8080/api/postData",
data: $scope.data
}).then(function(response){
console.log(response);
if(response.data.success){
// do your stuff...
} else if(response.data.error) {
// or do this stuff...
}
});
}
The data object $scope.data will hold your username and password:
$scope.data.username = "username";
$scope.data.password = "password";

invoking java scriptlet in JSP using HTML

I am trying to find a way to invoke a piece of java code within the JSP using HTML form
<form method="get" action="invokeMe()">
<input type="submit" value="click to submit" />
</form>
<%
private void invokeMe(){
out.println("He invoked me. I am happy!");
}
%>
the above code is within the JSP. I want this run the scriptlet upon submit
I know the code looks very bad, but I just want to grasp the concept... and how to go about it.
thanks

You can use Ajax to submit form to servlet and evaluate java code, but stay on the same window.
<form method="get" action="invokeMe()" id="submit">
<input type="submit" value="click to submit" />
</form>
<script>
$(document).ready(function() {
$("#submit").submit(function(event) {
$.ajax({
type : "POST",
url : "your servlet here(for example: DeleteUser)",
data : "id=" + id,
success : function() {
alert("message");
}
});
$('#submit').submit(); // if you want to submit form
});
});
</script>

Sorry,not possible.
Jsp lies on server side and html plays on client side unless without making a request you cannot do this :)

you cannot write a java method in scriptlet. Because at compilation time code in scriptlet becomes part of service method. Hence method within a method is wrong.
How ever you can write java methods within init tag and can call from scriptlet like below code.
<form method="get" action="">
<input type="submit" value="click to submit" />
</form>
<%
invokeMe();
%>
<%!
private void invokeMe(){
out.println("He invoked me. I am happy!");
}
%>

Not possible.
When the form is submitted, it sends a request to the server. You have 2 options:
Have the server perform the desired action when the it receives the request sent by the form
or
Use Javascript to perform the desired action on the client:
<form name="frm1" action="submit" onsubmit="invokeMe()"
...
</form>
<script>
function invokeMe()
{
alert("He invoked me. I am happy!")
}
</script>

You can't do this since JSP rendering happens on server-side and client would never receive the Java code (ie. the invokeMe() function) in the returned HTML. It wouldn't know what to do with Java code at runtime, anyway!
What's more, <form> tag doesn't invoke functions, it sends an HTTP form to the URL specified in action attribute.

Hide <s:param> from the url

In my jsp page, there is link as follows.
<s:url var="editReqDetails" action="editReqDetails">
<s:param name="siteID" value="siteId"/>
</s:url>
when I click on that link, browser URL is
http://localhost:7101/legal/editReqDetails?siteID=99
like above.(The parameter shows in the URL.)
I want to know how to hide above highlighted part(the parameter) from the url.

If you can use javascript you could do this
<s:a href="#" onclick="window.location.href='%{editReqDetails}'">Edit Details</s:a>
This way you "hide" the url from the user. Though I'm not sure what the big problem is. If the user is malicious he can easily look in the source and get the values.

No, you can't use this. You pass parameter with http GET method that is default used in s:url tag and you want to get http POST method behavior. See the usage of struts url and choose one http GET or POST method.

You can do this:
<form id="edit-form" action="editReqDetails" method="POST">
<input type="hidden" name="siteID" value="siteId" />
</form>
Then:
<script type="text/javascript">
$(document).ready(function() {
$("#your-link").click(function(e) {
$("#edit-form").submit();
});
});
</script>

how to handle response contents by AJAX

for me it seems impossible but expecting clarification on it. i am sending a request as follow :
<form action="/name" method="get">
<input type="text" />
<input type="submit" />
</form>
Now action class at server side manipulates & send the response to client, can i handle this response by ajax somehow ??

Yes, but you have to submit it via ajax (XmlHttpRequest) in order to be able to get the response that way.
Using jQuery makes this simple:
$.post("/name", {param:param}, function(data) {
});
In that example you should pass manually each form field as param. In case of bigger forms this is not that good. So you can use serialize():
$.post($("#yourForm").attr("action"),
$("#yourForm").serialize(),
responseHandlerFunction);