Develop Reference

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

How to check if a button is clicked or not before sending AJAX request using jquery?

I have a button which needs to have been clicked by user before submitting the form which is as:
$('#chooseButton')
.on(
'click',
function() {
console.log("user had pressed the button");
});
I have a submit button which is:
<button id="saveBtn" class="btn btn-success pull-right">Submit</button>
When i click the submit button then the action it goes to here:
$("#saveBtn").click(function (e) {
e.preventDefault();
let allValid = true;
$("form").each(function (index, form) {
allValid = allValid && form.reportValidity();
});
if (!jQuery('#chooseButton').data('clicked')) {
alert("please select the selection");
} else if (allValid && jQuery('#chooseButton').data('clicked')) {
/*$.ajax({
// ajax code to submit
}); */
} else {
}
});
If the button is not clicked,then it shows me alert("please select the selection") but even if the button is clicked,it is showing me same alert. It needs to go to else..if part if button has been clicked,but it is not going in else..if part if button is clicked.How to handle this?

Define a boolean and make it true on click
var clicked="false"
$('#chooseButton')
.on(
'click',
function() {
console.log("user had pressed the button");
clicked=true;
});
$("#saveBtn").click(function (e) {
e.preventDefault();
let allValid = true;
$("form").each(function (index, form) {
allValid = allValid && form.reportValidity();
});
if (!clicked) {
alert("please select the selection");
} else if (allValid && jQuery('#chooseButton').data('clicked')) {
/*$.ajax({
// ajax code to submit
}); */
} else {
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="chooseButton">Click</button>
<button id="saveBtn" class="btn btn-success pull-right">Submit</button>

You can define a variable, And can set a Boolean value to detect the button clicked status, like this,
var chooseButtonClicked = false;
$('#chooseButton')
.on(
'click',
function() {
chooseButtonClicked = true;
});
$("#saveBtn").click(function (e) {
e.preventDefault();
let allValid = true;
$("form").each(function (index, form) {
allValid = allValid && form.reportValidity();
});
if (!chooseButtonClicked ) {
alert("please select the selection");
} else if (allValid && chooseButtonClicked) {
/*$.ajax({
// ajax code to submit
}); */
} else {
}
});

Make a flag variable and set it true on click of button.
var buttonClickFlag = false;
$('#chooseButton')
.on(
'click',
function() {
buttonClickFlag = true;
console.log("user had pressed the button");
});
And Before AJAX call, you can check the value of variable 'buttonClickFlag'. if the value is true then call otherwise not.

The submit button works only once

I developed a function that keeps the submit disabled until filling all the fields. The function works, but when I create two more users the submit button enables before filling the fields; my function works only once.
The button is working and the data is saved, but the submit button is enabled before filling the fields.
$(document).ready(function () {
$('#myForm input').keyup(function () {
var empty = false;
$('#myForm input').each(function () {
if ($(this).val().length == 0) {
empty = true;
}
});
if (empty) {
$('#btnsave').attr('disabled', 'disabled');
} else {
$('#btnsave').attr('disabled', false);
}
return empty;
});
});

i think you create new inputs dynamically, then try this:
$('#myForm').on('keyup', 'input', function () {
var empty = false;
$('#myForm input').each(function () {
if ($(this).val().length == 0) {
empty = true;
}
});
if (empty) {
$('#btnsave').attr('disabled', 'disabled');
} else {
$('#btnsave').attr('disabled', false);
}
return empty;
});
});

How can I fire the unload method when closing the browser?

Observed scenarios:
When closing the browser, the beforeunload event is fired but the unload event isn't fired.
When closing the tab, both the beforeunload event and the unload event are fired.
Question:
How can I fire the unload method when closing the browser?
Code:
var inFormOrLink = false;
var flag = false;
$(document).ready(function () {
$(window).bind("beforeunload", function () {
return "You are about to close the window";
});
$(window).on("unload", function () {
if (!inFormOrLink)
window.open('../Account/Login?admin=admin', "_blank");
});
});
$(function () {
$("a").click(function () {
if (!flag) {
inFormOrLink = true;
$(window).unbind('beforeunload');
$(window).unbind('unload');
}
else {
// inFormOrLink = false;
$(window).bind('beforeunload');
$(window).bind('unload');
}
});
$(".btn").click(function () {
if (!flag) {
inFormOrLink = true;
$(window).unbind('beforeunload');
$(window).unbind('unload');
}
else {
inFormOrLink = false;
flag = false;
$(window).bind('beforeunload');
$(window).bind('unload');
}
});
$("body").keydown(function (e) {
if (e.which == 116 || e.which == 117) {
inFormOrLink = true;
}
else if (e.ctrlKey && e.keyCode == 82) {
inFormOrLink = true;
}
else if (e.which == 8) {
var tag = e.target.tagName.toLowerCase();
inFormOrLink = true;
if (tag != "input") {
e.preventDefault();
}
}
else {
inFormOrLink = false;
$(window).bind('unload');
}
});
});
'

The onunload event theoretically should run in the case you mentioned, however, there are many browsers and each is implemented by a different team. Since you observed a bug in a few browsers, I suggest that you should attach the event handlers to beforeunload instead of unload. In that case you work around the problem. Another possiblity is to run the unload event, like this:
$(window).unload();

Detecting that a button/submit returning false

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>