asked on Trying to set initial focus() to a field so users can just start typing in a form --
I have a Web form built in Gravity Forms that is working quite well, But the users would like me to force Focus into the first field on the form when the form opens. I thought I could do this with a javascript function but it does not seem to work .. I know I am missing something just not sure what - Hopefully someone will see the error of my ways (code) and can point me in the right direction.. The function on keypress works the function to set the focus initially does not. Looking at the .ready documentation, but not sure that is the way I need to go.
[code]
<script type="text/javascript">
jquery(function($){
$('input[name=Badge]').focus();
});
jQuery(function($){
$("form").keypress(function(e) {
//Enter key
if (e.which == 13) {
return false;
}
});
});
</script>
[/code]
[code]
<script type="text/javascript">
jquery(function($){
$('input[name=Badge]').focus();
});
jQuery(function($){
$("form").keypress(function(e) {
//Enter key
if (e.which == 13) {
return false;
}
});
});
</script>
[/code]
Web DevelopmentJavaScriptWordPress
Last Comment
Phonebuff
ASKER CERTIFIED SOLUTION
THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
I have tested your script as posted above and it works for me.
Open your page and press: CTRL+SHIFT+j
That will open Developer Console. There select the Console tab and look for errors elswhere in your page. Upper snippet works.
And better place your jQuery script at the end of the <body> section.
Open your page and press: CTRL+SHIFT+j
That will open Developer Console. There select the Console tab and look for errors elswhere in your page. Upper snippet works.
And better place your jQuery script at the end of the <body> section.
ASKER
Thank you. I will try both of these suggestions tomorrow --
ASKER
Sorry got pulled off to work on something else --
Moved the code to the bottom of the body -- Made no difference --
I am seeing some errors in the console most notably
jQuery.Deferred exception: $ is not a function ??
<script type="text/javascript">
jQuery( document ).ready(function() {
$("input[name=input_13").focus();
});
</script>
ASKER
Found it an it works now -- THANK YOU !!
https://stackoverflow.com/questions/3931529/is-not-a-function-jquery-error
<script type="text/javascript">
jQuery( document ).ready(function($) {
$("input[name=input_13").focus();
});
</script>
Thank you, that makes sense, but it does not work. I still have to use the mouse and set the focus in the first field which I believe to be named input_13 now not Badge.
Here is the code I see for the first field in the View Source option of the browser
[code]
<script type="text/javascript">
jQuery( document ).ready(function() {
$("input[name=input_13").focus();
});
jQuery(function($){
$("form").keypress(function(e) {
//Enter key
if (e.which == 13) {
return false;
}
});
});
</script>
<div id="field_2_13" class="gfield gfield--width-full gfield_contains_required field_sublabel_below field_description_below gfield_visibility_visible" >
<label class='gfield_label' for='input_2_13' >Badge<span class="gfield_required"><span class="gfield_required gfield_required_asterisk">*</span></span></label>
<div class='ginput_container ginput_container_number'>
<input name='input_13' id='input_2_13' type='text' value='' class='small' placeholder='Scan you Badge' aria-required="true" aria-invalid="false" aria-describedby="gfield_instruction_2_13" />
<div class='instruction ' id='gfield_instruction_2_13'>Please enter a number from <strong>999</strong> to <strong>99999</strong>.</div></div></div>
[/code]