How to use blockUI with setTimeout and preventDefault on form submit? - javascript

Here is shortly what I am doing and why:
I have a form, which is preprocessed with different scripts
according user input
Usually script is executed in less than seconds, however one script
may take around 10 seconds depending on server load etc.
Now I want to implement this "popup" containing: "Please wait
while..." Im using blockUI for that - simple plugin for implementing
this.
However, blockUI for fast script execution is quite stupid, as user
will only see the popup flashing on the screen.
Therefore I want to set timeout for it, like 1000ms, so that blockUI
is displayed even though form would have been already completed
So far I've tried quite many things, now I basically use
preventDefault to cancel form submit for the setTimeout, but Im
unable to complete the form submit after that.
Edit: Found out, that as javascript is asynchronous language, without preventDefault (stop form submitting) setTimeout never launches and action returns true straight away.
<form method="post" name="my_form" id="my_form" enctype="multipart/form-data">
<input type="submit" name="my_submit" id="my_submit" value="Submit" />
<div id="form_loading_message" style="display:none;">
<h1>Please wait, page is loading...</h1>
</div>
</form>
$('#my_submit').click(function(event) {
$.blockUI({
message: $('#form_loading_message')
});
var form = $('#my_form');
event.preventDefault();
setTimeout(function () {
form.unbind('submit').submit();
$.unblockUI();
}, 1000);
});
If you have better idea how to do this, please, I'm open for other suggestions aswell...

Not familiar with blockUI, but... Here's how I would do it:
<html>
<head>
<script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.9.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#my_submit').click(function() {
$('#form_loading_message').show();
setTimeout('submitForm()', 1000);
});
});
function submitForm(){
$('#my_form').submit();
}
</script>
</head>
<body>
<form method="post" name="my_form" id="my_form" action="google.com" enctype="multipart/form-data">
<input type="button" name="my_submit" id="my_submit" value="Submit" />
<div id="form_loading_message" style="display:none;">
<h1>Please wait, page is loading...</h1>
</div>
</form>
</body>
</html>

As I didnt find out how to do this with javascript, I used php sleep() -function before redirecting user to another page. Naturally preventDefault needed to be removed as it blocked the submit action. This solution solves the use case for me: Just to display user a message that the page is loading.

Related

How can I refresh a form page after the form submits to _blank?

I have an HTML form which targets _blank. I would like the page that form is on to reload after submitting.
So here's some sample markup:
<form method="POST" action="result.php" target="_blank">
<label for="name">Name:</label>
<input type="text" name="name" />
<label for="email">Email:</label>
<input type="email" name="email" />
<input type="submit" value="submit" />
</form>
So when you submit this form it will POST to result.php in a new window or tab. This leaves the form page as is. I want the form page to reload, or at least reset all fields.
I've tried <form onsubmit="location.reload()"... as well as onsubmit="window.location.reload()" but nothing changed.
Any suggestions?
(please no jquery)
Not sure why window.location.reload() doesn't work. I think it should. However, this does seem to work:
onsubmit="setTimeout(function () { window.location.reload(); }, 10)"
There are two ways to do this, one that you may not want to hear about.
FIRST:
In the form init tag, if you set action="" then the form will submit to the same page (to itself).
<form action="" method="post">
This allows you to add server-side code to the top of the page, like this (using PHP, for example):
<?php
If (empty($_POST)===false) {
//server side scripting to handle the submitted form
}else{
?>
//HTML to create/show the page with form for user input
<?php
//Close the if statement
}
?>
SECOND:
Use AJAX (javascript or jQuery) to "submit" the form, and then -- in the AJAX function's callback -- carry on with whatever changes you want to make to the page, including redirecting to a new page.
The accepted answer did not produce the desired results for me.
Accepted answer:
onsubmit="setTimeout(function () { window.location.reload(); }, 10)"
Changing the accepted answer from onsubmit to onclick did fix my issue;
Worked for me:
onclick="setTimeout(function () { window.location.reload(); }, 3)"
There may be undesirable results, or this may not be preferred but it performs as desired for me.
It should work if a callback is passed to the onsubmit event attribute. For example,
(Traditional anonymous function)
onsubmit="function() {location.reload()}"
or
(Arrow function)
onsubmit="() => location.reload()"
location.refresh(true);
will help

Javascript return false behavior what's the deal?

So I am loading an html page with a basic script and a basic form. However when the page loads there are two radio buttons the user can select, YES or NO. If you the user selects neither, I would like to present an alert box. I successfully present the alert box, but when the user clicks the "okay" button within the alert box the user is redirected to a different page. I added the statement, return false; in hopes that this wouldn't happen.
The code is as follows,
<!-- Javascript radiobutton form validation -->
<script type="text/javascript">
function valForm(form) {
if(!document.getElementById('splash_false').checked && !document.getElementById('splash_true').checked ) {
alert('You either like splash pages or dislike em, choose one ...please');
return false;
}
}
</script>
<!-- Javascript radiobutton form validation END -->
</head>
<body>
<img src="pics/DSCN1566-300x225.jpg" alt="" width="640" height="auto" />
<h1>Hello Javascript redirection.</h1><br />
<p>
<form name="tosplashornottosplash" action="splash-process.php" method="post">
Splash pages are stupid.
<input type="radio" name="splash" id="splash_false" value="false" /> No
<input type="radio" name="splash" id="splash_true" value="true" /> Yes
<input type="submit" name="splashSubmit" onClick="return valForm(tosplashornottosplash)" value="Enter" />
</form>
</p>
You should place your handler in the form's onsubmit callback
<form onsubmit="return valForm(this)" action="splash-process.php" method="post">
Returning false to the onsubmit handler will prevent your form from being posted
Try to make it an onsubmit-callback on the form, instead of an onclick-callback on the button. That way, returning false will stop the form from posting.
Side note:
Since you don't seem to use the reference to the form in your callback, there is no need to pass it to the callback function. So you could just as well call it like this, from the onsubmit-attribute on the form:
onsubmit="return valForm()"
And get rid of the the form variable in the callback signature:
function valForm() {
...
}
You need to bind to the form's onsubmit event:
<form onsubmit="return valForm()">
(Note that the form parameter in your valForm function was never actually used nor was it properly filled in either. The return valForm(tosplashornottosplash) referred to an non-existant tosplashornottosplash JavaScript variable and thus evaluated to undefined.)
However it's recommended that you bind your event handlers in the JavaScript code itself instead of wiring them in the HTML markup:
document.getElementById("myform").addEventListener("submit", valForm, false);
This assumes you gave your form the ID myform and that this code is executed after the form element is loaded into the DOM. You can ensure this by putting your JavaScript at the bottom of the page (just before closing body) or by binding to the DOMContentLoaded event of the document.
To support older IE browsers as well, you need to use attachEvent when addEventListener is not available. The article on addEventListener at MDN suggests something like:
if (form.addEventListener) {
form.addEventListener("submit", valForm, false);
} else if (form.attachEvent) {
form.attachEvent("onsubmit", valForm);
}
Alternatively, you can throw jQuery in which facilitates DOM selection (e.g. $("form[name=myform])") and takes care of the cross-browser compatibility issues for you (e.g. $.on('submit', valForm)).

Javascript onsubmit causing page to refresh

Really simple form
<form id="addDonor" name="addDonor" onsubmit="addDonor(); return false;" action="" method="post" enctype="multipart/form-data">
<div class="sectionHeader">Add New Donor</div>
<div class="formRow"><label>Name</label> <input class="inputText fullTextBar" type="text" name="userName">
<div class="formRow"><button style="margin-left:350px; width: 80px" type="button" class="publish">Add Donor</button></div>
</form>
And the addDonor function
<script type="text/javascript">
function addDonor(){
alert("test");
return false;
}
</script>
Eventually that function will include some jquery ajax to submit the info. But, baby, steps. Right now I can't even get the alert to show up. Also, when I hit "Enter" on my keyboard, the whole page refreshes, when I press "Add Donor" nothing happens.
I'm sure it has to be a simple problem. I think it's one of those things that I just need someone else's eyes to point out.
Try assigning the onsubmit event in javascript:
document.getElementById("addDonor").onsubmit = function () {
alert("test");
return false;
}
The problem is that your function is named addDonor and your element is addDonor. Every element with an id has an object created under document to identify it. Try alert(addDonor) in the inline onsubmit to see that it alerts an HTML element, not a function. Inline functions execute in a scope chain inside document, so addDonor points to document.addDonor before it reaches window.addDonor (your function).
you should change your <button> to an <input type="submit"> (as #fireshadow52 suggested) that should fix your problem. you should try the Wc3 Schools online javascript tester to try out simple javascripts before you put it in a page, or any other one that you prefer. google has something along these lines. also, you can normally try the javascript console on your respective browser.
Your button is explicitly set to type="button", which won't make it submit the form. Change it to <button type="submit">, or to <input type="submit"> if you prefer (I like the styling options of <button> myself).

Onsubmit doesn't work in Chrome

I have two forms and a button. Everything works fine in Firefox. I get a new window, with a Paypal payment, and in the window where everything happened i get the send_mail form submitted that will send an e-mail to the user. How can I make this work in Chrome? Why it's not working? I've tried anything (or so I think)!
So:
<form name="registerForm" id="registerForm" target="_blank" action="paypal_url" method="post" onsubmit="$('#send_mail').submit();">
...
</form>
<form name="send_mail" id="send_mail" action="" method="post">
...
</form>
<a onclick="$('#registerForm').submit()">Go to paypal and send confirmation mail</a>
Unless you have a really good reason to use a javascript-only submit, why set up the form to be unusable if there is a javascript error?
Use a standard form input of type submit, give it an id, alter the look or text of the submit via javascript as necessary, and create onclick & onsubmit events as a layer on top of that functionality and have them return false. Better fallbacks.
I'm not sure why you're trying to submit two forms at once, but how about this alternative (note that I haven't tested this code, but it should convey the idea):
<script type='text/javascript'>
$('#fallback-register-submit').hide(); // Hide the submit button.
$('#registration-link').show().click(function (){ // Show the link and attach the action.
$('#registerForm').submit();
return false; // Don't bother following the link anchor.
});
</script>
<form name="registerForm" id="registerForm" target="_blank" action="paypal_url" method="post""><!-- Single form that does all of the submitting. -->
...
...
<input type='submit' id='fallback-register-submit'>Register</input><!-- In the event of a javascript error for their browser, they can still buy your stuff! -->
<a id='registration-submit' style='display:none'>Go to paypal and send confirmation mail</a>
</form>
why not just bind both submits to your a?
onclick="$('#send_mail').submit(); $('#registerForm').submit();"
if you want the other form to submit AFTER the first one:
onclick="$('#send_mail').submit( function() {$('#registerForm').submit();}); "
assuming you're using jquery here
As far as i understand, you want to submit the form using a link?
Why not use "plain" javascript then? Without jQuery: document.getElementById(....).submit()
Or link the submit event to the link in a normal jQuery way:
$(document).ready(function() {
$(".yourLinkClass").click(function() { // or "#yourLinkId" for that matter
$("#registerForm").submit();
});
});
And you also could use the submit button ;)

INPUT type Image with onclick doesn't work with JS

Newbie coder here. I'm making a rating website, and am trying to make it so that when user click "Yes" as an image, it invoke a JS which display an Ajax loader gif and then shows the results. Problem is that onclick here doesn't seem to trigger the function:
<form action="" method="get" id="myform">
<script>
$(document).ready(function(){
$("#myform").submit(function(){
$('#chart1').hide();
$('.ajax-load').show();
var data = $("#myform").serialize();
submitRating(data, false, function(){});
setTimeout($('.ajax-load').hide(),1000);
$('#chart1').show();
return false;
});
});
</script>
<div id="chart1"><div>
<input type="image" src="images/yes.png" name="yes" value="0" onclick="$('#myform').submit();"/>
</form>
Instead of $('#myform').submit(), if I try an alert(), it works, so I'm puzzled as to why this doesn't work.
Thanks!!
try using: .trigger("submit")
more info: http://api.jquery.com/trigger/
And if that doesnt work the only thing I can think of is having a blank action attribute in your form tag...
It might have to do with the fact that type=image has a default behavior of submitting when clicked. This could cause interference with your submit() function.

Categories