What I am trying to do is very similar to this question:
Using jQuery to dynamically add form fields (or fieldsets) based on a dropdown box value
Specifically, I want to use a drop down box value to add that number of input boxes to a fieldset.
I do not know jQuery so the answer I am linking to hasn't answered my question, I would like to know how to do this in JavaScript?
There are lots of instructions on how to use JQuery. I suggest that you go to http://docs.jquery.com to learn it rather than looking here for a specific answer to your question. Spending the time to figure it out for yourself will be far more useful than a copy-paste answer.
You'll follow some basic steps. Tackle each one individually.
Read the value from the drop-down when it changes.
Find the element to contain the new input boxes.
Loop through the number of values
Insert the appropriate HTML for each loop iteration.
Related
Currenty I am using checkboxes to select more than one value in a form. So when creating a new post I can select all the categories it falls into. But the cat list is getting longer and is becoming a bit unmanagable.
I like how wordpress adds tags to each post via ajax. Wordpress has a text input field with autocomplete, you just start typing and then if it's already there (in the db) then it'll show and get adding to a list dynamically. If it's not found in the list then it gets inserted on form submit.
How can I achieve this or similar so that I don't have to use x amount of checkboxes?
Check out this jQuery library. It works on multi selects instead of checkboxes, but the logic and result is exactly what you need.
http://harvesthq.github.io/chosen/
(not affiliated, I've just used it a few times)
One option would be to make use a library such as jquery-autocomplete
https://www.devbridge.com/sourcery/components/jquery-autocomplete/
This makes use of AJAX based functionality and will give you the ability to tweak it based on values stored in a database table. You can make a simple check function that, in the case the value can not be found, the user will have the option to simply press add and insert it into said library.
The rest is jsut a matter of styling and design.
My knowledge of JS is very limited and i need help in validating this form so its like the previous questionnaire they had which you can see on this URL
Is it best to use a jQuery plugin or Javascript? I'm trying to get it so when you select one checkbox per question you have a score appearing in bottom right hand corner and if you get the answer right the score increments by 1.
Probably the biggest thing I have done in JS so far. Any pointers or suggestions? Advice would be appreciated.
Current new form here.
I'd use jQuery or server side validation. Also, change your check boxes to groups of radio buttons, that way it's only possible to select one because of the way radio buttons work.
i've managed to sort this problem out - wrote an on click function and like created variables for the score and incremented this on click if the answer is correct which was then spanned in to a div that was setup.
Took ages to do but got there in the end :)
I don't know if this is possible in Javascript but I am trying to achieve this. I don't know the terminology so I thought I would post it on here with pseudo code to help you understand what I want to implement.
Pseudo Code:
User Selects Option from pull down.
If selection matches criteria
Add text boxes to the form
Else if selection is something else
Add invisible text box with NULL value
I would like to code it myself but if you could post some reference material or links as I have not done much with Javascript.
Thanks
For your first and second entries, google for 'html select onchange'.
You'll want to check out document.createElement for "Add text boxes to the form"
To make your text box invisible, check out the CSS display property, setting it to none or block (or inline)
I've tried to keep this answer very short without code samples because it sounds like you want to do it yourself. Add a comment to my answer if you want more of an example.
EDIT
Also of note, along with document.createElement, you will want to look at appendChild to add the created element to an HTML element, most likely some FORM element in your page.
I'm building a nested form in rails 3.1 and instead of pressing the "add" button i want to automaticly add an input field when typing text in an empty input field (just like making a question in facebook and adding poll options). But i also want to only add a field if there are characters typed in the field if the characters are removed the extra field should also be removed.
I am working with rails 3.1 and so jQuery and jquery-rails are included in my gem, i don't know coffee script yet.
it's really easy.
Just tap into the focus() event handler and add textboxes as you go along.
I have created a simple demo for you here: http://jsfiddle.net/mcVnN/
Warning: clicking any textbox will add a new textbox here. If you want to add new textbox ONLY on last textbox focus, just compare the id.
If you have any doubts let me know.
Cheers
--
Sorry, did not read your full question, my mistake.
I have put together some quick code http://jsfiddle.net/mcVnN/12/ again on jsfiddle, but you might want to change it to suit your needs.
I was going through my answers a now and realized I had left you in the middle of nowhere.
Took some time to completely re-write my answer - the above answer is a lot buggier, you are better off using the :last selector than manually trying to keep track of the last text box yourself.
See my rewrite here: http://jsfiddle.net/mcVnN/29/
I have also added a max text box count that you can change easily to configure how many textbox you want users to be able to add.
Please replace the above code with this one, if you are using the above one at all.
Thanks.
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