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.
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!
View image of form here before reading the question.
Using jQuery when the Complete Safety Walk button is pressed I want to make sure that if any radio buttons are set to Fail that the Action Required, Assigned To and ECD fields for that row are not empty and the Complete Safety Walk button gets disabled.
The table has an id safety_walk_items and each row has a unique id item_1, item_2, etc.
Note: There are NO form open/close elements as each row is saved using AJAX (when the icon at the end of the row is clicked).
I'm not using any fancy input highlighting, just showing a hidden div with an error message.
<div class="validation_errors hidden"></div>
I am using angularjs for my web app.
I have 2 textareas, a add button and a delete button.
In the first text area i have few options for the user to select. If the user selects on one of the options and clicks on the add the button, this selected item should be moved from first textarea to the second text area. And if the user selects an item from the second textarea and clicks on the delete button, then the item should be moved back to the first textarea.
How to uniquely identify and bind the items selected in the textareas?
Any help on this?
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.
I have a grid. In a each cell in a column in the grid, there is a text box. Next to each text box is a button. Attached to the button is a click event handler (jQuery .click()) What I want to do is when the user clicks the button, I want to fetch the value of the text box immediately next to it. There are multiple rows in the grid. Each row how a text box and a button.
I know how to use jQuery to fetch an individual, or group of items (using selectors). I also know how to attach the click event handler to all the buttons.
But what are some good ways to reference the text box next to the button -- aside from "walking the DOM" (i.e. using .parent() or .next())0
An easy way to do it would be to get the TR then find the input from there:
$(this).closest('tr').find('input');
You want .siblings('input') - this will find those input elements "next to the button" that was clicked.