How to detect double click on JSP - java

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.

Related

How to click a button on a webpage which does not have an ID

I am having trouble with figuring out how to click a button on a website.
The buttons code is
<button ng-click="form.submit(false, frm, buyQuery, ['call'])"
ng-mouseleave="hideDir()" ng-mouseover="showDir('call')"
ng-disabled="disabledControls.buyBtn">
<i ng-class="{'mr0':chartHeight <= smallH.smallBuyBtns}"></i>
<span ng-show="chartHeight > smallH.smallBuyBtns">Call</span>
</button>
I also ran into something like this but not the same before and I managed to click it with the code
Set form = webbrowser.Document.Body.GetElementsByTagName("form")(0)
Set button = form.GetElementsByTagName("button")(0)
button.click
I'm sorry my question is probably badly put but I am new to coding, If any additional info is required to answer my question please let me know.
What's the conditions for the click event? Is it some other action?
Anyway in that part of the code where you detect that your form submit button should be clicked, just use the same code as it is in ng-click: $scope.form.submit(false, frm, buyQuery, ['call'])
That will work if form is the name of your form.

DatePicker - how to keep the selected value after clicking on submit button

I want to keep the selected value after clicking on submit button.
Right now when i chhose value from datepicker and when i click on submit button then my textbox value become empty. I used javascript.Following is my code
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
<input type="text" id="datepicker" name="<portlet:namespace/>datepicker" value=""/><br>
How can i solve this problem please help me...
Thanks!!!
If you set value="", you should expect to get the default, whatever datepicker displays. Set it to the value that you want to start with and you should be good.
Figure out the formatting that it requires, most likely it's the same one that gets transmitted as request parameter when you submit your form.

Submit button to submit form and go to next screen using jquery form-wizard

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.

Why i can't use request.getParameter in my form

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.

How to manipulate the history of the web page?

Here is my what I have
<div id=A></div>
<div id=B></div>
<input type="button" value="ChangeA" onClick="createTableA();">
<input type="button" value="ChangeB" onClick="createTableB();">
So in my jsp file, I use javascript and jQuery to manipulate the content of those two div dynamically. For example, if I click on changeA, the function createTableA() will dynamically manipulate <div id=A></div> and append a table to it. So my question is if I click on changeA, then click changeB, how can I manipulate the history so that if I click the back button, I go back to the content of Table A
I've been using the jQuery History plugin for just this sort of thing and it's been working pretty well for me.
Each "page" is referenced by a hash in your URL. That way "changing pages" doesn't refresh the page, but does store the page state in history and allow for bookmarking.
EDIT
I'll expand on the example given in the link to apply more for your situation.
function loadTable(hash)
{
if(hash == "ChangeA")
createTableA();
if(hash == "ChangeB")
createTableB();
}
$(document).ready(function() {
$.history.init(loadTable);
$("input[id^='Change']").click(function(){
$.history.load(this.attr('value'));
return false;
});
});
What the above code does is sets an event handler on all input tags whose id begins with 'Change' so that when those buttons are clicked, loadTable is called. If you change your buttons to look like this:
<input type="button" id="ChangeA" value="ChangeA">
<input type="button" id="ChangeB" value="ChangeB">
clicking button A will put this http://www.example.com/yourpage.html#ChangeA in the address bar and load table A, also adding that table change to the browser history.
The native 'location' object has a 'hash' property that you could use for navigation in AJAX/JS applications.
You could use History plugin or Address plugin.
Address plugin gives more flexibility and recommended for more complex apps.
You should check out Ben Alman's Back Button and Query Library Great api for mucking with the browser history and has some great examples to get you started.
YUI also has a browser history manager: YUI3: http://developer.yahoo.com/yui/3/history/ or YUI 2: http://developer.yahoo.com/yui/history/

Categories

Resources