Gradually opening html form - javascript

A little web design dilemma: I have a form with a lot of options, mainly radio buttons but not only.
I want the form to open up gradually, meaning at the beginning only two radio buttons are visible, and after the user picks one, more options appear under the chosen radio button. If the user then switches the pick, the page updates and shows the options under the new pick.
This happens on several levels, say 4 or 5 levels, and at the end there is a submit button that submits only certain inputs according to the branches the user chose. Also some of the branches have identical components even though the initial choice was different.
These are the options I could think of:
Build the complete form in the html body and use jquery to hide and show them according to the choices of the user. This means I have to write sections that repeat themselves twice.
Write nothing in the body, and append new elements when the user makes certain choices. This means the JavaScript is more complicated, because I have to make sure nothing appends twice.
Write an HTML skeleton of the form, and use append to fill it. Then use jquery to show and hide elements. This has none of the disadvantages but seems a bit unaesthetic.
Which one should I pick? Any better ideas?

It really comes down to your knowledge of javascript. The cleanest way would be to append to form using javascript. This way you can avoid having duplicates in your form.
If you are not that familiar with javascript and don't know how to append the form, then I would use javascript to show/hide the different parts of the form.
I think using javascript to append would be the correct way, but I don't see anything really wrong with using javascript to just hide parts of the form.

Probably going to use http://wiki.jqueryui.com/w/page/12137997/Menu
or JStree (http://www.jstree.com/) which I found out about from here http://wiki.jqueryui.com/w/page/12138128/Tree

Related

Close all forms with a button in Django

I building a threaded comment system (Reddit-like) in Django 3.0
A comment can have as many replies as possible.
For each comment made, a Reply form is shown below it.
Now, if I don't hide the forms, the page looks very bad, cluttered with textareas.
I need the following:
A 'Reply' button, clicking which the reply form can be displayed/hidden.
Here's what I have tried:
Added a class .replyForm to the forms.
Added a class .hideBtn to the hide Buttons.
Used JQuery:
$(".hideBtn").click(function(){
$(".replyForm").toggle();
});
Now, this works fine, but clicking a reply button opens up all the forms at the same time.
This is expected as the class belonging to each form is the same.
Using Django's template tags I managed to make the id of each form and button unique.
Example: id = "replyForm{{comment.id}}" which renders as replyForm123 if comment.id = 123
But I am not able to use this in any productive way.
I can't access the id outside the for loop (which displays the comments).
I tried adding the JQuery script inside the loop, and created 2 variable, one for the id for the button, and other for the form's id.
But as the loop executes, the variables change accordingly, and finally they store the id's of the last comment only, rendering all the other toggle buttons useless.
I feel that I am complicating things way too much, I am very new to JS and JQuery, and I'am only using them because I couldn't find a pythonic/django-based way for doing this.
Is there a simpler, more elegant way for doing this? Any help is appreciated
Edit 1:
I have found a very simple solution using Bootstrap 4's collapse class, but still want to know the JQuery way of doing this.
Try this:
$(".replyForm").click(function(){
$(this).toggle();
});

ViewModel like validation in AngularJs

I'm having some difficulty envisioning a potential solution to a dilemma I'm facing, and I need some creative inspiration.
Essentially, I'm struggling to picture a good way to validate a form that can be thoughts of as having multiple nested forms. The challenge is that these nested forms are only rendered when a line item in the main form is clicked, causing a modal to open, at which time the rendering, model binding, etc. takes place, and the nested form can be validated.
The goal is to know whether or not there are validation errors down inside any of the main form's line items without having to open/render a modal for the item to find out. I'd also like to make sure that there's no duplication of validation logic, and that things are drawing from a single common set of validations rules that can be shared/accessed everywhere needed.
Ideally, I'd like to abstract out the validation logic such that it can be used by any ng-model bound element, but can also be used independent of rendering a form.
If anyone knows of any plug-ins that work well with AngularJs and sound well suited, please let me know.
Clarification
Though I'm open to checking out any plug-ins that might help, that's not really what I'm after. My main objective to is to find a way to validate my nested item data without opening/rendering the item's modal.
I would use something that ensures that the user fills in these forms in a predefined format in the first place.
I use something called inputmask in my angularJs applications.
You can use a regex to define the format you want the inputs to be in.
You can also make sure that all the fields in the modal are in the right format before letting the user close the modal(This validation logic can come from a shared or common component).
Another option would be to make the modals hidden and not removed from the DOM so that the bindings remain even when the modal is no longer visible. You can add a red asterisk or something against the line which opens the modal to indicate errors in that modal's form.

Creating a carousel-like form using CSS/HTML

I'm, just wondering what the best approach is to create a carousel form like the one shown Here
is. For further explanation, I am looking to create a form where users may input some information, Click next, a transition of some sort will happen, and the form will change to different inputs without leaving the page, similar to a carousel.

Changing html form index when a new form element is added

I am working on an old legacy application which used document.forms[index] approach to access elements in the form and to submit the form. My task is to add a new top panel with few textboxes and buttons. I am using a form for this. This top panel is to be included in all the pages in the application. Now, all the pages stop working since form[index] needs to be updated in all the pages. I know using the form name is the best approach. I have around 1000 places to change. What is the best approach to avoid this problem? I still want to use form for my top panel since I am using spring forms to get the data. Any valuable advice will be appreciated. Thanks.
If you looked up the definition of "unmaintainable", that would be a good example.
One trick might be to leave one set of forms, hidden, with the legacy stuff in them, then make another set, lower in the HTML, that the user sees. Then use some JavaScript to map the data back into the original forms in order to continue to work with the expectations of the legacy code. This keeps everything in the same index-order.

Hide form field, but don't submit in JavaScript

I want to hide some form fields by default, and only reveal in groups them depending on a checkbox.
If a user shows some fields, fills them in, but then rehides them using the checkbox, will the data submit anyway if the fields have something in them or should I empty them using JavaScript?
The fields will send anyway, but your service which is receiving the post should just look for the value of that checkbox and ignore the values at that point. Either that or you will need to clear the fields.
According to the html spec a field is submitted if it meets the following criteria:
It is contained in the form being submitted
It is of type input, select, button
It contains a non-blank name attribute
If it is of <input type="checkbox" or type="radio"/> it must be checked.
Visibility is unimportant. In fact there are many reasons why something may be invisible incluiding being off-screen. Some techniques such as honeypot fields require this.
So to fully answer your question, if some form interaction demands that you only submit what is visible, you can do one of the following:
Move "visible" elements to be children of the form (prefered way) move them to another parent when not visible (after animation hides them). This should be easiest way I think especially if using jquery. Remember for animations, move hidden elements around to appropriate parents, then animate. Furthermore hidden elements can be easily manipulated with minimal performance since the browser does not attempt to re-render them until they are made visible anyways.
Clear out data (lose user input)
Clear out names of input fields, and re-create the names when they are unhidden.
The third technique is a bit much. I'd do either first or 2nd depending on your specific needs with a preference given to the first.
To keep it short and sweet, use javascript to remove the field. This is easy and quick, and you won't have to extend your server side script to determine what went through. If you want too, store the removed html into a global var, so when they toggle the option the script's back. Hope this helps!
If the form is just getting visibly hidden, yes, the data will still submit despite having hidden them. You need to empty them via JS.

Categories