Solved

Automatically set focus on Text Field- JavaScript?

Posted on 2011-02-22
8
413 Views
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 http://highlifegourmet.com

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.
0
Comment
Question by:mikegeorge2
8 Comments
 
LVL 12

Expert Comment

by:Chad Haney
Comment Utility
try this in the on load
document.getElementById("input_1_1").focus();

Open in new window

0
 
LVL 4

Expert Comment

by:jmnf
Comment Utility
change your body onload for this:

onload="document.getElementById('input_1_1').focus();"
0
 
LVL 41

Expert Comment

by:HonorGod
Comment Utility
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, et.al.) 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

0
 

Author Comment

by:mikegeorge2
Comment Utility
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.
0
How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

 

Author Comment

by:mikegeorge2
Comment Utility
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!
0
 

Author Comment

by:mikegeorge2
Comment Utility
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.

0
 
LVL 4

Accepted Solution

by:
jmnf earned 250 total points
Comment Utility
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">
    document.getElementById('input_1_1').focus();
</script>

Open in new window

0
 

Author Closing Comment

by:mikegeorge2
Comment Utility
Thank you!
0

Featured Post

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

762 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

Need Help in Real-Time?

Connect with top rated Experts

6 Experts available now in Live!

Get 1:1 Help Now