I have a fiddle here: http://jsfiddle.net/ybZvv/43/
The problem I have is with the text inputs not changing. Please follow steps in fiddle below so you can see what is happening:
When you open fiddle, click on the "Add Question" button, this will add a table row copying the controls from the top into the table row.
In the table row click on the "Open Grid" and select button 5. You will see 5 letter buttons appear underneath from A-E.
Turn on all of the letter buttons by clicking on them (They should turn green to symbolize that the button is turned on)
You will see right at the bottom of the fiddle that it shows all of the text inputs of each value of the buttons which are turned on. This is fine.
The problem is here. If you go back into the table row and click on the "Open Grid" link again but this time choose "3", you will see the letters buttons change to A-C. Now letters D and E are not shown so they are turned off. But problem is that if you go to the bottom of the fiddle, the text input form D and E are still shown, they should be removed.
So my question is: what needs to be changed in the fiddle so that when the user changes their option type, it only displays the text inputs of those buttons which are still on after option has changed?
when you choose a option your code cleans the number box and the letters get changed ok.
The logic you apply to letters with class 'answerBtns answers' need to be apply also to the letter at the bottom. You must apply a class and do de process in javascript when get another choose.
Related
I am building out a product page and I want to have a small "shopping cart" on the page. I've set it up where when you click on the 8oz radio button and the Green Tea, Chamomile, or Oolong buttons and the "Add to Cart" button, a text box appears on the shopping cart on the bottom of the page.
However the problem I am having is that every time a new set is clicked (8oz and Chamomile after clicking 8oz and Green Tea), the original text box disappears. They are all separate text boxes but they keep hiding when a new selection is "added to cart". I would like them to just stack on top of one another.
Here is my Fiddle to see the code. Thanks in advance!
I have a scenario and I will really appreciate any help. As shown in the image,
I have only multiple select box on the left where there are numbers and on the right this is text box, what I want to do is, when ever user clicks on the house numbers, it should come to the right text-area box, and will be able to append the values, from the text area as well.
Get the selected value with the apropriate handler (#input, #change, etc.) and then push it in some array inside your data();
Finally, bind this variable with the right-hand text-area.
Obs: once you didn't show the code, I tried help you using high level steps.
I have a fiddle here: http://jsfiddle.net/ybZvv/11/
The problem I have is that when you open the fiddle, if you click on a couple of buttons from buttons "A-H" and then click on "Add Question" button to append the buttons into a new table row, no text inputs appear underneath the table.
But within the table row if you turn on a different button, then it displays the text input for that button.
What my question is that how can I have the text inputs to appear from the turned on buttons in the top control once the user clicks on the "Add Question" button?
Below is what should happen:
Right at the top control, turn on buttons A and D.
Click on the "Add Question" button and this should append a row, but it should also display the text inputs for buttons "A" and "D".
I refactored some of the code from btnclick to a new method updateAnswer which collects all the buttons that are turned on and adds an input to the answer container. The method is then called from btnclick and insertQuestion.
I updated the jsFiddle example.
I have a textbox and a set of buttons below the text box. What is suppose to happen is that a user fills in a number in the text box and that number determines how many buttons can be clicked. E.g if the text box has a value of 2, then the user can only select two button, a button is selected if the button turns red, it is not selected if it turns or stays white.
The problem is what is happening is that if the value is 1 or above, the user can select all the buttons, in other words if they just keep clicking on buttons then all the buttons would turn red, when what should happen is if the user goes over the value, then an error message appears stating you have went over the limit, please deselect a button if you want to choose another button.
How can I get it so that the number of buttons selected matches the value from the textbox?
code is in jsfiddle, click here (for some strange reason it is not letting me click on any button and text box is allowing entry of letters in jsfiddle, even though in my app with the exact code it works fine. Please look at function btnclick (btn) to help you.)
You're resetting the total on each click, so you're not really counting. Move the currenttotal = 0; outside the click function (and declare it with var).
Secondly, you have really much of the same code. You could also iterate to make the .className assignments on the buttons a bit more concise:
for(var i = 65; i <= 90; i++) { // iterate over character codes for A to Z
var letter = String.fromCharCode(i);
document.getElementById("answer" + letter).className = "answerBtnsOff";
}
You could also put the class names in HTML with the class="answerBtnsOff" attribute. You could even create the buttons through JavaScript. That would make for some cleaner and more readable code, but of course these optimizations are not necessary.
http://jsfiddle.net/7WwaK/3/
(For the jsFiddle to work, you have to select no wrap (body) in the left panel, but that's just how jsFiddle inserts the JavaScript.)
If I'm getting you right, you should do (IMHO) the following this:
Move var currenttotal = 0; outside your function. You are resetting it on each click on a button.
Edit the currenttotal after the user changes the number of answers. Add therefore the line currenttotal = document.getElementById('numberAnswerTxt').value(); to the function called getButtons().
You could implement the loop that pimvdb suggested to reduce your code (=
Please tell me if this is working.
I a slight situation here. What happens is that the user opens the grid of buttons by clicking on the (open grid link) and depending on the button selected it would display the buttons below then "Number of Answers" text box. E.g if user clicks on button "1" it displays button "A", if chose button "2" then shows buttons "A" and "B" and etc.
Now this does work until I type in a number in the "Number of Answers" textbox, then if I select a button from the open grid menu, then it would not change the buttons display below the text box.
So lets say for example there is a number in the number of answers textbox and I change the button from button "1" to button "3" from the open grid menu, then it should display buttons "A", "B" and "C" but because there is a number in the number of answers textbox it would not change the buttons below the textbox and it will still display only button "A".
Why is it doing this?
Code is in jsfiddle, click here
Try this
Your problem is var letter = String.fromCharCode(i);
You cant capture the value of input like that. You must use jQuery like that
var letter = $('#numberAnswerTxt').val();
letter = letter.String.fromCharCode(i);