Hopefully a straight forward one:
I would like to write some javascript code to receive multiple inputs for multiple variables from the user. A bit like a prompt but for three options (so kind of like 3 prompts on one box).
Suggestions for the best way of going about this?
Create a form with necessary fields and place a JavaScript handler on its "submit" button.
Either create it in HTML and query elements by their ids or create directly with DOM methods from JS - you'll have direct references to elements from beginning.
Related
I have a page in which almost all of the controls are created dynamically.
When I send the page I have no problem retrieving the data from those controls.
The problem comes when I have to retrieve the data of the "returns"(see buttons inside the blue frames), because since they are not inside any control I have to use an array to keep track of them.
This is the pop-up that is used to enter the returns for each expression (IF,ELSE IF,ELSE)
My question is, what would you do if you had to keep track of those returns??
Would you create an js array of returns for every expression(IF,ELSE IF,ELSE) knowing that you would have to create arrays of arrays since each structure can have several instructions,which in turn can have several expression, which in turn can have several returns?? What would you do to keep the solution as simple as possible, considering that the only thing I don't have inside controls is the returns.
At present I'm using the js array approach but , I have to do a lot of things so that when I remove a structure of all the returns associated with the expressions inside that structure, get removed too.
EDIT:
==============
The code I use to create all the controls in my page is too large to be posted it here, but here's an image showing the structure of the js array I use to store all the returns for each expresion(IF,ELSE IF,ELSE) and that I later submit as a json object.
Considering that structure, do you think it would be possible to simplified that structure so that while I am still editing the page I only have to have the returns in a array??
To make a long story short, I want to create the whole structure shown in the image just before I summit the form, NOT while I'm still editing the page.
Just a couple of extra things to consider:
structures : Structure #1,Structure #2
instructions: All the frames with a dropdown list showing "Multiple IF"
expressions : All the IF's,ELSE IF's and ELSE's
==============
P.S. I'm not asking for any working code, I only want to hear your suggestions of what you would you do if you had to deal with a situation like the one described above.
Use the form element's onsubmit event.
<form action="" onsubmit="this['returns'].value = createReturnsArray();">
<input type="hidden" name="returns" />
</form>
When the form is submitted, the function createReturnsArray is called and its return value send along with the form as returns. Of course, you would change all these things to suit your needs.
I am with affiliate programs that give you little forms to put on your website, but often times they're entirely composed of javascript (so, no HTML tags , ID's or classes are inside of them).
These probably pull in forms using AJAX. JS or JQuery cannot display page elements by themselves, for that they need HTML. What you can do is use the Chrome Developer Tools to find the IDs or classes in the form they load in, and then after the AJAX call edit the form from there.
If there's a form then it has to ultimately draw elements into the DOM for the page to render. There's always a way to get at those nodes if you really need to, but if they don't include IDs or names then you'll have to walk the tree and look for specific relationships based on what you see in the finished page. It will definitely be a PITA, but it's doable.
I am researching ways on how to dynamically add form fields for nested models and stumbled accross the nested_form plugin by ryanb. No doubt this is a a great piece of code, but I wondered why does it have to be so sophisticated?
Example: A form for creating / adding a project has one or more tasks assigned. The user can dynamically add more tasks by clicking on a add-task button. A project must have at least one task. Each task has a name and a description.
So why not just:
- When generating the html, sourround each set of task fields with a div given an ID such as "dynamic_fields"
- When the user clicks the add-task button, call a JavaScript function via link_to_function to clone the dynamic_fields subtree. Insert the new set of fields at the bottom of the task list.
- Via JavaScript, remove the values of the newly added fields and replace the child ID with something unique (Ryan suggests using a value based on the current time)
I am aware that the nested_forms plugin also works for deeper nesting structures, but given my simple use case with only one level of hierarchy, is the approach outlined above practical? Or am I missing something important? Any guidance on this topic is appreciated.
Basically, the plugin works as you describe but a form partial is used as the basis.
The ids of nested objects must be unique and it's really easy to stick to the current millisecond time to do that.
Your way to handle the problem would work but would require some additional html to catch the required parts of the form and match what belongs to which additionnal object.
Ryan Bate's code seems complicated but it's not. It introduces complex methods only to make your view look good.
I think there is another solution to this question, a gem named cocoon.
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
I am making a web page. It has some input fields grouped into one section, and then below that section is an "Add another" button. That button will add another identical section to the page using JavaScript; the same form fields.
Then later down the page there is a "Calculate" button. It runs some other JavaScript which needs to have access to these input fields via jQuery.
What is the recommended way to have multiple duplicate input elements on the page? I am aware that there shouldn't be two elements with the same ID, but what happens with two elements of the same name? Can they be accessed individually? Or should I name these input elements differently with JavaScript, e.g. adding a "1", "2", etc. to the end of their name, and then use loops? (that seems messy)
How should I identify and access these identical groups of input fields?
You can use the document.getElementsByName('name') and then loop over the result to get each value.
As long as they have differents ids they can have the same name without trouble.
When you submit them, the server will get repeated name/value pairs and needs to be aware of that in processing them. Different languages differ in how they do that, you'll have to consult appropriate documentation for how to do it with whatever you are using.
What is the recommended way to have multiple duplicate input elements on the page?
Just do it.
I am aware that there shouldn't be two elements with the same ID, but what happens with two elements of the same name?
Any methods available to JS for accessing them by name will give you a collection instead of an element. You can access the individual elements within just like an array (including looping over with for and collection.length).
Can they be accessed individually?
If you are accessing them by name, then you can use their index. (collection[0]).
You can also give them ids if you want to access a specific one.
If you want to link elements together and have them refer to each other, then you can use the DOM structure to help you.
For a very simplified example:
<div>
<input>
<button onclick="alert(this.parentNode.getElementsByTagName('input')[0]);">...</button>
</div>
Obviously, in a real world situation you should use unobtrusive JS and build on things that work.
You can give the name as an array
ex:
<input type="text" name="textBox[]"/>
You can append the same form on clicking "Add Another" Button. You can access them using textBox[0], textBox[1] etc.