Blinksale: Easy, painless, online invoicing for small businesses

Request for Form Design Assistance...

I have a form design issue where I'd like to dynamically more the cursor to the first field in a form. However, I'm not sure how to go about doing it based on how I have my page structure designed. If anyone has some insight or assistance in this matter, feel free to respond to this post, in my box, in the blog post, or even by e-mail.

I appreciate it my fellow IB'ers!

----------------------------------------

I've outlined the full issue in more detail here: Request for Help

Posted by bjendrick on Oct 02, 2007 in Show Off | 20 comments

jflint on Oct 02, 2007

I think if you add value="" to the first field, the browser will automatically put the cursor there.

bjendrick on Oct 02, 2007

Tried that... no joy.

jsfreire on Oct 02, 2007

Try to put the script bellow, in your footer include file:

<script language="javascript" type="text/javascript">
  if (document.forms.length > 0) {
    var field = document.forms[0];
    for (i = 0; i < field.length; i++) {
      if ((field.elements[i].type == "text") || (field.elements[i].type == "textarea") || (field.elements[i].type.toString().charAt(0) == "s")) {
        document.forms[0].elements[i].focus();
        break;
      }
    }
  }
</script>

soprano on Oct 02, 2007

Try adding this to each page separately. (Like, at the end of the <body>.)

<script>
  window.onload = function() {
    document.getElementById("ELEMENT_ID").focus();
  };
</script>

(Where ELEMENT_ID is the id of the text field.)

soprano on Oct 02, 2007

@jsfreire: What is field.elements[i].type.toString().charAt(0) == "s" supposed to be for? Strings?!

And also, I should have added a type="text/javascript" to my <script> tag.

bjendrick on Oct 02, 2007

@jsfreire: I place that above the ending BODY tag correct? I've done that, but not having any luck. I wonder if somehow I've made my pages more complex than most.

@soprano: Adding that to every form page isn't possible, unless I bury it inside the BODY tag before the end of the page. Simply because I close the page tags & such in the footer.

soprano on Oct 02, 2007

(The difference between jsfreire's script and my script is that his finds the first field, whereas mine lets you specify which one you want.)

@jsfreire: Also, you should check the tag name for textarea, not the type attribute.

HSOY on Oct 02, 2007

Here is a way to set the focus on any specific field in a form:

<script language="JavaScript">
document.FormName.FieldName.focus();
</script>

bjendrick on Oct 02, 2007

@soprano: Well, I placed it above my footer include, and it worked! I'll just place it in each form page, and for now, that's perfect. But any other suggestions are greatly appreciated.

bjendrick on Oct 02, 2007

Should jsfriere's script theoretically work? If so, that would certainly be handy in not needing to add script to each form page, but I'm not above fixing a handful of pages at this point. Let me know.

jsfreire on Oct 02, 2007

@soprano:
What is field.elements[i].type.toString().charAt(0) == "s" supposed to be for? Strings?!
It's for selects
Also, you should check the tag name for textarea, not the type attribute.
The type attribute works well...

@bjendrick: I've tested the script and it works very well focusing on the first form field. Is there a way to access your page? Or you could to show the entire page code too... so we could to find where is the problem.

soprano on Oct 02, 2007

Change the if statement in jsfreire's script to the following, and it should work.

if ((field.elements[i].type.toLowerCase() == "text") || (field.elements[i].type.toLowerCase() == "password") || (field.elements[i].tagName.toLowerCase() == "textarea")) {

All that is one line.

bjendrick on Oct 02, 2007

Tried posting it here, but it's not playing nice. Let me load it for viewing, and then maybe you can help more. Thank you for looking into this.

soprano on Oct 02, 2007

Tried posting it here, but it's not playing nice.

Huh? You tried posting the address?

bjendrick on Oct 02, 2007

Nevermind... found it! Needed to call the placeFocus() function with the Onload event for the body. As soon as I added that, it works wonders.

Thank you, Thank You, THANK YOU!

What can I say? It's the little things. ;)

jsfreire on Oct 02, 2007

@bjendrick: There are two ways to deal with this...

1) put the function placeFocus() inside html HEAD and call the function with the onload event for the body; or

2) put the whole script without a function above </BODY>

soprano on Oct 02, 2007

Always glad to help.

bjendrick on Oct 02, 2007

@soprano: No, I had tried posting the code directly in here, and IB isn't setup to use the "pre" or "code" tags.

And it looks like the version of code I grabbed still had the function name in it. Whereas what's showing now doesn't have that... so I must have been quick on my refresh.

bjendrick on Oct 02, 2007

@jsfriere: Changed it to a standard unnamed function, and removed the event handler, and it's working great. Thank you. Very slick, and I'll be sure to use this in other sites as well.

soprano on Oct 02, 2007

@jsfreire: No, the correct syntax for a textarea is to use a textarea tag.