How to make keyboard disappear on Iphone form with multiple pages - javascript

I have a form that is composed of 3 pages. On a iphone I'm trying to get the keyboard to disappear and would also like the page to zoom page to original size when the GO button is pushed.
I tried the following JS function:
$(document).on("keyup", "input", function(event) {
// If enter is pressed then hide keyboard.
if(event.keyCode == 13) {
$("input").blur();
}
});
but that brings me back to the first page. Here's a link to a js fiddle
With the JS function above it works on the first page but on the second page with the function or not when I press GO it goes back to the first page.
That seems like strange behavior. Without the function at all, the GO button, when pressed on the first page brings me to the second page (desired behavior) but when on the second page and the GO button is pressed it looks like it's submitting the form - desired behavior is to either close the keyboard or go to page 3
I'm getting a CSRF verification failed when trying this on the iphone from JS fiddle when on page 2. Any ideas?
When I add debug:true to the validate jquery it works. My understanding is debug:true prevents form submission. How do I do this properly?

<form onsubmit="return false">
seems to do the trick

Related

ipad html5 web app - can't click twice on button

I've created 2 pages, a form page and a form confirmation page. This form will be used as a web app on an iPad. So i've added al the meta tags to these pages.
Like: , ...
I've added the web app to our homescreen on the ipad by using Safari and add it to the homescreen.
When you fill in and submit the form, you are redirected to the confirmation page. The confirmation page redirects you automatically to the form page after 5 seconds.
<script type="text/javascript">
function leave() {
window.location.assign("http://www.growzer.houston-1.hybridmedia.be/beurs/");
}
setTimeout("leave()", 5000);
</script>
It doesn't work to submit the form for a second time. The submit button keeps have its hover state.
I don't have this problem in a normal browser.
Does someone know what the problem is? And is there a workaround?
Thanks!
Try to reset the form manually with the formObject.reset()-function. The way to do this is something like this:
$('#myform').submit(function() {
// reset the form
$(this).reset(); // reset is a native function so it might work a bit differently
return true; // return false to cancel form action
});

how to run jquery code after hml form submission

this is my javascript code :
<script type="text/javascript">
$(document).ready(function(){
$('#saveBtn').click(function(){
var prenom_length = $('#form_prenom').val().length;
if (prenom_length<5) {
$('#prenom_error').html("please enter an other name");
}
});
});
</script>
the jquery code is working few seconds after form submission the displays the error text just before the page reloads but after reloading the page it disappears , i want it to keep the same text even after the page refresh how to do ?
If I understand you correctly, you want to show an error message after someone submits the form so that they know they should correct it. By default if you press a submit button in an HTML form the browser wil send the request to the server and the server will give the user a new page.
You want to prevent that last bit from happening. The browser should execute your jQuery and if you find an error in the form you want to prevent that default submit to the server from happening. As it happens (pun intended) jQuery can do exactly that, check out the documentation here.

How to prevent user to go back with right click on back button?

When I press and hold the browser back button or just right click the back button I can go back pages. But I need to disable it. Is there any way to do that with javascript or jsp
Open A New Window without Back Button
browser-back-button-viralpatelThis one is very crude technique. But in some case it works like charm. All you have to do is to open the webpage in a new window. This window doesn’t have back button at all because we have hide the toolbar.
This technique does work in some case but user has still a workaround to navigate to previous page. Most of the browser have options of Back in context menu. Thus user can still right click on the page and click Back to go to previous page. We will shortly see the workaround for this issue also.
Following is the code to open webpage in a new window have no toolbar (Back/Next buttons).
window.open ("http://viralpatel.net/blogs/",
"mywindow","status=1,toolbar=0");
Also it is possible to disable the right click on any webpage using Javascript. Add following code in the webpage.
<body oncontextmenu="return false;">
Disable Back functionality using history.forward
This is another technique to disable the back functionality in any webpage. We can disable the back navigation by adding following code in the webpage. Now the catch here is that you have to add this code in all the pages where you want to avoid user to get back from previous page. For example user follows the navigation page1 -> page2. And you want to stop user from page2 to go back to page1. In this case all following code in page1.
<SCRIPT type="text/javascript">
window.history.forward();
function noBack() { window.history.forward(); }
</SCRIPT>
</HEAD>
<BODY onload="noBack();"
onpageshow="if (event.persisted) noBack();" onunload="">
The above code will trigger history.forward event for page1. Thus if user presses Back button on page2, he will be sent to page1. But the history.forward code on page1 pushes the user back to page2. Thus user will not be able to go back from page1.
Warn User if Back is Pressed
You may want to warn user if Back button is pressed. This works in most of the cases. If you have some unsaved form data, you might want to trigger a warning message to user if Back button is pressed.
Following Javascript snippet will add a warning message in case Back button is pressed:
window.onbeforeunload = function() { return "You work will be lost.";
Reference
just use
window.onbeforeunload = function() { window.history.forward(1); };
or if u like to warning user
window.onbeforeunload = function() { return "Back button is not available!"; window.history.forward(1); };

How to add history to jQuery UI tabs using a back button

I've got a PHP file with 5 tabs (jquery ui). Tab four and five contain
forms. Forms and tab work fine - expect to this: I submit the form (POST
method not XHR), then click the right mouse button (Firefox and IE behave
identical) and select back and then select tab five in the page by mouse
click the entered form data is still available.
I try to build a link, that is more convenient for the user.
<a href="#" onClick='history.back();$("#tabs").tabs("select","4");'>modify</a>
If click on my modify link, it still jumps back to tab one and the form fields in tab five are empty.
I read several posts about jQuery UI tabs and the back button, but all seem not to address my problem.
Where is my fault and is the difference between doing this steps by hand and my link with JS?
Javascript stops executing once you leave the page that it's running on -- the second half of your onClick handler never runs.
Following from the comments here is a function that will remember what your last tab was that you selected. It does rely on you using a set "Back" button.
The problem you will find, as far as I can see, is that you can't intercept a user clicking the browser back button. I have found that creating an obvious and clear back button on the site does the job and the feedback I have had so far on our sites seem to back that up.
The function is:
$(function() {
var $previousTab = 0;
var $backButtonUsed = false;
// Initialise tabs
$("#tabs").tabs();
$("#tabs").bind("tabsselect", function(event, ui) {
if ($backButtonUsed)
{
$backButtonUsed = false;
} else {
$previousTab = $("#tabs").tabs('option', 'selected');
}
return true;
});
$("#back").live('click', function() {
$backButtonUsed = true;
$("#tabs").tabs({ selected: $previousTab });
return true;
});
});​
I have also included this in a JSFiddle, so you can see it in action with the HTML and jQuery UI Tabs.
Let me know what you think.

How to disable back,forward and Refresh functionality in browser?

Can anyone help me to disable browser back,forward, back button and right click menu functionality using JavaScript or JQuery? I have tried disabling the back button like this:
function disableBackButton() {
window.history.forward();
}
setTimeout("disableBackButton()", 0);
I have called this function in the Body onload event. I have a doubt that where we need to put this code in the Calling page or Called Page.Suppose i have two pages like this FirstPage.aspx and SecondPage.aspx. When I navigate from the First Page to Second Page when I click back button of the browser it should not go to FirstPage.aspx.
Have a look at A Thorough Examination of "Disabling the Back Button."

Categories