Can somebody tell me how to focus the html textfield using JavaScript? I am a total novice in programming and just starting to learn. I have here the code in which I want to set the cursor in the textfield.
test.html
<html>
<head>
<script type='text/javascript'>
function parseTest() {
var elem_1 = document.getElementById('input_1');
var elem_2 = document.getElementById('input_2');
var inp_1 = elem_1.value;
var inp_2 = elem_2.value;
if (inp_1 == "" && inp_2 == "") {
alert("You need to enter integers!!!");
elem_1.focus();
}else if (inp_1 == ""){
alert("You need to enter Integer 1!!!");
elem_1.focus();
}else if (inp_2 == ""){
alert("You need to enter Integer 2!!!");
elem_2.focus();
}else {
if (!parseInt(inp_1) || !parseInt(inp_2)) alert ("Enter Integers only!!!");
else alert("Correct Inputs!!!");
}
}
</script>
</head>
<body>
<form name="myform">
<input type="text" id="input_1" name="input_1" /><br />
<input type="text" id="input_2" name="input_2" /><br />
<input type="submit" value="Check!" onclick="parseTest();" />
</form>
</body>
</html>
I am a total novice so please be patient. Please help...
Can somebody tell me how to focus the html textfield using JavaScript? I am a total novice in programming and just starting to learn. I have here the code in which I want to set the cursor in the textfield.
test.html
<html>
<head>
<script type='text/javascript'>
function parseTest() {
var elem_1 = document.getElementById('input_1');
var elem_2 = document.getElementById('input_2');
var inp_1 = elem_1.value;
var inp_2 = elem_2.value;
if (inp_1 == "" && inp_2 == "") {
alert("You need to enter integers!!!");
elem_1.focus();
}else if (inp_1 == ""){
alert("You need to enter Integer 1!!!");
elem_1.focus();
}else if (inp_2 == ""){
alert("You need to enter Integer 2!!!");
elem_2.focus();
}else {
if (!parseInt(inp_1) || !parseInt(inp_2)) alert ("Enter Integers only!!!");
else alert("Correct Inputs!!!");
}
}
</script>
</head>
<body>
<form name="myform">
<input type="text" id="input_1" name="input_1" /><br />
<input type="text" id="input_2" name="input_2" /><br />
<input type="submit" value="Check!" onclick="parseTest();" />
</form>
</body>
</html>
I am a total novice so please be patient. Please help...
Share edited Feb 6, 2022 at 17:03 Brian Tompsett - 汤莱恩 5,89372 gold badges61 silver badges133 bronze badges asked May 2, 2011 at 8:34 Newbie CoderNewbie Coder 11k19 gold badges42 silver badges53 bronze badges 3- 1 your code will focus the input box...what exactly is the issue? – ampersand Commented May 2, 2011 at 8:39
- You say something about focus and later you say something about putting the cursor on top of the textboxfield which of these do you want to achieve? – Ruben Commented May 2, 2011 at 8:39
- The issue is its not working... I don't know why... – Newbie Coder Commented May 2, 2011 at 8:42
2 Answers
Reset to default 4This code does that - however, right afterwards, it submits the form and redisplays the page, that's why you don't see the focus happening.
Simply add a return false; to your function call in onclick, like so:
<input type="submit" value="Check!" onclick="parseTest(); return false;" />
In fact, you dont want to submit after each button click.
You can do it another way:
1. If you want just check input, without subiting the form: use "button" input type
<input type="button" value="Check!" onclick="parseTest();" />
2. if you want submit if all is correct: use it like this:
<html>
<head>
<script type='text/javascript'>
function parseTest() {
var elem_1 = document.getElementById('input_1');
var elem_2 = document.getElementById('input_2');
var inp_1 = elem_1.value;
var inp_2 = elem_2.value;
if (inp_1 == "" && inp_2 == "") {
alert("You need to enter integers!!!");
elem_1.focus();
}else if (inp_1 == ""){
alert("You need to enter Integer 1!!!");
elem_1.focus();
}else if (inp_2 == ""){
alert("You need to enter Integer 2!!!");
elem_2.focus();
}else {
if (!parseInt(inp_1) || !parseInt(inp_2)) alert ("Enter Integers only!!!");
else
{
alert("Correct Inputs!!!");
return true;
}
}
return false;
}
</script>
</head>
<body>
<form name="myform">
<input type="text" id="input_1" name="input_1" /><br />
<input type="text" id="input_2" name="input_2" /><br />
<input type="submit" value="Check!" onclick="return parseTest();" />
</form>
</body>
</html>