Detecting that a button/submit returning false - javascript

I have this simple javascript:
window.onclick = function test(e) {
if(e.which == 1)
{ if(e.target.type == 'submit')
{ // Actions here
}
}
}
And I have a (submit) button somewhere on the page which has attribute onclick
that returns true on certain conditions and returns false on others.
Is there a way detect when the button/submit button is pressed,
If it is successfully executing all the onClick/onSubmit/onChange attributes attached to it?
Or, if it fails and terminated by any conditions? (in my case, the return false statement)

A workaround solution (by declaring a globally-scoped javascript variable) -
<input type="submit" onclick="SubmitOnClick();" id="myBtn" value="Click" />
javascript code:
<script type="text/javascript">
var g_isSuccessfulSubmit = null;
window.onclick = function test(e) {
if(e.which == 1)
{
if (e.target.type == 'submit')
{
var isSuccessful = g_isSuccessfulSubmit;
g_isSuccessfulSubmit = null;
// Actions here
}
}
}
function SubmitOnClick() {
var isSuccessful = false;
//if (successfully executing)
//{
// isSuccessful = true;
//}
g_isSuccessfulSubmit = isSuccessful;
return isSuccessful
}
</script>

Related

input cannot be empty but console.log is still running

The code is works but how can I stop the console when input empty is? Console side responds in all conditions.
<label>Enter your name: </label> <br>
<input type="text" id="myText"> <br>
<button type="button" onClick="click()"id="myButton">Submit</input>
document.getElementById("myButton").onclick = function() {
var myName = document.getElementById("myText").value;
console.log("Hello", myName);
}
var input = document.getElementById("myText");
addEventListener("keyup", function(event) {
if (event.keyCode === 13) {
event.preventDefault();
document.getElementById("myButton").click();
if (document.getElementById("myText").value.length == 0) {
alert("You must write something!")
return;
}
}
});
The console.log call is inside the onclick function, which you call before you check whether there was any content in the input.
It would make more sense to do your if statement inside the onclick function to get the desired result.
document.getElementById("myButton").onclick = function(){
var myName = document.getElementById("myText").value;
if (myName.length == 0) {
console.log("Hello",myName );
alert("You must write something!")
}
}
var input = document.getElementById("myText");
addEventListener("keyup", function(event) {
if (event.keyCode === 13) {
event.preventDefault();
document.getElementById("myButton").click();
}
});
Because you are checking if myText is empty after print it to console.
I think this should be work :
if (event.keyCode === 13) {
if(document.getElementById("myText").value.length == 0)
{
alert("You must write something!")
return ;
}else{
event.preventDefault();
document.getElementById("myButton").click();
}
}
We need a couple of changes
// JavaScript code needs to run after dom has fully mounted
window.addEventListener('DOMContentLoaded', (event) => {
const myButton = document.getElementById(“myButton”);
const myText = document.getElementById(“myText”);
// event listeners
myButton.addEventListener(“click”, eventForButton);
myText.addEventListener(“keydown”, (e)=> {
if (event.keyCode === 13) {
e.preventDefault();
// if input doesn’t have a value some browsers return null
// that’s why is better to have a falsely comparison
if(!e.target.value) {
alert("You must write something!")
return ;
}
// you need to click the button after the validation, not before as you have it
myButton.click();
}
});
});

in keydown event when press key(40),(38),(13) any of them, then immediately other function will stop.and current function will start

if i press any key of them (38)(40)(13) then immediately other function will stop.and current function will start.like if i press key(40) then function verticalSlideUp() will start.after that if i press key (38) then immediately function verticalSlideDown() will be start.and this verticalSlideUp() function will be stop.
i need help to do this.
This is my jsfiddle.net code here
here is my js code :
var allowed = true;
$(document).keydown(function (e) {
if (e.repeat != undefined) {
allowed = !e.repeat;
}
if (!allowed) return;
allowed = false;
if (controlsEnabled)
{
if (e.keyCode == 38) {
allowed = true;
verticalSlideDown();
console.log("pressed key for Down : "+e.keyCode);
}
if (e.keyCode == 40) {
allowed = true;
verticalSlideUp();
console.log("pressed key for Up: "+e.keyCode);
}
if (e.keyCode == 13) {
allowed = true;
var div= $(".scroll-inner-container");
console.log("pressed key for stop : "+e.keyCode);
div.stop();
}
}
});
I assume those slide functions have some infinite loop. Maybe you can try to have some variable like functionFired and at the beginning of function setting some value and if that loop detects change it will break.

jquery textbox focus event on infinity loop

i am using jquery to validate textbox value.
I have 2 textbox, txt1 & txt2. now, i wrote a jquery function.
$("#txt1").blur(function () {
if ($("#txt1").val() == "") {
$("#scarriername").show();
$("#txt1").focus();
}
else {
$("#scarriername").hide();
}
});
$("#txt2").blur(function () {
if ($("#txt2").val() == "") {
$("#sscaccode").show();
$("#txt2").focus();
}
else {
$("#sscaccode").hide();
}
});
Now, issue is. when i run the project. my position is on txt1 and when u use Tab to go txt2 with null or blank value. Focus event fire for both one & browser become hang due to infinite loop of FOCUS.
so, how can i handle it?
You should insert a setTimeout in order to set the focus after the blur event.
Second, you should insert a semaphore in order to avoid a loop (see code and comments):
var status = "valid"; // semaphore
$("#txt1").blur(function (e) {
// if we are in programmatically focus, ignore this handler
if(status == "invalid")
return ;
if ($("#txt1").val() == "") {
$("#scarriername").show();
// set semaphore
status = "invalid";
// use setTimeout in order to set focus in the right moment
setTimeout(function() {$("#txt1").focus(); status = "valid"},0);
}
else {
$("#scarriername").hide();
}
});
// same as txt1
$("#txt2").blur(function () {
if(status == "invalid")
return ;
if ($("#txt2").val() == "") {
$("#sscaccode").show();
setTimeout(function() {$("#txt2").focus(); status = "valid"},0);
}
else {
$("#sscaccode").hide();
}
});
DEMO http://jsfiddle.net/SszUf/
try this
<input type="text" id="txt1" />
<input type="text" id="txt2" />
$("#txt2").focus(function () {
if ($("#txt1").val() == "") {
$("#scarriername").show();
$("#txt1").focus();
}
//alert(1);
});
hope this help you
Apparently when you hit the tab button you trigger blur event for both text boxes. With your code when txt1 gets blurred and has no content you get the focus on txt1, but when you do that you also trigger the blur event for txt2 and since it does not have any text in it you get the focus back to txt2. This keeps on going and going, focusing on txt1 and then txt2 and then txt1 and then txt2... You could put a simple if check on the second blur event handler to see if txt1 is still empty, and if so keep the focus on txt1 not allowing the client to pass to txt2:
$("#txt1").blur(function () {
if ($("#txt1").val() == "") {
$("#scarriername").show();
$("#txt1").focus();
}
else {
$("#scarriername").hide();
}
});
$("#txt2").blur(function () {
if ($("#txt2").val() == "" && $("#txt1").val() != "") {
$("#sscaccode").show();
$("#txt2").focus();
}
else {
$("#sscaccode").hide();
}
});
This is also one of the approach to solve your problem on pressing tab key.
$("#txt1").bind('keydown',function(e)
{
if(e.keyCode == 9)
{
if ($("#txt1").val() == "") {
$("#scarriername").show();
return false;
}
else {
$("#scarriername").hide();
}
}
});
$("#txt2").bind('keydown',function(e)
{
if(e.keyCode == 9)
{
if ($("#txt2").val() == "") {
$("#sscaccode").show();
return false;
}
else {
$("#sscaccode").hide();
}
}
});
$("#txt1").blur(function () {
if ($("#txt1").val() == "") {
$("#scarriername").show();
if ($("input:focus").length == 0)
$("#txt1").focus();
}
else {
$("#scarriername").hide();
}
});
Just add a line can solve this problem
By the way, the #scarriername should not be something like popup window, which will trigger other blur events
You can test the file below:
<!doctype html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<input id="txt1"><input id="txt2"><input id="txt3"><input id="txt4">
<hr>
<h1 id="h1"></h1>
</body>
<script type="text/javascript">
$(function(){
$("input").blur(function () {
if ($(this).val() == "") {
document.getElementById("h1").innerHTML += "123";
$(this).focus();
}
});});
</script>
</html>

Toggling a function that depends on a button state?

I'm trying to turn a button-click into a toggle that enables or disables a function, depending on its state. The function allows the enter key to be used for a form submission.
var enterToggle = true;
function enterToggleListener(elem) {
enterKeyPress();
elem.click(function() {
enterToggle = !enterToggle;
console.log('enter-toggle clicked')
if (enterToggle === false) {
console.log('enter toggle false')
// What do I need to add here to stop 'enterKeyPress()'?
} else {
console.log('enter toggle true')
enterKeyPress();
}
});
}
function enterKeyPress() {
$('#noteText').keypress(function(e){
if(e.which == 13){
$('#noteButton').click();
}
});
}
enterToggleListener($('#toggle-button'));
What I don't understand is how to stop the enterKeyPress() function when enterToggle is false. Any suggestions?
EDIT: Cleaned-up code, with #James Montagne's answer added
var enterToggle = true;
function enterToggleListener(elem) {
elem.click(function() {
enterToggle = !enterToggle;
if (enterToggle === false) {
$('#enter-toggle').text('Enter key saves note (OFF)')
} else {
$('#enter-toggle').text('Enter key saves note (ON)')
}
});
}
function enterKeyPress() {
$('#noteText').keypress(function(e){
if(enterToggle && e.which == 13){
$('#noteButton').click();
}
});
}
enterKeyPress();
enterToggleListener($('#enter-toggle'));
function enterKeyPress() {
$('#noteText').keypress(function(e){
if(enterToggle && e.which == 13){
$('#noteButton').click();
}
});
}
You can simply check the value of the variable within your handler. This way you don't need to keep adding and removing the handler as seems to be your current approach.
However, if you must add and remove for some reason, you would use off.

Switching a var from true to false

Here is what is supposed to happen:
on button click, the submit of the form is disabled. then a text swap runs. Upon the completion of the text swap, the var of cancel should switch to false and then submit the form.
However, the problem arises when the var cancel fails to switch to false. I am not sure why it won't.
<script type="text/javascript">
var cancel = true;
$("#btn-submit").click(function(){
if (cancel = true) {
$('form').on('submit', function(ev) {
ev.preventDefault();
form = $(".submit-form");
fp = $('#free-planner');
fp.fadeOut(350, function () {
fp.text('Check your email!');
});
fp.fadeIn(350, function() {
var cancel = false;
});
});
}
});
if (cancel = false) {
form.submit();
}
</script>
if (cancel = false) {
should be
if (cancel == false) {
cancel = false is assignment and is always false.
not
if (cancel = true) {...
if (cancel = false) {...
but
if (cancel == true) {...
if (cancel == false) {...
or better:
if (cancel === true) {...
if (cancel === false) {...
You should use comparison instead of assignment inside your if condition statements.
This is what you have...
if (cancel = true) {
and this is how it should look like
if (cancel == true) {
Though you could easily omit the right side of the statement
if(cancel){
<script type="text/javascript">
var cancel = true;
$("#btn-submit").click(function(){
if (cancel) {
$('form').on('submit', function(ev) {
ev.preventDefault();
form = $(".submit-form");
fp = $('#free-planner');
fp.fadeOut(350, function () {
fp.text('Check your email!');
});
fp.fadeIn(350, function() {
var cancel = false;
});
});
}
});
if (!cancel) {
form.submit();
}
</script>

Categories

Resources