Form Field Input One After Another

I am creating a form wizard that guides the user through each form element, showing a tooltip describing each element. What I am trying to accomplish is:

• Keep each form field disabled, excluding the form field the user is currently filling out.
• When the user wants to continue onto the next field, they need to click on the tooltip for the field they're currently on. Also, the field needs to be non-empty to advance.

I have the tooltip appearing correctly, and it vanishes upon click. What I can't figure out is how to say in JavaScript code: "Has the user entered data into the current field and clicked on the tooltip to advance? Okay, then continue onto the next field until we've reached the submit button. Otherwise, stay here on the current field."

Here is my code:

function prepareForm() {
  var inputs = document.getElementsByTagName("input");
  for (var i = 0; i < inputs.length; i++){
      if (i !== 0){
          inputs[i].disabled = "disabled";
      }
      // Make sure the tooltip tag is present...
      if (inputs[i].parentNode.getElementsByTagName("span")[0]) {
          inputs[i].onfocus = function () {
              this.parentNode.getElementsByTagName("span")开发者_开发知识库[0].style.display = "inline";
          }

          // When the user has entered information and clicked the tooltip, continue onto the next field.
          inputs[i].parentNode.getElementsByTagName("span")[0].onclick = function () {
              this.parentNode.getElementsByTagName("span")[0].style.display = "none";
          }
      }
  }
}
window.onload = prepareForm;  

I've tried entering other logic in the onclick function, but because it gets executed at any time, I don't have access to the inputs array. Any help on how I can accomplish this would be really appreciated. Thanks!

---

As you said that you are comfortable with jQuery,I created this fiddle for you.As i dont know how are you showing the tool-tip,let me know if mine is not the one you are using.This example can help you start and add your own requirements.

---

I would not recommend this. You are changing the default behavior of forms... with little or no benefit for the end user.

In addition you are forcing the users to do additional work between fields clicking on non-form field elements.

This fails basic usability and will only confuse users. On a side note, if you haven't read "Don't Make Me Think" by Steve Krug please check it out at your earliest convenience - it is chock full of eye opening details about why "inventing" new UI concepts is often a bad idea.

Update: So I think its only fair that I provide a different recommendation based on the information given about this form being very much a hand-holding exercise.

Thus based on the need to control input field by field, I think the only way to do so in a usable way would be to provide this as a wizard, one field per page. There are some added benefits to this in that if a decision is made in an early step that negates the need for a future step it can be omitted completely.

As a result I envision a form where there is a Previous/Next button at the bottom of each step (where applicable... e.g. step 1 would have no previous). The Next button would start disabled and only enable itself when the user has put input into the field on that page. When each step is shown, the focus should automatically be put into the field to enable quicker entry.

If possible, a progress bar or % complete indicator can be added to give the user a better understanding of how many steps remain.

Pros/Cons to this approach.

Pros:

• The user does not need to click anywhere to enable a valid transition to the next field
• No fields are disabled causing user confusion (except the Next button which is expected)
• The user can focus on the one field that matters at that moment (e.g. phone number) and there is plenty of room for instructions/help
• If step 1 is asking for say "Gender" and the user selects "Male" then step 6 that asks if the user has ever been pregnant can be skipped/auto-answered
• If the user wants to go back they can
• The user can't "accidentally" get to the next field without filling out the previous field
• The user will be familiar with this style/behavior of wizard, this is fairly typical of many wizards/installers

Cons:

• User can not see all questions at once
• User can not enter field values out of order
• User can not simply tab from field to field thus the overall form will be slower for advanced users vs. a single form