I create design for image, checkbox and drop-down list.. the image will create dynamically according to number of row..
My question is how can validate which checkbox was checked and which drop down option was selected because all of its have same id and name
First of all welcome to stackoverflow :D
If all of you checkboxes have the same ID it won't work. You said you create them dynamically then try to give them an special identifier like "myid"+i wehreas i being the number of the element (increase it after instantiating the element).
Then your IDs will look like:
myid0
myid1
myid2
...
with all the objects having a different ID it won't be a problem for you to check which checkbox was selected :)
Related
I have a set of check input. Each one contains a unique ID. On checking box (on click) I want to get this ID and create a string of type '/some/path/?myids=checkOne,checkTwo (where checkOne and checkTwo are IDs of two different check input that have been clicked.
I understand that I can use state management - but my issue is: how can I limit how many checkboxes to create custom string for? For example, I want to have a limit of 5 comma separated IDs. Since AMP logic is limited I am not sure how to do complex logic with it.
Here are the steps:
show set of checkboxes.
user can click any of these checkboxes
as user clicks on a checkbox, an achor tag href=... needs to be updated by appending the substring ?myids=checkOne.
if user clicks on another checkbox then the href tag needs to be updated to this: ?myids=checkOne,checkTwo and so on until at the most 5 checkboxes are clicked.
Is this at all possible? Thanks
Documentation is not very clear on how to approx complex logic and not much found on searching.
One option is to use amp-selector and then limit the number of selected items when binding using .slice():
<amp-state id="selected">
<script type="application/json">[]</script>
</amp-state>
<amp-selector layout="container" multiple on="select:AMP.setState({selected: event.selectedOptions})">
<div option="1">First</div>
<div option="2">Second</div>
<div option="3">Third</div>
</amp-selector>
<div hidden [hidden]="selected.length < 3">You can only select two options.</div>
Click me
This limits the number of selected IDs to two and displays a warning if the user selected all three.
Check this URL.
My divs are created dynamically in nested structure. I have to style this div to sports tournament structure. I don't know how to structure.
I want my structure like this.Now my code is working fine. Styling only the problem.
[1]: http://plnkr.co/edit/xKSwHAUdXcGZcwHTDmiv?p=preview
I am using org chart to achive my requirement.check below link
[https://jsfiddle.net/dhaarani/adx0ad49/][1]
page load one structure is shown. click the structrue again one is created.
change the input box value. sibilling and child will be created. inputbox value mustbe lessthan 100.
and one more condition check the one row contain all the input box values total is lessthan 100 than only create sibilling and child otherwise nothing will be happen.
I am using ASP.Net mvc to render my html view.
The view contains a dropdown list and a label
I load drop down list using a collection in my view model.
Lets say that the collection is called fruit
IList<Fruit> fruit
Fruit is defined as
FruitId
Name
FruitType
The dropdown list will display each Fruit name and have a value of FruitId
When I change the value of the drop down list I want to have the value of my label display FruitType.
I can think of a couple ways of doing this:
Write out Label tags for all values of FruitType. Give a css class to display the first one on load and add javascript to show/hide labels in the select onchange event
Provide json array of Fruit in the html somewhere (I would serialise the Fruit list on page load and put the resulting script on the page somewhere). I would add javascript to the onchnage event of the select to search the json and change the label value accordingly.
I have 2 questions:
Am I missing something obvious, could this be done in a better way?
If no 2 is a good idea, where should I put the json in the html so that the js can use it?
Another approach is that when you generate the dropdown list, include a data-attribute, say data-fruit-type where you store the FruitType, then when the dropdown value changes, just read the data-fruit-type attribute from the selected item.
I got a minor problem. I am displaying data from a database table in a .aspx page in the form of a grid view.
The first column is check boxes for each individual row and a header check box to implement the check all and uncheck all functionality which I already did using javascriptC. The purpose is general purpose...i.e. each check box represents the row which it is present in.
The problem is as I check the check boxes- either some or all or none....the sum of the values in the selected rows should be displayed dynamically in a text box in the same page below.
Please tell me how to implement this functionality. Just a basic hint or syntax is sufficient. I will do the details myself.
Please tell me the functionality for a simple grid view with two columns- one check box and the other being some values. so I want to display the sum of selected values into a text box in the same page below. This is the problem in simple words.
Thanks in advance for the help.
Concept
Calculate method
create first a method that will iterate over all the items in the grid view, and it will verify if the column is checked, if the column is checked then you add the value to the result variable. At the end of the iteration you update the value of the textbox/label or whatever will display the calculated value
Event
then you will have to use the onCheckChange of the checkboxes or on click to call the "calculate method"
Code
to loop in the grid: Looping through GridView rows and Checking Checkbox Control
I have numerous elements on a page. I am using Jquery toggle to toggle a class.
I need to post a php array containing the names of all the elements that contained that class. (were toggled on).
My first thought was to simply create an form with display:none with a listbox. Everytime the element is toggled the name will be added to the listbox and then when the user clicks next all the values from the listbox are posted to the next page. I am hoping that there might be a cleaner and simpler solution than this.
So, to clarify, I am wanting to detect all the elements that I toggled on, and post those values to another page.
How would I achieve this?
Thanks
You can create an array of all the element names (is this the name attribute, or the id) with the .map() function:
var names = $(".targetClassName").map(function() {
return this.name; //takes the `name` attribute, change to `id` for ID
}).get();