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.
Related
I'm working with wordpress.org and have a form created by GeoDirectory plugin. This form has over 20 input fields and looks very big on the page. The plugin doesn't support multi-page functionality so I'm trying to figure this out on front-end.
What I'm trying to figure out is what is the best way to convert the form(all elements visible) to a multi-page form (pagination). It has been suggested to me to use something like Bootstrap Accordion element but I'm skeptical about manipulating the initial form.
What I have though of doing is to create another form which won't have any form submit and take those values and place them in the initial (hidden) form. But I'm also unsure if this is going to work. Let me know for other solutions and tips. My main concern is performance and data loss.
Thanks.
UPDATE:
What I have done so far is to collect the form in a JavaScript array. Then I created a 2d array to hold a section and for each section there is a secondary array that holds form input fields. The 2D array looks like this:
let section1 = [input1,input2,input3];
....
let array = [section1, section2, section3];
I managed to create the visual representation of a multipage form which looks like this:
I'm about to create the functionality for the next / previous buttons and I wanted to ask first if the above solution is applicable. Please let me know if you have any comments that would improve the above solution.
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.
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.
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
For example my SQL has columns 1,2,3,4,5. if the user wants to order the results by say 4,2,5 or 5,1,3,2,4 etc, how should i design my form to ask the user or whats the best way to do this?
one solution comes to mind is a select box with add/remove and up/down button. Is there a better solution?
btw the output result is in a file and not a datagrid.
A good UI for this would be to allow the users to use the mouse to move the items around. For example look at the sortable demo of the jQuery UI.