Move focus to a text field programmatically on button click
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
-2
I have the following text fields inside a bootstrap modal.
<input id="text_box1" />
<input id="text_box2" />
When a button is clicked, i need to focus the second textbox.
I have tried the following code but doesnot seem to work
function focusSecondBox() {
$('#text_box2').focus()
}
Any idea on how to fix this?
javascript jquery
asked Nov 16 '18 at 11:48
prajeeshprajeesh
468723
add a comment |
-2
I have the following text fields inside a bootstrap modal.
<input id="text_box1" />
<input id="text_box2" />
When a button is clicked, i need to focus the second textbox.
I have tried the following code but doesnot seem to work
function focusSecondBox() {
$('#text_box2').focus()
}
Any idea on how to fix this?
javascript jquery
asked Nov 16 '18 at 11:48
prajeeshprajeesh
468723
did you add the onclick event to button?
– secret super star
Nov 16 '18 at 11:57
Where is your button HTML? And as above, where are you adding the button event?
– Gary Thomas
Nov 16 '18 at 12:09
add a comment |
-2
-2
-2
I have the following text fields inside a bootstrap modal.
<input id="text_box1" />
<input id="text_box2" />
When a button is clicked, i need to focus the second textbox.
I have tried the following code but doesnot seem to work
function focusSecondBox() {
$('#text_box2').focus()
}
Any idea on how to fix this?
javascript jquery
asked Nov 16 '18 at 11:48
prajeeshprajeesh
468723
I have the following text fields inside a bootstrap modal.
<input id="text_box1" />
<input id="text_box2" />
When a button is clicked, i need to focus the second textbox.
I have tried the following code but doesnot seem to work
function focusSecondBox() {
$('#text_box2').focus()
}
Any idea on how to fix this?
javascript jquery
javascript jquery
asked Nov 16 '18 at 11:48
prajeeshprajeesh
468723
asked Nov 16 '18 at 11:48
prajeeshprajeesh
468723
edited Nov 16 '18 at 11:53
prajeesh
asked Nov 16 '18 at 11:48
prajeeshprajeesh
468723
asked Nov 16 '18 at 11:48
prajeeshprajeesh
468723
asked Nov 16 '18 at 11:48
prajeeshprajeesh
468723
468723
did you add the onclick event to button?
– secret super star
Nov 16 '18 at 11:57
Where is your button HTML? And as above, where are you adding the button event?
– Gary Thomas
Nov 16 '18 at 12:09
add a comment |
did you add the onclick event to button?
– secret super star
Nov 16 '18 at 11:57
Where is your button HTML? And as above, where are you adding the button event?
– Gary Thomas
Nov 16 '18 at 12:09
did you add the onclick event to button?
– secret super star
Nov 16 '18 at 11:57
did you add the onclick event to button?
– secret super star
Nov 16 '18 at 11:57
Where is your button HTML? And as above, where are you adding the button event?
– Gary Thomas
Nov 16 '18 at 12:09
Where is your button HTML? And as above, where are you adding the button event?
– Gary Thomas
Nov 16 '18 at 12:09
add a comment |
4 Answers
4
active
oldest
votes
0
Have a look at the working answer below:
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<input id="text_box1" />
<input id="text_box2" />
<button id="btn">Focus Input 2</button>
<script>
$(function() {
$("#btn").off("click").on("click", focusSecondBox);
});
function focusSecondBox() {
$('#text_box2').focus()
}
</script>
</body>answered Nov 16 '18 at 11:56
Gary ThomasGary Thomas
1,6231416
add a comment |
0
You'll want to bind a click event to the button which executes the function which then in turn focuses on the input.
function focusFirstBox() {
$('#text_box1').focus()
}
function focusSecondBox() {
$('#text_box2').focus()
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="text_box1" placeholder="text box 1">
<input type="text" id="text_box2" placeholder="text box 2">
<br />
<button type="button" onclick="focusFirstBox()">focus 1</button>
<button type="button" onclick="focusSecondBox()">focus 2</button>Read more about jQuery's .click() and .focus() binding methods.
answered Nov 16 '18 at 11:58
CueCue
1,023169
add a comment |
0
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#id1").click(function(){
$("#text2").focus();
});
});
</script>
<style>
span {
display: none;
}
</style>
</head>
<body>
<input type="text" id="text1" value="test"/>
<input type="text" id="text2" value="test"/>
<input type="button" value="test" id="id1"/>
</body>
</html>
answered Nov 16 '18 at 11:58
secret super starsecret super star
1,035316
add a comment |
0
First of all get the click event, and after that focus the box.
It would look something like this.
$( "#yourButtonId" ).click(function() {
$( "#text_box2" ).focus();
});
For more information check the documentation of JQUERY in this link:
Jquery focus documentation
answered Nov 16 '18 at 11:55
PapluscPaplusc
3721515
As you can see in the question, this is exactly what i am doing but doesnt seem to work
– prajeesh
Nov 16 '18 at 11:56
@prajeesh in your question you are not getting theclickevent anywhere.
– Paplusc
Nov 16 '18 at 11:59
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53337275%2fmove-focus-to-a-text-field-programmatically-on-button-click%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
4 Answers
4
active
oldest
votes
4 Answers
4
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
Have a look at the working answer below:
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<input id="text_box1" />
<input id="text_box2" />
<button id="btn">Focus Input 2</button>
<script>
$(function() {
$("#btn").off("click").on("click", focusSecondBox);
});
function focusSecondBox() {
$('#text_box2').focus()
}
</script>
</body>answered Nov 16 '18 at 11:56
Gary ThomasGary Thomas
1,6231416
add a comment |
0
Have a look at the working answer below:
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<input id="text_box1" />
<input id="text_box2" />
<button id="btn">Focus Input 2</button>
<script>
$(function() {
$("#btn").off("click").on("click", focusSecondBox);
});
function focusSecondBox() {
$('#text_box2').focus()
}
</script>
</body>answered Nov 16 '18 at 11:56
Gary ThomasGary Thomas
1,6231416
add a comment |
0
0
0
Have a look at the working answer below:
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<input id="text_box1" />
<input id="text_box2" />
<button id="btn">Focus Input 2</button>
<script>
$(function() {
$("#btn").off("click").on("click", focusSecondBox);
});
function focusSecondBox() {
$('#text_box2').focus()
}
</script>
</body>answered Nov 16 '18 at 11:56
Gary ThomasGary Thomas
1,6231416
Have a look at the working answer below:
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<input id="text_box1" />
<input id="text_box2" />
<button id="btn">Focus Input 2</button>
<script>
$(function() {
$("#btn").off("click").on("click", focusSecondBox);
});
function focusSecondBox() {
$('#text_box2').focus()
}
</script>
</body><head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<input id="text_box1" />
<input id="text_box2" />
<button id="btn">Focus Input 2</button>
<script>
$(function() {
$("#btn").off("click").on("click", focusSecondBox);
});
function focusSecondBox() {
$('#text_box2').focus()
}
</script>
</body><head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<input id="text_box1" />
<input id="text_box2" />
<button id="btn">Focus Input 2</button>
<script>
$(function() {
$("#btn").off("click").on("click", focusSecondBox);
});
function focusSecondBox() {
$('#text_box2').focus()
}
</script>
</body>answered Nov 16 '18 at 11:56
Gary ThomasGary Thomas
1,6231416
answered Nov 16 '18 at 11:56
Gary ThomasGary Thomas
1,6231416
answered Nov 16 '18 at 11:56
Gary ThomasGary Thomas
1,6231416
answered Nov 16 '18 at 11:56
Gary ThomasGary Thomas
1,6231416
1,6231416
add a comment |
add a comment |
0
You'll want to bind a click event to the button which executes the function which then in turn focuses on the input.
function focusFirstBox() {
$('#text_box1').focus()
}
function focusSecondBox() {
$('#text_box2').focus()
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="text_box1" placeholder="text box 1">
<input type="text" id="text_box2" placeholder="text box 2">
<br />
<button type="button" onclick="focusFirstBox()">focus 1</button>
<button type="button" onclick="focusSecondBox()">focus 2</button>Read more about jQuery's .click() and .focus() binding methods.
answered Nov 16 '18 at 11:58
CueCue
1,023169
add a comment |
0
You'll want to bind a click event to the button which executes the function which then in turn focuses on the input.
function focusFirstBox() {
$('#text_box1').focus()
}
function focusSecondBox() {
$('#text_box2').focus()
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="text_box1" placeholder="text box 1">
<input type="text" id="text_box2" placeholder="text box 2">
<br />
<button type="button" onclick="focusFirstBox()">focus 1</button>
<button type="button" onclick="focusSecondBox()">focus 2</button>Read more about jQuery's .click() and .focus() binding methods.
answered Nov 16 '18 at 11:58
CueCue
1,023169
add a comment |
0
0
0
You'll want to bind a click event to the button which executes the function which then in turn focuses on the input.
function focusFirstBox() {
$('#text_box1').focus()
}
function focusSecondBox() {
$('#text_box2').focus()
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="text_box1" placeholder="text box 1">
<input type="text" id="text_box2" placeholder="text box 2">
<br />
<button type="button" onclick="focusFirstBox()">focus 1</button>
<button type="button" onclick="focusSecondBox()">focus 2</button>Read more about jQuery's .click() and .focus() binding methods.
answered Nov 16 '18 at 11:58
CueCue
1,023169
You'll want to bind a click event to the button which executes the function which then in turn focuses on the input.
function focusFirstBox() {
$('#text_box1').focus()
}
function focusSecondBox() {
$('#text_box2').focus()
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="text_box1" placeholder="text box 1">
<input type="text" id="text_box2" placeholder="text box 2">
<br />
<button type="button" onclick="focusFirstBox()">focus 1</button>
<button type="button" onclick="focusSecondBox()">focus 2</button>Read more about jQuery's .click() and .focus() binding methods.
function focusFirstBox() {
$('#text_box1').focus()
}
function focusSecondBox() {
$('#text_box2').focus()
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="text_box1" placeholder="text box 1">
<input type="text" id="text_box2" placeholder="text box 2">
<br />
<button type="button" onclick="focusFirstBox()">focus 1</button>
<button type="button" onclick="focusSecondBox()">focus 2</button>function focusFirstBox() {
$('#text_box1').focus()
}
function focusSecondBox() {
$('#text_box2').focus()
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="text_box1" placeholder="text box 1">
<input type="text" id="text_box2" placeholder="text box 2">
<br />
<button type="button" onclick="focusFirstBox()">focus 1</button>
<button type="button" onclick="focusSecondBox()">focus 2</button>answered Nov 16 '18 at 11:58
CueCue
1,023169
answered Nov 16 '18 at 11:58
CueCue
1,023169
answered Nov 16 '18 at 11:58
CueCue
1,023169
answered Nov 16 '18 at 11:58
CueCue
1,023169
1,023169
add a comment |
add a comment |
0
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#id1").click(function(){
$("#text2").focus();
});
});
</script>
<style>
span {
display: none;
}
</style>
</head>
<body>
<input type="text" id="text1" value="test"/>
<input type="text" id="text2" value="test"/>
<input type="button" value="test" id="id1"/>
</body>
</html>
answered Nov 16 '18 at 11:58
secret super starsecret super star
1,035316
add a comment |
0
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#id1").click(function(){
$("#text2").focus();
});
});
</script>
<style>
span {
display: none;
}
</style>
</head>
<body>
<input type="text" id="text1" value="test"/>
<input type="text" id="text2" value="test"/>
<input type="button" value="test" id="id1"/>
</body>
</html>
answered Nov 16 '18 at 11:58
secret super starsecret super star
1,035316
add a comment |
0
0
0
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#id1").click(function(){
$("#text2").focus();
});
});
</script>
<style>
span {
display: none;
}
</style>
</head>
<body>
<input type="text" id="text1" value="test"/>
<input type="text" id="text2" value="test"/>
<input type="button" value="test" id="id1"/>
</body>
</html>
answered Nov 16 '18 at 11:58
secret super starsecret super star
1,035316
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#id1").click(function(){
$("#text2").focus();
});
});
</script>
<style>
span {
display: none;
}
</style>
</head>
<body>
<input type="text" id="text1" value="test"/>
<input type="text" id="text2" value="test"/>
<input type="button" value="test" id="id1"/>
</body>
</html>
answered Nov 16 '18 at 11:58
secret super starsecret super star
1,035316
answered Nov 16 '18 at 11:58
secret super starsecret super star
1,035316
answered Nov 16 '18 at 11:58
secret super starsecret super star
1,035316
answered Nov 16 '18 at 11:58
secret super starsecret super star
1,035316
1,035316
add a comment |
add a comment |
0
First of all get the click event, and after that focus the box.
It would look something like this.
$( "#yourButtonId" ).click(function() {
$( "#text_box2" ).focus();
});
For more information check the documentation of JQUERY in this link:
Jquery focus documentation
answered Nov 16 '18 at 11:55
PapluscPaplusc
3721515
As you can see in the question, this is exactly what i am doing but doesnt seem to work
– prajeesh
Nov 16 '18 at 11:56
@prajeesh in your question you are not getting theclickevent anywhere.
– Paplusc
Nov 16 '18 at 11:59
add a comment |
0
First of all get the click event, and after that focus the box.
It would look something like this.
$( "#yourButtonId" ).click(function() {
$( "#text_box2" ).focus();
});
For more information check the documentation of JQUERY in this link:
Jquery focus documentation
answered Nov 16 '18 at 11:55
PapluscPaplusc
3721515
As you can see in the question, this is exactly what i am doing but doesnt seem to work
– prajeesh
Nov 16 '18 at 11:56
@prajeesh in your question you are not getting theclickevent anywhere.
– Paplusc
Nov 16 '18 at 11:59
add a comment |
0
0
0
First of all get the click event, and after that focus the box.
It would look something like this.
$( "#yourButtonId" ).click(function() {
$( "#text_box2" ).focus();
});
For more information check the documentation of JQUERY in this link:
Jquery focus documentation
answered Nov 16 '18 at 11:55
PapluscPaplusc
3721515
First of all get the click event, and after that focus the box.
It would look something like this.
$( "#yourButtonId" ).click(function() {
$( "#text_box2" ).focus();
});
For more information check the documentation of JQUERY in this link:
Jquery focus documentation
answered Nov 16 '18 at 11:55
PapluscPaplusc
3721515
edited Nov 16 '18 at 12:01
answered Nov 16 '18 at 11:55
PapluscPaplusc
3721515
answered Nov 16 '18 at 11:55
PapluscPaplusc
3721515
answered Nov 16 '18 at 11:55
PapluscPaplusc
3721515
3721515
As you can see in the question, this is exactly what i am doing but doesnt seem to work
– prajeesh
Nov 16 '18 at 11:56
@prajeesh in your question you are not getting theclickevent anywhere.
– Paplusc
Nov 16 '18 at 11:59
add a comment |
As you can see in the question, this is exactly what i am doing but doesnt seem to work
– prajeesh
Nov 16 '18 at 11:56
@prajeesh in your question you are not getting theclickevent anywhere.
– Paplusc
Nov 16 '18 at 11:59
As you can see in the question, this is exactly what i am doing but doesnt seem to work
– prajeesh
Nov 16 '18 at 11:56
As you can see in the question, this is exactly what i am doing but doesnt seem to work
– prajeesh
Nov 16 '18 at 11:56
@prajeesh in your question you are not getting the
click event anywhere.– Paplusc
Nov 16 '18 at 11:59
@prajeesh in your question you are not getting the
click event anywhere.– Paplusc
Nov 16 '18 at 11:59
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53337275%2fmove-focus-to-a-text-field-programmatically-on-button-click%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
did you add the onclick event to button?
– secret super star
Nov 16 '18 at 11:57
Where is your button HTML? And as above, where are you adding the button event?
– Gary Thomas
Nov 16 '18 at 12:09