Working on a B-tree form.

[nixnerd]

…because I didn’t use jQuery

I know. You’re a badass like that. I was talking about the overall structure. Looks like a bit of a different approach but it seems more refined to me.

I’m always down to incorporate Vanilla JS where I can. I’m not as fast with it though because I don’t know as much about DOM manipulation with it.

If you needed compatibility with IE < 9, for example.

I don’t. But… that doesn’t mean I necessarily WANT to use jQuery. I’ll feel out both options. I’ll keep and expand on your logic though because I like the way you handled states.

Looks just fine, I thought.

Seems crazy wide to me when on full screen. But… that’s easy enough to fix. Could prove to be awkward depending on how I implement steppers.

My biggest concern is that when the user moves beyond the root level… we’re setting root to display:none. Therefore, I have questions about whether or not the submit button is actually going to submit the root with the given branch. Maybe we could cache it somehow?

[__]

My biggest concern is that when the user moves beyond the root level… we’re setting root to display:none. Therefore, I have questions about whether or not the submit button is actually going to submit the root with the given branch.

Are you just concerned, or are you actually having this problem? It should submit just fine. For example

<form action=? method=post>
<fieldset style="display: none"><input name=displaynone value=hello></fieldset>
<fieldset><input name=displaynormal value=hello></fieldset>
<input type=submit value=submit>
</form>

I see both inputs when I submit the form.

[nixnerd]

Are you just concerned, or are you actually having this problem?

Just concerned. Haven’t even gotten that far (obviously)… so I was just wondering if I was shooting myself in the foot.

I see both inputs when I submit the form.

Huh… so even though it’s removed from the DOM, it still works? Perfect. No more worry needed.

[nixnerd]

Getting this when I try to work on this locally:

TypeError: form is null

Something is messed up on my end and I can’t figure out what it is.

[nixnerd]

…I can’t figure out what it is.

Right… we’re no longer using document.ready so I can’t load the script tag in the head. My bad.

[__]

Huh… so even though it’s removed from the DOM, it still works?

It’s not removed from the DOM, it’s just not displayed — no different than script, style, or input type=hidden, for example. If it were removed, then no, it would not be submitted.

Right… we’re no longer using document.ready so I can’t load the script tag in the head.

You could still do it on document.ready, too. Codepen does that automatically, which is why the pen doesn’t have any problems with it.

[nixnerd]

Gotcha. I’m still parsing through this to see what’s going on. Is there any reason for putting everything in one function? I’m not opposed to this… just never thought to wrap everything in a “parent function.”

[nixnerd]

I’m still parsing through this to see what’s going on.

This is a good exercise for me because I’m EXTRAORDINARILY bad at reading through other people’s code.

[__]

Is there any reason for putting everything in one function?

Encapsulation. It creates a local scope.

[nixnerd]

Encapsulation. It creates a local scope.

Gotcha… but I’m wondering if the reason you did this is because the validation logic will be encapsulated in its own function? That way we don’t have any pollution between the two? Or would you put the validation logic in this function?

[nixnerd]

See here:

//Adds event listener to parent
form.addEventListener( 'click',stateHandler );

Is this for purposes of event delegation?

[__]

Or would you put the validation logic in this function?

Yes, the plan was to add a validation property to each branch object which would control validating the fields on the current branch before allowing the user to move on. I already made a place for this to hook into:

// if there is validation to be done, only continue if it is successful
if( branch[currentState].validation && ! branch[currentState].validation() ){
    return;
}

The assumption was that the validation function would return true if everything passed (and the handler would go ahead an switch to the next branch), or it would return false and we would just stop. If there was anything that needed to be done (error messages, etc.), the validation function would do (or more likely, dispatch) them.

Is this for purposes of event delegation?

Yes, this hooks up click events on the form to the stateHandler function (which only does something if the click was on one of the navigation buttons —specifically, a [data-next] button).

[nixnerd]

Ok… here’s the deal. This project requires JS for other features. Mainly… some nice plugins for pizazz and pop. Plus… I just don’t feel confident enough with vanilla JS yet. I’m going to re-write this using jQuery and follow your logic for the most part. Can’t think of anything I really want to change, but I might do away with some of the objects, as I think it was a mistake on my part to pursue that in the first place.

Anyway, I’m going to work on turning your stuff into jQuery. I’ll post back with questions if I get confused.

BTW, thanks again. This has put me significantly ahead of the game in realizing what I want to do with this stupid form.

Random thought: I wish 20% of my life wasn’t spent on forms.

[nixnerd]

Hey @traq, what are the returns the stateHandler function doing?

[__]

If you mean the return in the validation part, it just keeps the function from continuing if the validation failed. I could have used an else if as easily, but I prefer this style.

As for jQuery, sure. I honestly don’t have anything against it.

[Author]

Posts