Avatar of Phonebuff
Phonebuff
Flag for United States of America 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]



Web DevelopmentJavaScriptWordPress

Avatar of undefined
Last Comment
Phonebuff

8/22/2022 - Mon
ASKER CERTIFIED SOLUTION
Zvonko

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.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
Phonebuff

ASKER

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]


Zvonko

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.
Phonebuff

ASKER

Thank you.  I will try both of these suggestions tomorrow -- 
This is the best money I have ever spent. I cannot not tell you how many times these folks have saved my bacon. I learn so much from the contributors.
rwheeler23
Phonebuff

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>


Phonebuff

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>