Using click event while button is disabled - javascript

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");
});

Related

jquery javascript click function from within a function

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.

Form still submits, trying to use e.preventDefault();

So I have this form. I want to check if user has validaty the captcha, but have problems. Here is the form, that checks the function.
<form data-id="embedded_signup:form" id="myForm" class="ctct-custom-form Form" name="embedded_signup" method="POST" action="https://visitor2.constantcontact.com/api/signup" onsubmit="check_if_capcha_is_filled()">
Here is the function that determines whether doSubmit (the captcha) has been validated.
function check_if_capcha_is_filled(e){
if(doSubmit) return true;
e.preventDefault();
alert('Fill in the capcha!');
return false;
};
But I get an error
Uncaught TypeError: Cannot read property 'preventDefault' of undefined
at check_if_capcha_is_filled
Any pointers to what I am missing? Thank you.
Your e.preventDefault is being used incorrectly. It will do nothing because you're passing an event to a function, you want to attach it to the event handler like this:
$('form').on('submit', function(e)
{
e.preventDefault();
//rest of code
})
this will stop the submit action.
refs: http://api.jquery.com/event.preventDefault/
Is this what you want?
<form data-id="embedded_signup:form" id="myForm" class="ctct-custom-form Form" name="embedded_signup" method="POST" action="https://visitor2.constantcontact.com/api/signup">
Then in your js file:
function check_if_capcha_is_filled(){
if (doSubmit){
return true;
}else{
return false;
}
};
$('#myForm').on('submit', function(e){
if (!check_if_capcha_is_filled){
e.preventDefault();
}
});
You have two issues here. Firstly you need to return the function from the onsubmit event attriubute. Secondly, you're not passing the event in to the function - however this will only work where a global event is available, ie. not Firefox.
To fix the issue, and improve your logic, you can instead use addEventListener() to unobtrusively add the event handler to the element, and remove the outdated on* event attribute. Try this:
var doSubmit = false;
document.getElementById('myForm').addEventListener('submit', function(e) {
if (doSubmit)
return;
e.preventDefault();
alert('Fill in the capcha!');
});
<form data-id="embedded_signup:form" id="myForm" class="ctct-custom-form Form" name="embedded_signup" method="POST" action="https://visitor2.constantcontact.com/api/signup">
<button type="submit">Submit</button>
<form>
Use on event listener
change it to
<form data-id="embedded_signup:form" id="myForm" class="ctct-custom-form Form" name="embedded_signup" method="POST" action="https://visitor2.constantcontact.com/api/signup" >
$('form').on('submit', function(e){
// validation code here
if(!valid) {
e.preventDefault();
}
});
Using jQuery and if you want to confirm the submit.
<button name="delete" class="submitbutton">Delete</button>
$('.submitbutton').click(function() {
var buttonpressed;
buttonpressed = $(this).attr('name');
var r = confirm("Please confirm to " + buttonpressed );
if (r == true) {
$('#yourformid').submit();
} else {
return (false);
}
});

using keypress and click for submit

How do I make a click event and keypress work in the same if statement?
Right now I have :
if($('.test').is(':visible;)){
$('button').click(function(e){
..do something here
}else {
..do something here
});
.test is the value field that when the user puts in the value I want them to be able to click the enter key, while they are in this box to submit the information or use the button to do so. This is not in a form, they are all in divs.
So put the logic into a common function and call it for click and keypress.
(function () {
function yourLogic () {
$(".out").text($(".yourInput").val());
}
$("button").on("click", yourLogic);
$(".yourInput").on("keyup", function (evt) {
if (evt.which===13) yourLogic();
});
}());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="yourInput" />
<button>Click</button>
<div class="out"></div>
or do not use a common function and call the click() event on the button.
$(".yourInput").on("keyup", function (evt) {
if (evt.which===13) $("#yourButton").trigger("click");
});
If you got a form, then bind submit handler:
$("form").submit(function(e){
e.preventDefault();
// your event handler here
});
It will be triggered when you press enter to submit the form, and when you click submit button at the same time.
You can use it like this:
$("input").keypress(function(event) {
if (event.which == 13) {
event.preventDefault();
$("form").submit();
}
});
Or simply click on background
$(document).keypress(function(e) {
if(e.which == 13) {
$('button').trigger("click");
}
});
//if($('.test').is(':visible;)){
$('button').on("click",function(e){
alert("click or enter");
e.stopPropagation();
});
// }
// else {
// ..do something here
//}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<button>CLick me</button>

Run button click event only once further clicks needs to be forwarded to other function

I have a button as follows
<input type="button" id="btn" value="Click Me" />
and I have 2 functions
function event1(){
alert("1st Time Clicked");
}
function event2(){
alert("Further Clicks");
}
I want to run event1 function for 1st time when the user clicks on that button and for subsequent requests I need to run event2 function.
I tried the following way
$(document).ready(function(){
$("#btn").one("click",function(){
event1();
});
});
But I can't figure it out how to run event2 function for further clicks.
How Can I do that in Jquery ?
I created Jsfiddle = http://jsfiddle.net/rajeevgurram/d9Z3c/
In the first click handler(using .one()), register a normal click handler so that further clicks will trigger that handler
$(document).ready(function () {
$("#btn").one("click", function () {
event1();
$(this).click(event2)
});
});
Demo: Fiddle
I like booleans so I use
$(document).ready(function(){
var clicked = false;
$("#btn").on("click",function(){
if(!clicked) {
event1();
clicked = true;
} else {
event2();
}
});
});
P.S. I just wanted to be different from the first answer. XD

Prevent onclick execution with jquery

UPDATED
Html Code:
<input type="textbox" id="textbox" value="">
<input type="button" id="btn" value="Validate" onclick="document.write('VALIDATION PASSED')" />​
JS Code:
$(document).ready(function() {
$("#btn").click(function() {
if ($("#textbox").val().length == 0) {
alert("Validation error");
return false;
}
}).prop("onclick", null );
})​
I have updated my code. So the issue is that after first click my onclick event stopped working. How I could fix it?
P.S. Please DO NOT change html code. I have some reasons to ask about it, but please could you please do it only with javascript? I realize that probably this is not the most easy way but I have some technical limitations in my application.
Thanks!
JSFiddle http://jsfiddle.net/B5GWx/12/
$(document).ready(function() {
$("#btn").click(function() {
alert("Want to show only this message");
return false;
}).prop("onclick", null );
})​
http://jsfiddle.net/B5GWx/5/
You can't reliably, cross-browser, use a DOM2 handler to prevent a DOM0 handler from running.
What you can do, though, is remove the DOM0 handler entirely:
$(document).ready(function() {
var btn = $("#btn");
btn.click(function() {
alert("Want to show only this message");
return false;
});
btn[0].onclick = null; // <==== Here
})​;
Just removing the DOM handler will do the job. No need to return false; or e.preventDefault();
$(document).ready(function() {
$("#btn").click(function(e) {
alert("Want to show only this message");
}).prop("onclick", null );
})​
DEMO
You are looking for preventDefault
Description: If this method is called, the default action of the event will not be triggered.
$(document).ready(function() {
$("#btn").click(function(e) {
alert("Want to show only this message");
e.preventDefault();
})
})​

Categories