I am trying to show alert and focus on control when user try to leave control without entering any value in the control. This requirement is something like user is forced to enter values (I know there are certain limitations of such requirements).
When user leaves textbox1 alert is shown and at the sametime alert for textbox2 is also displayed as I am trying to focus on textbox1. This becomes infinite loop in IE and both the pop up keep on displaying in IE.
This code works perfectly in chrome but not in any version of ie.
Code sniphet below:
<html>
<head>
<script language="javascript">
function ShowAlertAndFocus1(){
var txt1 = document.getElementById("txtBox1");
if(txt1.value.length == 0){
alert("Blur 1 called");
txt1.focus();
};
};
function ShowAlertAndFocus2(){
var txt2 = document.getElementById("txtBox2");
if(txt2.value.length == 0){
alert("Blur 2 called");
txt2.focus();
};
};
</script>
</head>
<body>
<input type="text" id = "txtBox1" onblur="ShowAlertAndFocus1();"/>
<input type="text" id = "txtBox2" onblur="ShowAlertAndFocus2();"/>
</body>
</html>
I am not sure if am missing something or this limitation is with IE only?
<!DOCTYPE html>
<html>
<head>
<title> x </title>
<script>
function setOnBlur( txtBox,n ){
setTimeout( function(){
if (document.activeElement==txtBox) {
txtBox.onblur=function(){
if (txtBox.value.length == 0){
alert("Blur "+n+" called")
setTimeout( function(){txtBox.focus()},0 )
}
else txtBox.onblur=null
}
}
},0)
}
</script>
</head>
<body>
<input type=text id=txtBox1 onfocus=setOnBlur(txtBox1,1) >
<input type=text id=txtBox2 onfocus=setOnBlur(txtBox2,2) >
</body>
</html>
No Proper Solutions found till now.
EDIT -
Trick - I used two variables and set them inside the methods. I again checked the values before showing the popup.
Basically, your alerts cause the focus to go away as soon as you focus on the text fields. It is an odd behavior in IE that the blur event comes first. Maybe you can try replacing the alerts and try using console.log instead (That would only work in IE 8 & 9 if developer tools are opened). Or best, you can remove the alerts completely. That should work.
<html>
<head>
<script language="javascript">
function ShowAlertAndFocus1(){
var txt1 = document.getElementById("txtBox1");
if(txt1.value.length == 0){
console.log("Blur 1 called");
txt1.focus();
};
};
function ShowAlertAndFocus2(){
var txt2 = document.getElementById("txtBox2");
if(txt2.value.length == 0){
console.log("Blur 2 called");
txt2.focus();
};
};
</script>
</head>
<body>
<input type="text" id = "txtBox1" onblur="ShowAlertAndFocus1();"/>
<input type="text" id = "txtBox2" onblur="ShowAlertAndFocus2();"/>
</body>
</html>
Related
that make up a currency converter, one with the number to be converted, the other receiving the converted number.
My question is: in IE in the input field, an X appears that if clicked allows the deletion of the value. I need to know how I do it (maybe with Javascript) at the click of the X I have to delete the result received in the other input field (see image).
There's no specific event handler available for the clear(X) icon. As a workaround, you can use the mouseup event to catch the change when you clear the input by clicking the clear(X) icon.
Sample code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
input1: <input type="text" id="ipt1" value="111" /><br />
input2: <input type="text" id="ipt2" value="222" />
<script>
$("#ipt1").bind("mouseup", function (e) {
var $input = $(this),
oldValue = $input.val();
if (oldValue == "") return;
// When this event is fired after clicking on the clear button
// the value is not cleared yet. We have to wait for it.
setTimeout(function () {
var newValue = $input.val();
if (newValue == "") {
$("#ipt2").val("");
}
}, 1);
});
</script>
</body>
</html>
Result:
I'm trying to use str.replace in order to remove any non-numerical characters from a number imput field when someone uses copy-pastes something in it. However the function always seems to remove all characters instead of just removing the non-numerical ones.
Surprisingly the function is able to detect when my string is purely numerical and won't change it in those cases, but adding a single other character will cause the whole string to be ditched instead of just removing the wrong characters.
I tried to change the regexp of the function to /\D/, but it didn't amount much.
Here's a minimal reproducible example, which must be run on Firefox.
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
</head>
<body style="margin:0px;">
<script src="../lib/jquery-3.3.1.js"></script>
<input type="number" id="inp"></input>
<script>
let input = document.getElementById("inp");
input.onblur = function()
{
$(document).ready(function()
{
input.value = input.value.replace(/[^0-9]/g, "");
});
}
</script>
</body>
</html>
I expect an output such as "34a01 2" to be "34012", but the actual output is "" (nothing). Is there something wrong in my regexp ?
let input = document.getElementById("inp");
input.onblur = function() {
$(document).ready(function() {
input.value = input.value.replace(/[^0-9]/g, "");
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" id="inp"></input>
This looks to be a Firefox issue (or bug). Whenever a numeric input has non-numeric characters anywhere, the .value of the field will be the empty string:
setInterval(() => {
console.log(input.value);
}, 400);
<input id="input" type="number">
It's unfortunate, but you may have to simply remove the type="number" for the .value to be retrieved and replaced as desired:
let input = document.getElementById("inp");
input.onblur = function() {
input.value = input.value.replace(/[^0-9]/g, "");
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="inp"></input>
Either that, or keep type="number" and tell the user that the value they attempted to paste is invalid, and prevent it (because you have no way of retrieving and replacing it).
(also: only call $(document).ready once, when you're adding the listeners, if at all - your current code is adding a new listener every time the field is blurred)
I've read your comments about Firefox and I've prepared a new version.
Not including the "number" type seems to work.
Using "number" type is not causing any issue in Chrome so I guess that Firefox is not behaving in the same way.
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
</head>
<body style="margin:0px;">
<script
src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha256-pasqAKBDmFT4eHoN2ndd6lN370kFiGUFyTiUHWhU7k8="
crossorigin="anonymous"></script>
<input id="inp"></input>
<script>
let input = document.getElementById("inp");
input.onblur = function() {
input.value = input.value.replace(/[^0-9]+/g, "");
}
</script>
</body>
</html>
I am creating a simple form, and I want to write to the console the value of the input once the form has been submitted and successfully validated. However, when I go to test my current progress, I input a random piece of text and nothing shows up, even in the console. Here is the code I have now (excluding any commented out code):
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script language="Javascript">
window.onload = function() { // So the DOM can be defined
function validateForm() {
var form = document.forms['encrypt']['text'];
if(form == "") {
alert("Enter piece of text to encrypt");
return false;
} else {
console.log(form.value);
}
}
}
</script>
</head>
<body>
<form name="encrypt" action="#" onsubmit="return validateForm()">
Text: <input type="text" name="text">
<input type="submit" name="Submit and Encrypt!">
</form>
</body>
</html>
Even when I type nothing and submit the form, the alert doesn't pop up. There was other posts related to form problems, but they don't have any relation to mine. Is there something wrong with my code? What is the problem and how can I fix it?
Edit: I realized window.onload only executes the code inside of it when the window is loading. After that, all functions cease to exist. In addition to removing the onload handler, I had to relocate the validation function within the body.
Your validateForm function is only visible within your onload function. Additionally, you were comparing the form to an empty string, not the value within the text field in the form. The console.log would also not have been visible, because the page refreshes before you can see it.
Below is the code with those three things fixed.
<html>
<head>
<meta charset="utf-8" />
<script>
function validateForm() {
var text = document.forms['encrypt']['text'].value;
if(text == "") {
alert("Enter piece of text to encrypt");
return false;
} else {
alert("Entered '" + text + "', refreshing now.");
return true;
}
}
</script>
</head>
<body>
<form name="encrypt" action="#" onsubmit="return validateForm()">
Text: <input type="text" name="text">
<input type="submit" name="Submit and Encrypt!">
</form>
</body>
</html>
There's no reason to wrap this function in an onload event handler. And doing so is limiting the scope of the function definition so that the code which tries to call it can't actually see it. (That is, after onload completes, the function you defined is no longer in scope and ceases to exist.)
Just remove the handler and define the function directly:
<script language="Javascript">
function validateForm() {
var form = document.forms['encrypt']['text'];
if(form == "") {
alert("Enter piece of text to encrypt");
return false;
} else {
console.log(form.value);
}
}
</script>
The problem is your function validateForm() is not accessible in the scope when you click the submit. You can verify this by call this function in the console.
In your code, it's defined inside the window.onload, so please move the function out of it.
Try to remove window.onload = function() { and just keep the validateForm function.
So to give a little bit of detail, I'm trying to make an interactive fiction game or text adventure. I have a form where all the "commands" for the game will be typed. I'm working on the first command which is the string "start" to call a prompt. Just to test the code, I have the prompt say "success!" when done correctly. What's happening though, is as soon as I open the web browser to test, the prompt triggers before I even type a command. Here's the code.
<html>
<head>
<script type="text/javascript" src="scripts/engine.js"></script>
</head>
<body>
<form id="testForm"> <input type="text" name="">
</form>
</body>
</html>
And then here's the javascript.
var input = document.getElementById("testForm");
if (input = "start") {
prompt("Success!");
}
Try this:
<html>
<head>
<script type="text/javascript" src="scripts/engine.js"></script>
</head>
<body>
<form id="testForm">
<input type="text" id="myInput">
</form>
<script>
var myForm = document.getElementById("testForm");// get the form element.
var myInput = document.getElementById("myInput");// get the input element
myForm.onsubmit = function() { // when the form is submitted, execute this function.
if (myInput.value == "start") { // if the value of the input equals 'start', show prompt.
prompt("Success!");
}
return false; //return false, so the form doesn't get submitted.
};
</script>
</body>
</html>
Edit:
Added submit event handler, that returns false, so the form does not get submitted.
You need to check the value of the input like so
var input = document.getElementById("inputID");
var value = input.value;
The code will always be ran straight away because it has no event handler. You could add a button which triggers it
document.getElementById('button').addEventListener('click', function () {
var input = document.getElementById("inputID");
if (input.value === 'start') {
// Do something
}
});
Or if you prefer on the forms submit event:
document.getElementById('testForm').addEventListener('submit', function () {
var input = document.getElementById("inputID");
if (input.value === 'start') {
// Do something
}
});
I have a problem, with disabling a input button with javascript in a aspx document at ie.
The js look's like
<script language="javascript" type="text/javascript">
function SetButtonStatus(sender, target)
{
if (searchinput.value.length < 4)
{
document.getElementById(target).disabled = true;
}
else
{
document.getElementById(target).disabled = false;
}
}
</script>
I call the input button with
<input name="searchinput" type="text" value="" id="searchinput" onkeyup="SetButtonStatus(this, 'searchsubmit')" />
In Chrome everything works fine. If i type more then 4 characters in the inputfield, the button will be enabled. But in IE & FF nothing happens... Why? How could i fix this?
You are depending on the non-standard "Create a global variable for every element that has an id" that is supported by Chrome and IE in some rendering modes.
Replace searchinput with sender (since you have defined sender and passed a reference to the element you are interested in already).
<script language="javascript" type="text/javascript">
function SetButtonStatus(sender, target)
{
// use document.getElementById("searchinput") instead of searchinput or in your case can use sender
document.getElementById(target).disabled = document.getElementById("searchinput").value.length < 4;
}
</script>
Why don't you just use jquery it handles all browsers internaly and you don't have to worry about them. Make it like this:
<input name="searchinput" type="text" value="" id="searchinput"/>
<input type="button" value="button" disabled="true" id="buttonSearch"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(function(){
$('#searchinput').keydown(function(e){
var lenght = 3;
if(e.keyCode ==8)
{
lenght = 5;
}
if (searchinput.value.length < lenght)
{
$('#buttonSearch').attr("disabled", true);
}
else
{
$('#buttonSearch').removeAttr('disabled');
}
});
});
</script>