RadioButtonList and their 'Value' property - asp.net

I was wondering about the 'Value' property of an item in a RadioButtonList.
If I want to get the value of the selected Radio Button that is in the list, these must be unique or it will auto-select the first item it finds with the value I'm looking for. So no duplicate values.
Why is this? I've looked around the net, used them, and such so I know HOW it is working, but I would like to know WHY it works this way.
If I select an item in the list, it knows which item I selected. The button fills in, you can get the index of the item that is selected...so why doesn't it go: "Okay, you selected the item at index X. You also want the value? Okay, let me access the list, go to item X and get its value."
I can only think that when you want the value of an item, it is looking by value rather than by index then by value?
UPDATE 1:
In my particular case I was doing this:
I have 1 RadioButtonList that has 3 items(RadioButtons) in it. The following Select...Case occurs inside of a button click.
Select Case RadioButtonList1.SelectedItem.Text
Case "TextA"
Case "TextB"
//This RadioButton has a value of 200
Case "TextC"
//This RadioButton has a value of 200
End Select
This works for the first Case and only ONE other. As I debugged, the first and second cases went through fine. When I selected the third RadioButton, then execute the event, it will automatically select the second RadioButton because it has the same value as the third, but comes first in the list.
Changing one of the identical values fixes this.

Not sure I completely understand, Do you have your HTML, script to share? You might have a problem if you're using duplicate IDs to group the radio button set; you should just use same name attribute. In that case, if you try to get the value using selectElementById it will just grab the first one.
Since you "want to get the value of the selected Radio Button that is in the list", you can get that array of same-named inputs (getElementsByName) and loop through and look for the 'CHECKED' condition:
<input type="radio" name="cars" value="beamer" checked="checked">BMW<br><br>
<input type="radio" name="cars" value="prius">Prius<br><br>
<input type="radio" name="cars" value="volvo">Volvo<br><br>
<input type="radio" name="cars" value="beamer">BMW<br><br>
<input type="radio" name="cars" value="prius">Prius<br><br>
<input type="radio" name="cars" value="volvo">Volvo<br><br>
<p>Selected Car Value and Index:</p>
<div id="selectedCar"></div><br><br>
<button onclick="getVal()">Get Value and Index</button>
<script>
var getVal = function(){
var cars = document.getElementsByName('cars');
var result = document.getElementById("selectedCar");
for (var i = 0, length = cars.length; i < length; i++) {
if (cars[i].checked) {
result.innerHTML = "value: " + cars[i].value + " and index: " + i;
break;
}
}
}
</script>

Related

return value of selected value of v-for radio group

I have a radio group for a form created with v-for. I need to return the value of the selected button in a function. Here's what I've tried:
Use the v-model value. The issue is it returns the value of the button previously checked. This is due to the function using the current form value before it updates. I tried to figure out how to delay it or call the function after click with no luck, then was reminded of refs.
So I added the ref not realizing it applies the same ref to all inputs. Which of course it does, but this returns an array.
How do I choose the selected button? Is there a way to apply the ref only to the selected button?
<div v-for="mealService in mealServices" :key="mealService.id">
<input #click="setActiveMealService" type="radio" name="meal_type"
:id="mealService.meal_type_id"
:value="mealService.meal_type_id"
v-model="form.meal_type_id"/>
<label :for="mealService.meal_type_id">{{ mealService.meal_type.name }}</label>
</div>
You can use vue function event like this
setActiveMealService(event){
console.log(event.target.value);
let meal_type_id = event.target.value;
}

How to get last selectedindex

I need to get the last selected value from a dropdown control. But I get wrong information.
I need this kind of control to allow users to select every option they want. But I've to validate every option they select after getting the selectedvalue.
I've deployed an ASP.NET dropdown control in a webform. It's databinded in server side, and the resulting hmtl is the following:
<select name="ddl" id="ddl" multiple="multiple" data-native-menu="false">
<option value=""></option>
<option value="1">1800346</option>
<option value="2">1800353</option>
<option value="3">1800358</option>
<option value="4">1800509</option>
<option value="5">1800514</option>
</select>
And this is my jQuery code: It alerts the selectedIndex and the selected text.
$("#ddl").on("change", function () {
alert($("#ddl")[0].selectedIndex);
alert($("#ddl option:selected").text());
});
With alert($("#ddl")[0].selectedIndex) I get the first selected index. For example, if you click on the first checkbox, you'll get "1" the first time. After that, if you click on the third checkbox you'll get "1" again (instead of "3"). Because the first option is selected.
I also tried with alert($("#ddl option:selected").text()) but I get everything.
Is there any way to get only the last selected value? I'm only able to get the first selected index.
You can find my code also here: http://jsfiddle.net/bDvkQ/342/
Any help will be very welcome,
Regards,
Check for this code
$("#ddl").on("change", function () {
var lastText = "";
var last = 0;
$("#ddl option:selected").each(function () {
lastText = this.text;
last = this.value;
});
alert(lastText);
alert(last);
});
and you can find from this link to http://jsfiddle.net/bDvkQ/344/
I think it wasn't clear for you.
When you click on the ddl, it will choose the selected value. Just return it.
Do something like this:
$("#ddl").on("change", function () {
alert($("#ddl").val());
alert($("#ddl option:selected").text());
});
It works well for me.
Hope this helped.
Here is how we can select the last selected value (and first one),
$("#ddl").on("change", function () {
var selValues = $("#ddl").val();
alert(selValues[0]);
alert(selValues[selValues.length - 1]);
});
However, if user starts selecting values in the reverse direction (from bottom), you will not get the last selected/clicked value but you will always get the selected value that comes last in the dropdown.
I would suggest to create another function/handler that gets all the selected values and validates them one by one rather than doing validation on every single click/selection of this multi select control.

using Form to retrieve dropdownlist value

I have a dropdownlist which has both text and value .When I try to retrieve the data from Page.Request.Form["ID1"] I am getting back the value and not the text ..Is there a way I can get both of these .
<select id="ID1">
<option Value="1">
Test
</option>
<Option Value="2">
Test2
</Option>
</select>
Thanks
Changing my answer based upon the criteria
I'm kinda writing this off the cuff so I apologize if there are syntax errors - hopefully you get the general idea
Since you have control over the client side.. you could pass over the form text / value like this
<select name="mySelect">
<option value="myName1:myValue1">myName1</option>
<option value="myName2:myValue2">myName2</option>
<option value="myName3:myValue3">myName3</option>
</select>
Then... server side you could do something like this...
var mySelect = Page.Request.Form["mySelect"].ToString();
var myText = mySelect.Split(":".ToCharArray()).First();
var myValue = mySelect.Split(":".ToCharArray()).Last();
Only the value is post back on the form.
Using the value you can find the text in the list, that you need to have save/keep, either on viewstate, either keep it on Drop Down list box. If you can not use them, then one other solution is to keep all your data that you wish to get on the value, and split them later.
There is a way this can be done.
During initialisation of the webcontrol, in the code behind, store the dropdownlist in a member variable so you keep a reference to it, and populate it's Items collection during initialisation.
Then get the posted back value (key) using Request.Form(ddl.UniqueID) also during initialisation.
Use the key to look up the item in the drop down list eg.
dim selectedValue as string = Request.Form(ddl.UniqueID)
dim theItem as ListItem = Nothing
If Not IsNothing(ddl.Items.FindByValue(selectedValue)) Then
theItem = ddl.Items.FindByValue(selectedValue)
dim strText as string = theItem.Text
End If

symfony setting value of specific checkbox widgets in form

I have a widget defined with a series of checkboxes that is essentially used to build up a bit flag. So I have a DB column 'access_bits', and I have several checkboxes generated on in the form class, in the format of 'access_bits[]', with the appropriate values (i.e. 1,2,16,1024 etc)
following the solution on this post (Symfony: How to change a form field attribute in an action?) - which is simple and sensible - I am able to magically set the attribute for all the checkboxes. But how can I target specific ones (preferably by value)?
TO CLARIFY:
HTML:
<input name="user[access_bit][]" value="1" /> Level 1
<input name="user[access_bit][]" value="2" /> Level 2
<input name="user[access_bit][]" value="4" /> Level 3
<input name="user[access_bit][]" value="8" /> Level 4
In the DB I have a column that has a bitwise integer. So for example, to have Level 1 and Level 2 checked, the value in the column would be 3. To have them all checked, the value would be 15.
"What I Want" PHP in action.class.php
$exampleValue = 4;
foreach ($form->getWidget('access_bit') as $thisWidget)
{
if ($thisWidget->getValue() == $exampleValue)
{
$thisWidget->setAttribute('checked','checked');
}
}
... which would cunningly set the checkbox next to Level 3 as ticked.
I do not want to use jQuery to do this.
you can try this....on your form save you can use this
$samplevar = $this->your_form->save();
$samplevar->setYOURFORMFIELDNAME(array of values(1,2,3));
$this->sample = YOURFORM($samplevar);
or,
on showing the form in first you can also pass the value in form while setting
$this->samplevariable = YOURFORM($this->getYOURMODEL->setYOURFORMFIELDNAME(array of values(1,2,3) which u get form db getYOURFORMFIELDNAME);
if you have values in comma seperated you cane use explode directly
$samplevar = $this->YOURFORMNAME->save();
$samplevar->setYOURFORMFIELDNAME(explode(',', $samplevar ->getYOURFORMFIELDNAME()));
$this->YOURFORMNAME = new YOURFORMForm($samplevar);
Try using the setDefault method :
$thisWidget->setDefault(array($examplevalue));

Select item in CascadingDropDown via JavaScript & invoke update

In code-behind I can do this to select something:
// Select item in first DropDownList
myCascadingDropDown_1.SelectedValue = itemValue_1+":::"+itemText_1;
// Select item in second DropDownList
myCascadingDropDown_2.SelectedValue = itemValue_2+":::"+itemText_2;
How can I do this in JavaScript?
(I'm aware, that I could search the list and set the selectedIndex property for each dropdown, but I have many items and i'm very lazy.)
EDIT:
npups answer works: I can select my desired item in the first dropdownlist. The problem is however, that new values based on that selected item (it is a CascadingDropDown, remember?) don't show in the second dropdown so I can't select anything there. I would need to somehow invoke the update method of the second dropdown manually: any suggestions?
I was able to solve this:
1) With npups suggestion I was able to set "myCascadingDropDown_1" to my desired value.
2) Using the
myCascadingDropDown_2.CascadingDropDownBehavior._onParentChange(null,
null);
method I was able to force the second dropdown to repopulate based on the new selected value of "myCascadingDropDown_1".
3) I wrote a timer to check periodically if the second dropdown has finished repopulation and set the desired value if it has (again using npups answer)..
Check this out:
<select id="foo">
<option value="bar">bar</option>
<option value="baz">baz</option>
<option value="bork">bork</option>
</select>
<script type="text/javascript">
var selectElem = document.getElementById('foo');
selectElem.value = 'baz';
</script>
Setting the value of the select element fixes that.
Firefox gets it right even if you just use the tags' content as values (instead of specifying a value in the option's value attribute). Not sure about other browsers.
EDIT, more stuff:
So there is some other select (or equivalent) that is updated by some harmonizing function when the first select changes?
Here, i have it in the first select's onchange. When the selected element is set with this "value-setting" technique, the onchange isn't triggered. Though, one can call the harmonizing function manually when you change the first select. I show two different ways (both in comments) below.
<select id="foo" onchange="harmonize();">
<option value="bar">bar</option>
<option value="baz">baz</option>
<option>bork</option>
</select>
<select id="foo2">
<option value="0">This</option>
<option value="1">That</option>
</select>
<script type="text/javascript">
var select0 = document.getElementById('foo');
var select1 = document.getElementById('foo2');
select0.value = 'baz';
// alternative 1: call harmonize();
// alternative 2: call select0.onchange();
function harmonize() {
if (select0.value==='baz') {
select1.value = '1';
}
else {
select1.value = '0';
}
}
</script>
I didn't bother to hide global variables etc. here, but of course that is a good idea.
you can also use myCascadingDropDown_2.set_SelectedValue(resultval, resultVal) instead of timer (item3)

Resources