Question

I’m creating a form on a web page, but I want that form to change as a user inputs values.

Example: If we have a drop down menu: ObjectType

And someone chooses Cars when that selected I’d want new options below to show up. Say, Make, Model, Year, & Notes.

Whereas, if that person chooses Vegetables then maybe all I want is a checkbox for Root Vegetables.

My question is what is the best way to do this. My form is pretty intricate and is going to have perhaps 20 different possible set ups, but I want those set ups to be sorted. I used appendChild() with AJAX requests, but I just ended up with out of order fields. And on top of that, the occasional slow connection keeps an individual waiting for a field to show up.

Rather than loading HTML pages with these form objects (technically part of a table), should I be keeping all of this stuff in an array? Is it possible to just load one HTML page or XML object and use selectElementById() on that result after it has been saved?

The objects I’m loading are rows, here’s an example of one and what it would need to be able to do:

<td>
    <strong>Abilities:</strong>
</td>
<td>
    <textarea 
        id ='abilities' 
        name="abilities" 
        style="width:100%" rows="4"  
        onchange='userCreation.updateAbilities()'
        onkeyup='userCreation.updateAbilities()'>
    </textarea>
</td>

I have a table in my page, I was creating a new tr element with JavaScript, setting this as the innerHTML and then appending the child. Is there a better way to do this?

Answer 1

I would just put all of the form elements in a page, and hide the ones you’re not using with CSS. That way you maintain order, and don’t have to wait for fields to show up. It will slightly slow down page load time, but make your life a lot simpler.

Otherwise, I’d store the name (or whatever) of each field in an array or object, and when it comes time to AJAX load it, look up its position first and put it there.