Automatically set focus on Text Field- JavaScript?

Posted on 2011-02-22
Last Modified: 2012-05-11
I know this is normally a simple question, but my situation is a little different. (of course)

I am using a plug-in that helps me create forms with conditional logic in Wordpress. You can see the form at a temporary URL, which is

This is important to know, because I don't have any access to the form code itself. I am using a plug-in that creates the code. I can style it using CSS but that's it.

There is a transparent form field just to the left of the words "enter zip code"

I need to bring focus to it, so people can see that it's actually a form. (or maybe somebody has a better idea?)

I tried this in my body:

<body OnLoad="document.gform_1.gform_fields_1.focus();">

but it did not work because the script is targeting the form via the name attribute. The plug-in doesn't give the form a name attribute so it doesn't know what to do.

I need the code for a script where I can use the form ID instead of the name attribute. Someone also told me I could "always use jQuery to dynamically set a name attribute on the form when the page loads."

I am just a mortgage broker and I don't know what any of this means. I don't know what JQuery is...

I guess I'm just looking for a code snippet.

Thank you very much. I appreciate it.
Question by:mikegeorge2
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
LVL 12

Expert Comment

by:Chad Haney
ID: 34954242
try this in the on load

Open in new window


Expert Comment

ID: 34954354
change your body onload for this:

LVL 41

Expert Comment

ID: 34954398
I have seen / experienced a problem with trying to "put focus" on a field.
The way around it?  I needed to have a little tiny delay between the getElementById() and
using that reference to call / invoke the focus() method.

For example, something like:
  // Name: focusOn()
  // Role: Provide a way to delay the field.focus() request
  // Note: The Gecko engine (Mozilla, Firefox, may throw an
  //       uncatchable excption "Permission denied".  This has
  //       supposedly been fixed in Firefox 1.5.1
  function focusOn( id ) {
    var field = document.getElementById( id );
    if ( field ) {
      field.focus();    // May throw "Permission denied" (uncatchable)
    } else {
      alert( 'unknown section id "' + id + '"' );


setTimeout('focusOn("src")',10 );

Open in new window

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!


Author Comment

ID: 34954424
I tried, but it didn't seem to work. Is there a special place that code should be? Right now, I have it in the body.

Author Comment

ID: 34954547
Sorry. I was posting at the same time you guys were. I haven't tried the latest solution (from HonorGod). I'll be right back!

Author Comment

ID: 34954629
HonorGod, I am sorry, but I am not technically savvy enough to fully understand your post.

Should I just cut and paste your code? Where do I put it in relation to the body onload onload="document.getElementById('input_1_1').focus();" ?

Thank you so much.


Accepted Solution

jmnf earned 250 total points
ID: 34954683
do this on the code, after the form </form>, so the form loads first, and then the script that sets focus loads... if that does not work, put it right before the body closes </body>

<script languaje="javascript">

Open in new window


Author Closing Comment

ID: 34954810
Thank you!

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at Browse or search based on font properties or name to find a suitable font for…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

738 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question