If i leave it without a keycode it will work with every key but i'm trying to add the "/" key which is keycode "191" and now i can't get it to work. I've even tried using the preventDefault after it and still nothing. How do i properly write it to make it work? Yes i also have the keypress in my input line as well, it's not the problem.
function setFocusToTextBox(field, event) {
if (event.keyCode === 191) {
document.getElementById("order_number").focus();
}
}
</script>
</head>
<body onLoad="document.chip_insert.chip_number.focus();">
<center>
<h1>Jeffers HomeAgain Microchip Entry</h1>
<form name="chip_insert" id="chip_insert" action="<?php echo $PHP_SELF;?>" onsubmit="return validateForm()" method="post" onkeydown="setFocusToTextBox(field, event)">
Order Number: <input tabindex="1" maxlength="12" type="text" name="order_number" id="order_number" value="<?php echo $value; ?>" required="required"onkeydown="return tabOnEnter(this,event)" onfocus="this.focus();this.select()" /><br /><br />
Tag Number: <input tabindex="2" maxlength="15" type="text" name="chip_number" id="chip_number" required="required" /><br /><br />
<input tabindex="7" type="submit" />
</center>
</form>
<br />
<!--End body content -->
</body>
</html>
Try this
window.addEventListener('keydown', keydownCallback);
function keydownCallback(event) {
if (event.keyCode === 191) {
setTimeout(setFocusToTextBox); // setTimeout prevents insertion of slash
}
}
function setFocusToTextBox() {
document.getElementById("order_number").focus();
}
<input id="order_number" placeholder="Press / and I will be focused" size="60">
Press Run Code Snippet
Click somewhere on the area around the input
Press / and the input will be focused.
The working of your snippet is also depends on the event you call from , try to call your function on keydown.
Below is your working code :
document.body.addEventListener("keydown",function(e) {
if (e.keyCode === 191)
alert('Correct');
else
alert('wrong');
});
keyCode may vary for different key events.
Related
On my work-through I tried to implement moving focus from one text field to another by pressing enter. I have found possible answers in the following links:
How to go to next textbox when enter is pressed?
Move Cursor to next text Field pressing Enter
But none of these are working for me. My code:
<script>
$('input[type='text']').keyup(function(e) {
if(e.keyCode == 13) {
$(this).next().focus();
}
});
</script>
<input type='text' />
<input type='text' />
<input type='text' />
<input type='text' />
<input type='text' />
<input type='text' />
$(document).ready(function () {
$('form').on('submit', function (event) {
event.preventDefault();
})
$('input[type="text"]').keyup(function(event) {
if(event.keyCode === 13) {
$(this).next().focus();
}
});
})
<script src="https://code.jquery.com/jquery-3.2.1.slim.js"></script>
<form>
<input type="text"/>
<input type="text"/>
<input type="text"/>
<input type="text"/>
<input type="text"/>
</form>
Just update $('input[type='text']') to $('input[type="text"]'). You had unclosed strings.
Working codepen here.
Here's what's happening:
<!-- Start loading the page -->
<script>
// execute javascript. Note that there
// are no inputs on the page currently - they will be loaded later
// This selector matches nothing:
$("input[type='text']").keyup(function(e) {
if(e.keyCode == 13) {
$(this).next().focus();
}
});
</script>
<!-- JavaScript executed. Now add inputs to the page -->
<input type='text' />
<input type='text' />
What you can do is either move the <script> below the inputs (easiest) or move the keyup listener to a onload function:
$(function(){
// i.e. wrap your js here
// the js here will be executed only after page has loaded
});
My form validator works, but it works in a certain order, if I check the checkbox, it works fine, but if I fill the inputs first and then use the checkbox, it not works, unless I type something in the inputs
$(document).ready(function() {
$('#send').attr('disabled', true);
$('.input,#check').on('keyup', function() {
var text_value = $('.input-cpk').val();
if (text_value !== '' && (document.getElementById('check').checked)) {
$('#send').attr('disabled', false);
} else {
$('#send').attr('disabled', true);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="block oh fr col-9 margem-d2 text-left" action="enviar-calculo.php" method="post" target="votar" name="cpk">
<input type="text" name="nome" id="nome" class="input-cpk col-20">
<input type="number" name="telefone" class="input-cpk-tel">
<input type="submit" value="CALCULAR" id="send" class="f-josefin-s-b f-branca bg-amarelo botao" onclick="output();">
<input type="checkbox" id="check" name="others" />
</form>
You only run your validation code during the keyup event, which only happens on the input boxes. You also need to do validation during a click event on the checkbox.
You can put multiple event names in the argument to .on(), to handle both with the same code.
You also have an incorrect class .input, there are no elements with class="input" in the HTML. I've changed it to .input-cpk.
$(document).ready(function() {
$('#send').prop('disabled', true);
$('.input-cpk,#check').on('keyup click', function() {
var text_value = $('.input-cpk').val();
if (text_value !== '' && (document.getElementById('check').checked)) {
$('#send').prop('disabled', false);
} else {
$('#send').prop('disabled', true);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="block oh fr col-9 margem-d2 text-left" action="enviar-calculo.php" method="post" target="votar" name="cpk">
<input type="text" name="nome" id="nome" class="input-cpk col-20">
<input type="number" name="telefone" class="input-cpk-tel">
<input type="submit" value="CALCULAR" id="send" class="f-josefin-s-b f-branca bg-amarelo botao" onclick="output();">
<input type="checkbox" id="check" name="others" />
</form>
It's because you're using the wrong selector.
Try this
$('input,#check').on('keyup', function() {
Instead of this
$('.input,#check').on('keyup', function() {
Additionally you might want to use the .on('change') instead of .on('keyup')
for some reason it's not validating the isNan code, can you guys help me? But it's validating the not null condition, but is not appearing any pop up when i insert letters
<html>
<head>
<script type='text/javascript'>
function resultado()
{
if(massa.peso.value=="") || (isNaN(massa.peso.value)==false))
alert("Preencha a peso");
if(massa.altura.value=="") || (isNaN(massa.altura.value)==false))
alert("Preencha a altura");
}
</script>
</head>
html:
<body>
<h1>INDICE MASSA CORPORAL</h1>
<form name="massa">
Peso: <input type="text" name="peso">
Altura: <input type="text" name="altura">
<input type="submit" value="Confirmar" onclick="resultado()">
<input type="reset" value="Limpar">
</form>
</body>
</html>
I see that, you are checking isNaN with false rather than true.
isNaN will return true if the parameter is not a number and false if it is a number.
I think it's perfectly working fine(ofcourse with the brackets on). Please find the plunker link https://plnkr.co/edit/rbu7sFhJoKJuFgFqDoFY
function resultado()
{
if((massa.peso.value=="") || (isNaN(massa.peso.value)==true))
console.log("Preencha a peso");
if((massa.altura.value=="") || (isNaN(massa.altura.value)==true))
console.log("Preencha a altura");
}
<body>
<h1>INDICE MASSA CORPORAL</h1>
<form name="massa">
Peso: <input type="text" name="peso" />
Altura: <input type="text" name="altura" />
<input type="submit" value="Confirm" onclick="resultado()" />
<input type="reset" value="Limpar" />
</form>
</body>
To echo to the another answer that you messed up your condition it should be
(massa.peso.value=="") || (isNaN(massa.peso.value)==true)
To add , Also you are using submit event ,not sure what you exactly you want here but if its just front end validaion , you might want to change the button to a regular button or change the default action of onsubmit event
https://jsfiddle.net/hv1nr063/
function resultado(){
let peso = document.getElementsByName("peso")[0]
, altura = document.getElementsByName("altura")[0];
if( !peso.value ){
alert("Preencha a peso");
return;
}
if( !altura.value ){
alert("Preencha a altura");
return;
}
}
<h1>INDICE MASSA CORPORAL</h1>
<form name="massa">
Peso: <input type="text" name="peso" />
Altura: <input type="text" name="altura" />
<input type="submit" value="Confirmar" onclick="resultado()">
<input type="reset" value="Limpar">
</form>
I'm having to dip my toe back in the EE and javascript world after many years. What am I doing wrong here... a simple form being submitted, with a JS block to validate during the onsubmit event of the submit button. The alert("Here") message box does not appear when I submit the form, and the form gets submitted successfully, i.e. HelloForm gets displayed, with blank values, so I'm led to believe that validate() is not being called. I've tried this in both the Eclipse internal web browser as well as Chrome and see the same thing both times. I'm assuming that I don't need to explicitly activate javascript in either browser, as it would be on by default.
<html>
<head>
<script>
function validate()
{
alert("Here");
var x = document.forms["inputForm"].["first_name"].value;
if (x == null || x == "") {
alert("First name must be filled out");
return false;
}
return true;
}
</script>
</head>
<body>
<form name="inputForm" action="HelloForm" method="GET" onsubmit="return validate()">
First Name: <input type="text" name="first_name">
<br />
Last Name: <input type="text" name="last_name" />
<input type="submit" value="Submit The Form" />
</form>
</body>
</html>
In this line will throw a syntax error:
document.forms["inputForm"].["first_name"].value
^^^
The statement is wrong, should be without dot between braces:
document.forms["inputForm"]["first_name"].value
//or
document.forms.inputForm.first_name.value
Working with Objects
You can use Html5 Validations.
<form name="inputForm" action="HelloForm" method="GET" >
First Name: <input type="text" name="first_name" required />
<br />
Last Name: <input type="text" name="last_name" required />
<input type="submit" value="Submit The Form" />
</form>
Working Demo
hi
i want two check two fields
if the value of two fields is same then its shows a message two me i have a code but
its not working can you tell me what worng with this code
<script type="text/javascript">
function checkForm(form1){
if(form1.field1.value == form1.field2.value ){
alert(" values are identical");
form1.field1.focus();
return true;
}else{
return false;
}
}
</script>
<form name="form1" method="POST" action="" >
<input type="text" name="field1">
<input type="text" name="field2">
<input type="submit" onClick="return checkform1(this);" >
</form>
Change your if condition like this
if(document.form1.field1.value==document.form1.field2.value)
You're calling checkform(), but that's not defined anywhere. Also, checkform1(this) uses the button as the element form1, which screws everything up. Use this.parentNode, which passes the form as the argument.
Here's some working code:
<script>
function checkForm(form1) {
if (form1.field1.value == form1.field2.value) {
alert(" values are identical");
form1.field1.focus();
return true;
} else {
return false;
}
}
</script>
<form name="form1" method="POST" action="" >
<input type="text" name="field1">
<input type="text" name="field2">
<input type="submit" onClick="return checkForm(this.parentNode);" >
</form>
You need to add document. in front of your form selections. And your method name is wrong from the method you are calling from your click event.
I've fixed it and included an example here : http://jsfiddle.net/jomanlk/Fu2wJ/1/
function checkForm(form1) {
if (document.form1.field1.value == document.form1.field2.value) {
alert(" values are identical");
document.form1.field1.focus();
return false;
}
else {
return true;
}
}
<form name="form1" method="POST" action="" >
<input type="text" name="field1">
<input type="text" name="field2">
<input type="submit" onClick="return checkForm();" >
</form>
Apart from the fact that checkForm1 function does not exist , the main problem lies in
<input type="submit" onClick="return checkform1(this);" >
Here the this refers to the input and not the form.
To make your code working change the function name to checkForm and
<input type="submit" onClick="return checkform1(this.form);" >