I have a loading message and a success message that I want to fade in and fade out before the form gets submitted. I can't really get the code right to show these messages for a couple of seconds then submit the form as usual with Ajax.
I have tried to connect the submit button like this.
jQuery(document).ready(function (e) {
jQuery( "#submitbutton" ).click(function() {
e.preventDefault();
jQuery('#loadingMessage').fadeIn(1000);
jQuery('#loadingMessage').hide().delay(1000);
jQuery('#saveMessage').show().delay(2000).fadeOut(1000);
setTimeout( function () {
jQuery("form[id=postorder]").submit();
}, 4000);
});
});
Or this, this just an example, I have tried a few.
jQuery(document).ready(function (e) {
jQuery("form[id=postorder]").submit({
e.preventDefault();
jQuery('#loadingMessage').fadeIn(1000);
jQuery('#loadingMessage').hide().delay(1000);
jQuery('#saveMessage').show().delay(2000).fadeOut(1000);
setTimeout( function () {
[Submit form here]
}, 4000);
});
});
The messages works fine.
Grateful for any help!
You can do something like this
jQuery(document).ready(function (e) {
jQuery( "#submitbutton" ).click(function() {
jQuery('#loadingMessage').fadeIn(2000, function(){
jQuery('#loadingMessage').hide(2000, function(){
jQuery('#saveMessage').show(2000).fadeOut(2000, function(){
jQuery("form[id=postorder]").submit();
});
});
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="loadingMessage" style="display:none;">Loading Message</p>
<p id="saveMessage" style="display:none;">Save Message</p>
<form id="postorder" action="" method="post">
<input type="button" id="submitbutton" value="submit">
</form>
jQuery is non blocking as it is a Javascript library.
Non blocking means it will not wait for the previous line to complete it's work. It will move to the next line while the previous line code is stilling working.
So you need to use callback functions to do something sequentially in a situation like this.
Hope this helps :)
Related
I have an external JS file that contains the following jQuery code:
var globalNames = { next: 'input[name="next"]'};
var globalElements = { next: $e.find(globalNames.next) };
initQuiz: function() {
globalElements.next.click(function () {
if (y.forcingQuestionSolve && !j[c.index()] && (y.quizSummeryHide || !y.reviewQustion)) {
alert(WpProQuizGlobal.questionNotSolved);
return false
}
i.methode.nextQuestion()
}
);
the globalElements.next.click function is triggered by a click on a button:
<input type="button" name="next" value="Next" class="Button" ">
What I would like to do is call this p.next.click function from a Input Checkbox click.
I have added the following code:
<script>
$(document).on("click", "input[class='questionInput']", function () {
alert("Thanks for checking me");
// This is the line I'm not sure off !?!?
$('next').trigger('click');
});
</script>
As you can see, I have tried to call the trigger event but its not working.
I have to note that the 2 jQuery statements are not combined in document, they are separate.
EDIT: Added Correct Variables (global*)
Hi i think you only forgot to dedicate the button which has to be triggered.
<script>
$(document).on("click", "input[class='questionInput']", function () {
alert("Thanks for checking me");
// This is the line I'm not sure off !?!?
$('[name=next]').trigger('click');
// $('.Button').trigger('click');
});
thanks everyone.. I used the following code from Calvin Nunes-
$("[name='next']").trigger('click');
Craig.
I'm trying to create a function in javascript that gets an alert to show up when you click the submit button. I managed to get the alert to show but it only pops up when you open the page but doesn't work when you click the submit button.
heres the function i created in javascript
function orderTics(){
//creates alert
var orderTotal=35;
alert("Your order total is $"+orderTotal);
}
I called the function in html like this:
<script>
orderTics();
</script>
I'm still very much a beginner so any and all tips will be greatly appreciated
You can use the below.
$("#FormSelector").on("submit", function() {
//Your code goes here
});
You could use the on submit function like this:
$("form.class-name").on("submit", function() {
alert("I've been submitted.");
});
Vanilla JS onsubmit event:
document.querySelector("form.class-name").addEventListener("submit", function() {
alert("I've been submitted.");
}, false);
You can also use the event.preventDefault(); method to prevent the form from going to another page, like this:
$("form.class-name").on("submit", function(event) {
even.preventDefault();
alert("Do stuff");
});
Vanilla JS onsubmit event with event.preventDefault(); method:
document.querySelector("form.class-name").addEventListener("submit", function(event) {
event.preventDefault();
alert("I've been submitted.");
}, false);
NOTE: when you use the event.preventDefault(); method the form won't redirect to the target page, even if you click the ok button in the alert box.
Finally you can just use the click event on the submit button, like this:
$("button.submit-button-class").on("click", function() {
alert("I've been clicked!");
});
Vanilla JS onclick event:
document.querySelector("button.submit-button-class").addEventListener("click", function() {
alert("I've been clicked!");
}, false);
Call your function like this:
<input type="button" value="myButton" onclick="orderTopics();">
Ok so I have a little issue here,
$("#WhoAreWe").click(function(){
$("#Image").hide();
$("#Two").slideUp(1000);
$("#Third").slideUp(1000);
$("#Fourth").slideUp(1000);
$("#WhoAreWe").hide();
$("#WhoAreWe2").slideToggle(3000);
$("#IDs").slideDown(3000);
$("#main").click(function(){
alert("Pressed Back");
});
(The alert is just a place holder)
Basically the #main is the entire page, and when any point on the site is pressed. It works fine but the problem is that when I first press #WhoAreWe it also runs the $("#main") function. My problem is that whenever WhoAreWe is pressed, main also runs. I don't want this, I just want it to run when the user clicks anywhere on the page AFTER clicking on WhoAreWe.
Edit:
Just to make it clear, #WhoAreWe is a Div (Text).
main is the ENTIRE PAGE
Try this example:
script
$(function(){
$("#main").on('click', function(e) {
if($(this).hasClass('disabled')) {
return;
}
alert('Its main ....');
});
$("#whoAreWe").on('click', function(e) {
alert('Its Who Are We ....');
$("#main").removeClass('disabled');
});
});
html
<input type="button" value="Who are we ?" id="whoAreWe" />
<input type="button" value="Main" id="main" class="disabled"/>
EDIT
script
$(function () {
$("#main").on('click', function (e) {
if ($(this).hasClass('disabled')) {
return;
}
alert('Its main ....');
});
$("#whoAreWe").on('click', function (e) {
e.stopPropagation();
$("#main").removeClass('disabled');
alert('Its Who Are We ....');
});
});
html
<div id="main" class="disabled">
<div id="whoAreWe">Who Are We ?</div>
</div>
Updated: Previously the "clicked" variable wasn't defined globally... now I've changed it to a global variable...
$(document).ready(function (){
var window.clicked=false;
$("#WhoAreWe").click(function(){
$("#Image").hide();
$("#Two").slideUp(1000);
$("#Third").slideUp(1000);
$("#Fourth").slideUp(1000);
$("#WhoAreWe").hide();
$("#WhoAreWe2").slideToggle(3000);
$("#IDs").slideDown(3000);
window.clicked=true;
});
$("#main").click(function(){
if(!window.clicked){
alert("Pressed Back");
}
});
});
guess this should work fine too
$(document).ready(function(){
$('#whoAreWe').on('click', function(){
$(':not(#whoAreWe)').on('click', function(){
$('#main').unbind('click').on('click', function(){
//unbind and bin click to prevent multi bindings
alert('Pressed Back');
});
});
});
});
and take care you have it wrapped in $(document).ready();. You should put all you actions in there.
FIDDLE
DIV-FIDDLE
DIV-FIDDLE waiting
FIDDLE WITH YOUR HTML AS SAMPLE
I am trying to show span but it doesn't work. This is the code that doesn't work:
<script>
$(document).ready(function() {
$('input[type="file"]').ajaxfileupload({
'onStart': function() {
//alert("myAlert");
$(this).siblings('span').show();
}
});
});
</script>
But the span will show when I put alert before it, like this:
<script>
$(document).ready(function() {
$('input[type="file"]').ajaxfileupload({
'onStart': function() {
alert("myAlert");
$(this).siblings('span').show();
}
});
});
</script>
Why is this happening? (I use the plugin: jquery.ajaxfileupload)
Edit:
This is my html code:
<input type="file"/><br/>
<h1>test1</h1>
<span style="display: none;">test3</span>
<h2>test2</h2>
The problem is that your code runs before the DOM structure has finished loading. That causes your script to attempt to change the styles of the span before it has access to the span, so it doesn't do anything at all. To fix this, place your code within a callback, like this:
$(function() {
$('input[type="file"]').ajaxfileupload({
'onStart': function() {
$(this).siblings('span').show();
}
});
});
That will make the code run only after everything has loaded, which will ensure that your script can actually access the element it needs to show. When working with the DOM (which is basically everytime you need to change any HTML element), you need to put your code in such callback function.
Try a direct reference to the span
<input type="file"/><br/>
<button>View Span</button>
<h1>test1</h1>
<span class="myspan" style="display: none;">test3</span>
<h2>test2</h2>
Then
<script>
$(document).ready(function() {
$('input[type="file"]').ajaxfileupload({
'onStart': function() {
$('.myspan').show();
}
});
});
</script>
This must work
I have tried this :
<script type="text/javascript">
$(function() {
$("#button").click( function()
{
alert('button clicked'); // this is calling
setTimeout(function(){
alert('setTimeout'); // this is not calling
document.getElementById('clearTxt').value = "";
}, 9000);
}
);
});
</script>
my HTML code:
<form>
<input type="text" id="clearTxt"/>
<input type="submit" value="Search" id="button" />
</form>
But this code is not working.Please help me to solve this issue.
When I pasted your code into a fiddle, the alert did fire. However the timeout function won't execute because due to the form tags surrounding the inputs, when you click the submit button you navigate away from the page and the timeout doesn't have time to execute. You should either change the submit to a button, or call preventDefault() in the function to stop the form from submitting.
This code works:
HTML:
<form>
<input type="text" id="clearTxt" />
<input type="button" value="Search" id="button" />
</form>
Script:
$(function() {
$("#button").click( function () {
alert('button clicked');
setTimeout(function(){
alert('setTimeout');
document.getElementById('clearTxt').value = "";
}, 5000);
});
});
See http://jsfiddle.net/acfkU/1/
Your code is fine, but you are submitting the form, you can use preventDefault method of the event object and make sure jQuery is loaded in your page.
$("#button").click(function(event) {
event.preventDefault();
//alert('button clicked'); // this is calling
setTimeout(function() {
// alert('setTimeout'); // this is not calling
document.getElementById('clearTxt').value = "";
// $('form').submit();
}, 9000);
});
Instead of adding it to click event you can try adding it on form submit.
function onSubmit() {
alert('button clicked');
setTimeout(function(){
alert('setTimeout');
$('#clearTxt').attr('value',"hi");
}, 5000);
return false;
}
Since your are updating the value attribute directly it will take immediate effect in the UI.
If don't want to add to the onsubmit, better change the type of the button from submit.
override the default submit action (that has a preventDefault method) like below:
$("#yourform").submit(function(event) {
event.preventDefault();
});
Here it is:
HTML
<input type="text" cssClass="textField" id="clearTxt"/>
<input type="button" value="Search" id="button" />
JS
$(function(){
$("#button").click( function () {
alert('button clicked');
setTimeout(function(){
alert('setTimeout');
document.getElementById('clearTxt').value = "hi";
}, 5000);
});
});
Demo JSFiddle