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
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 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 :)
I want to cancel change event of a text box on keypress then I want to trigger it on button click.
This is example of my HTML
$('#btn1').on('click', function() {
var target = '#test';
$(target).on("change");
$(target).focus();
$(target).val('HELLO').trigger('change');
});
$("#test").change(function(event) {
alert($(this).val())
});
$('#test').on('keypress', function(event) {
if (event.keyCode === 13) {
event.stopImmediatePropagation();
$(this).off("change");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="test" />
<input type="submit" id="btn1" value="BUTTON1" />
but it is not firing change event.
Please suggest.Thanks in advance.
JSFiddle
i think you forget add "event" in javascript code
replace :
$('#test').on('keypress', function() {
event.stopImmediatePropagation();
$(this).off("change");
});
with:
$('#test').on('keypress', function(event) {
event.stopImmediatePropagation();
$(this).off("change");
});
$('#btn1').on('click', function () {
var target='#test';
$(target).on("change",changeText($(target)));
$(target).focus();
$(target).val('HELLO').trigger('change');
});
function changeText($this) {
alert($this.val())
}
$('#test').on('keypress', function (event) {
event.stopImmediatePropagation();
$(this).off("change");
});
event was not in function param and trying to use propogation https://jsfiddle.net/0624eq86/20/
function test(val){
alert(val);
}
$('#btn1').on('click', function() {
var target = '#test';
$(target).focus();
$(target).val('HELLO').trigger('change');
$(target).on("change", test($(target).val()));
});
$('#test').on('keypress', function(event) {
event.stopImmediatePropagation();
$(this).off("change");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="test" />
<input type="submit" id="btn1" value="BUTTON1" />
Please check the answer, I hope this will work for you.
I have created a function test, which is called when I ON the change event on click function.
I need to check on clicks while the button is disabled is this possible? Or is there any other way to this?
HTML:
<form id="form">
<input type="submit" id="submit" value="Submit" />
</form>
JS:
$("#form").submit(function (e) {
e.preventDefault();
return false;
$("#submit").on("click", function () {
alert("Bla");
});
});
JS Fiddle: http://jsfiddle.net/hjYeR/1/
When you are using preventDefault(), there is no need to use return false.
However, any code after return statement in a function, won't execute.
Also there is no need to attach an event inside another event, write them separately:
$("#form").submit(function (e) {
e.preventDefault();
});
$("#submit").on("click", function () {
alert("Bla");
});
jsFiddle Demo
After you return false; the rest of your function will not run. You can bind your click event before returning false and it should work.
return statements are the end point in the function, the codes will not proceed ahead of that.
What you can do is simply remove the click event handler from within the submit handler itself.
$("#form").submit(function (e) {
return false; //e.preventDefault(); is not needed when used return false;
});
$("#submit").on("click", function () {
alert("Bla");
});
What I am trying to do is following:
I have an input type button and I want to replace it's function on first click.
<input type="submit" class="submit-button" value="Submit" name="boom" />
So a [button] that serves for submit, I wanna show alert with some jquery plugins but lets do it here with normal javascript alert (default window).
So on first click it will be
alert('Something');
And on second click it will be default function (submit).
How can I achieve something like this?
Of course if button is clicked once, and then page reloaded, it will show same alert again on first button click.
Use one().
Attach a handler to an event for the elements. The handler is executed at most once per element.
Example:
$(".submit-button").one("click", function(e) {
// will only run on first click of element
e.preventDefault();
alert("Something");
});
Try this:
<script type="text/javascript">
var clicked = false;
function btnClick(e) {
if(clicked === false) {
alert('Something');
clicked = true;
e.preventDefault();
return true;
} else {
return false;
}
}
</script>
<input type="submit" onclick="btnClick(event)" class="submit-button" value="Submit" name="boom" />