I want to open a new JSP page as a popup window. After the submit button is clicked, the user can provide data without leaving the main page. For now, it simply redirects to another page, which makes the page a bit less user friendly.
I am using this code to redirect to the other page:
response.sendRedirect("http://localhost:8080/APP/add.jsp");
And it works correctly, but it is not satisfying for me.
You can use this code. Here mypopup is a java script function which will show the popup window. It takes a parameter url. You can use this function on your submit button click.
<script type="text/javascript">
function mypopup(url) {
width = window.screen.width;
height = window.screen.height;
mywindow = window.open(url, "Title",
"location=0,status=1,scrollbars=1,resizable=1,menubar=0,toolbar=no,width="
+ width + ",height=" + height);
mywindow.moveTo(0, 0);
mywindow.focus();
}
</script>
<input type="submit"
onclick='mypopup("http://localhost:8080/APP/add.jsp");return false;' value="Submit"/>
Related
how can I make my jsp page detect a double click on the submit button. I am trying to do a simple print out message to check if a user has double clicked the submit button.
something like :
<%***if user double clicks submit{
System.out.println("doubleClick");`
}***%>
-Newbie trying to learn java programming.
Believe me you are not looking for Java
You can simply use Javascript function
ondblclick="myFunction()"
Or you can use Jquery for this:
$( "#target" ).dblclick(function() {
alert( "Handler for .dblclick() called." );
});
Details
You can use ondblclick attribute in your button element.E.g-
<input id="searchId" type="button" ondblclick="doubleFunc()"
name="submit">
Make sure you also handle the submit event in your script.
I have an HTML page (index.htm) and a link in it. Clicking on that link opens a ColorBox iFrame (popup.htm) its a form with submit button.
Now when someone submits the form in that popup.htm page, I need index.htm to refresh automatically to -> index2.htm.
I have tried this and variations with no success.
<form onsubmit="window.opener.location = 'http://www.myDomain.com/index2.htm';">
Did you try <form onsubmit="window.top.location.href = 'http://www.myDomain.com/index2.htm';"> Of course iframe and top must be on same domain and don't break same origin policy.
I am using jquery FormWizard and would like to use submit button on last screen as a way to submit the form and go to next screen.
Issue is I am embedding this jquery script in my Java code. Right now I have a "submit" button from jquery form wizard and I have a "continue" button from my Java code. So user submits the form by pressing "submit" and then press "continue" to go to next screen. Not an ideal situation for user.
If I just use "continue" without pressing submit, it doesn't store any information of the form. Once I press "submit" and then "continue", all information on the form will be saved in the database. How can I use continue button as submit and also to proceed to next screen so that I don't need that submit button on last screen.
Script sc = new Script();
sc.add("$(function(){$('#formScreenQuestions').formwizard({formPluginEnabled: true,validationEnabled: true,focusFirstInput : true,disableUIStyles : true});});");
HEADER.add(sc);
Form form = new Form("criteria");
form.set(ID, "formScreenQuestions");
Div dh = new Div();
dh.set(ID, "lastStep");
dh.set(CLASS,"step");
Table vt = new Table();
vt.row();
vt.cell(text("Please press SUBMIT before pressing CONTINUE"));
==== showing some questions with checkboxes to select =====
dh.add(vt);
Div db = new Div();
db.set(ID,"navigation");
Table bt = new Table();
bt.row();
bt.cell("<input type='reset',id='back',value='Back' />");
bt.cell("<input type='submit',id='next',value='Next' />");
db.add(bt);
form.add(dv);
form.add(db);
You could add an "on submit" event to your form.
http://api.jquery.com/submit/
Make a server-side redirection if submit is ok, to the next page.
OR
On the submit callback make a
$("#continueButton").click();
If I understand correctly, formWizard just helps you divide your form in multiple steps using a wizard.
You cannot just bind click the button because it would trigger when ever one clicks next.
What you should do is use this event from formWizard, then you wouldn't be adding complexity since you wouldn't be overriding any of the functionalities of the plugin you're using :
$("#demoForm").bind("after_remote_ajax", function(event, data){
if(event.success && event.currentStep === finalStep) {
windows.location.href="URL to be forwared to";
}
});
Propably the best way is to use jQuery's submit event and using AJAX submit it to server:
$("#form-name").submit(function(){
$.post("submit-path", function(result){
// do something with result
});
return false;
});
If you are using JQuery -- why not used the Power of AJAX and make it more better user experience -
Define a jQuery event on Continue button :
$("#continue-button").click(function(){
windows.location.href="URL to be forwared to";
}):
Submit an AJAX Request on click of Submit Button(Look at the documentation of AJAX method of jquery has how to show processing icon"
AJAX Request :
$.ajax({
url : actionURL,
dataType : <your dataType>,
contentType : <your Content Type>,
type : 'post',
data : <bla bla>,
success : function(data) {
//Show Continue button
}
});
};
wouldnt it be better if you use the continue button in the jquery form, and remove the submit button from Java?
$(function(){
// bind a callback to the before_step_shown event
$("#demoForm").bind("before_step_shown", function(event, data){
if(!data.isBackNavigation){
doSubmit();
}
});
});
I think this is a design issue. If you are trying to create a multistep form where data are saved between each step, you should have a submit button on every step of the form, submit the data to the server, keep the track of the step using an input hidden value then send the next part of the form to the client. It is safer because your form will work even if javascript is not enabled client side. In such design, the process could be improved later to add an AJAX functionality.
If you do not need the data to be send between each steps, then you can do a single form with some kind of panel for each subforms that would be shown or hidden depending where the client is.
i have a question about using request.getParameter(), i knew that it can use to post the value using request.getParameter, Is it necessary match request.getParameter and <input>???
My original code in HTML:
<INPUT type=submit name="submit" value="download">
In JSP:
String start = request.getParameter("submit");
Now I want to change a button and use div
div name="submit"id="submit" class="btnStyleFunc"
onclick="document.body.style.cursor='wait';this.disabled='true';
document.getElementById('form').submit();">
But it doesn't work, anyone can help me ?
Now i use the method below, but another problem is raised...the action does not stop...
String start = request.getParameter("submit1");
<input type=hidden name=submit1 value=download>
<div class="btnStyleFunc" onclick="document.body.style.cursor='wait';
this.disabled='true';document.getElementById('form').submit();">
Does anyone know what the problem is ?
A clicked submit button is a successful form control and its name/value pair will be submitted to the server in the form data.
If you submit a form with JavaScript, there is no clicked submit button, so it won't appear in the data. A div cannot have a name and is not a form control anyway — it isn't a submit button, even if it triggers JavaScript that submits the form.
Using a div with JavaScript also breaks the form for:
Anyone not using a mouse/trackpad/etc to navigate the page (a div won't get the focus when tabbing through interactive elements)
Anyone with JavaScript disabled
Anyone using a screen reader in forms mode (div elements are not form controls).
Use a real submit button instead.
I've the current situation:
Have a Link in some HTML page.
When the user click that Link, an NORMAL (vs Ajax) HTTP request is being sent to a Web Server (typically a Java Servlet)
After that, of course the browser will bring the contents from the server and start rendering it. (actually it's the same page with modified contents - don't ask me to do it in ajax, cause it is the requirements)
Before step 3 is being done (while the page is being loaded) I need to display some frame to the user saying something like loading ....
Well, just populate a div somewhere on the page with "Loading..." when the link is clicked. Here's some rough code
$('#yourlink').click(function(){
$('#loading').html('Loading....');
});
<div id="loading">
</div>
And when the page loads, the current loading div will be replaced with an empty one, this will signify that the loading is complete.
Another approach:
The css
#loading
{
display: none;
}
The html
<div id="loading">
Loading....
</div>
The js
$('#yourlink').click(function(){
$('#loading').show();
});
Well, there's several non Ajax ways to do this. The simplest I guess would be to have a giv animated image with your loading bar, which you keep in a hidden div in your initial page:
<div style="display:hidden;"><img src="/img/loading.gif"></div>
Then add some javascript to the link/button that submits the page, such as when it is clicked it unhides the div with image.
There are many ways to do this. I handle it something like this:
// Any anchor with showOverlay class will invoke the overlay function
$("a.showOverlay").click(function() {
overlay();
});
// Normal form submits are intercepted. Overlay call also be skipped by
// making the form of class "noOverlay"
$("form").submit(function() {
var skipOverlay = $(this).hasClass("noOverlay");
if(!skipOverlay){
overlay();
}
return valid;
});
// This overlay function uses the blockUI plugin, other methods can also be used
function overlay(){
$.blockUI({
fadeIn: 500,
css: {
height: '150px',
top: '35%'
},
message: '<div style="margin-top: 40px;"><table align="center" ><tr ><td style="padding-right: 25px;"><img src="/images/wait.gif" /></td><td style="line-height: 25px;"><h1> Just a moment...</h1></td></tr></table></div>'
});
}