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
});
Related
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.
I have a webpage that makes a POST request to a PHP script. Depending on the result of the request, the onclick event for a button sets a redirect to one of two pages.
<button id="button" type="submit">Proceed</button>
...
$.post('script.php', {
key: value
}, function(result) {
if (result != null) {
document.getElementById("button").onclick = function() {
window.top.location.href = "https://example.com/page?otherkey=othervalue";
}
} else {
document.getElementById("button").onclick = function() {
window.top.location.href = "https://example.com/otherpage?otherkey=othervalue";
};
}
});
This works fine on desktop browsers, but on Safari on iOS (specifically tested on iOS 10.3.2) upon clicking the button, the page refreshes and doesn't redirect to the correct site. In addition, it clears any URL parameters that were previously there. So for example if the page with the button is example.com/page?key=value, the page will refresh and become example.com/page?#_=_. I've tried debugging and checking a Javascript console, but it doesn't say anything.
The redirect is a page in my own domain, though the page with the button is integrated into a Facebook app page, if that's relevant.
Also, if I construct the URL on my own and try to go to it normally, it loads fine. I don't know what could cause this, so I'm not sure if there's any other relevant information worth posting, but I can say more if necessary.
Safari does not deal well with return false being done in the function, and especially with no return at all. I would include a onsubmit="return function();" in the html element, which I'm guessing is a form. You also attach this to the submit() event listener via $('[the form ID]').submit(function(){ do something here; return false;});
I was right that I suppose I didn't supply enough detail, but it seems that because the button in question was inside a <form> tag and acting as a submit button, that was messing it up. To solve the issue, I removed the form (since I was not submitting any data anywhere, just using the button to redirect the page) and it solved the issue. Now it works on desktop and mobile browsers.
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
I am currently viewing all the possibilities for preventing multiple submission with button tag. The problem I am facing is that if users click submit button really fast it will enable them to submit multiple posts. I would like to restrict the submission to just one submission. I tried to use onclick="this.disabled = true, but it makes the button not working at all. The current button tag looks like this:
return "<button class='button btn btn-primary' id='gform_submit_button' onclick='this.disabled = true' type='submit'><span>Submit!/span></button>";
Can anyone guide me as to how to achieve this?
Ultimately, you cannot prevent multiple submissions on the client-side. You would have to implement these security measures on the server-side, in whatever server-side language you are using (e.g., PHP).
On the client side, you could do something like this
var canSubmit = true;
$('.button').click(function(){
if(canSubmit)
{
// fire missiles
canSubmit = false;
}
else
{
// sorry missiles loading
}
});
Now since after clicking once canSubmit has been set to false, a second click would not run the code. After validating or processing your submitted data you can set canSubmit back to true.
When the button is onClicked call this function:
function submitFunc(formId){. document.getElementById(formId).submit();
}
Submitting a page is always going to be tricky. There are two challenges with submit
As you rightly mentioned that user can submit same page multiple times
After submitting page if user refresh the page then also page is going to be resubmitted
There is one trick to handle this challenge redirect the page with GET call. The GET call which you have used to load the data. Read more about it here.
So I would recommend to redirect page to GET once form is submitted.
In this process the new form will be loaded and if user try to submit the form validations will be fired that will handle 1st challenge.
And due to redirect as your last call is GET on refresh data will be loaded and there is no harm in it.
I have an app that allows users to win prizes. To win a prize they need to get to a page like this: www.myUrl.com#isAWinner where #isAWinner is my mobile page. I am worried that someone will think of just entering that url and going directly to the winner page without actually winning. To fix this I attempted to do this:
<!-- Show this if the user is a winner -->
<div id = "isAWinner" data-role = "page">
<p>YOU WIN!!!</p>
<!-- Invisible link -->
<!-- Ensures that the user does not just enter #isAWinner to the end of the URL -->
<script type="text/javascript"> reallyAWinner()</script>
</div>
function reallyAWinner () {
alert(isAWinner);
//Check to see if they really are a winner
if (isAWinner == false) {
//Not really a winner. Send back to login
$('#goBack').click();
}
}
The problem is that the alert is hit when the page initially loads, but if i try to go to that URL afterwords, then the method is not hit again.
Am I not understanding how JQuery mobile works? Will it only hit that reallyAWinner() method when the whole HTML page loads, and not when the isAWinner page loads? If so, is there another way I can check if the user is really a winner only when the isAWinner page loads?
Edit: here is a little more info. When I enter the method initially without loading the first page, the alert in reallyAWinner() will fire before an alert I have in my document.ready method, making the $('#goBack').click(); not work (Because mobile is not loaded)
If you have enabled ajax method calls the function reallyAWinner() will be called when your initial page is called.
What you can do to call you function reallyAWinner() only when #isAWinner page is loaded you can register a "pageshow" event on the id of your page.
So you can do the following:
$('#isAWinner').live('pageshow', function () { reallyAWinner(); });
From jQueryMobile Documentation:
pageshow: Triggered on the page being shown, after its transition completes.