using Form to retrieve dropdownlist value - asp.net

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

Related

RadioButtonList and their 'Value' property

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>

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.

ListItem additional custom values

I am using dropdownlist in asp.net, it has collection of ListItem that represents the items of the dropdownlist, each ListItem has only two fields to hold the data, Value and Text fields, but those are not enough I would like to hold more data for each item. Let's say Text1 and Text2 in additional fields, but at the same time I would like to preserve the same behavior of the DataBind() method of the dropdownlist.
Sure, you can use the Attributes collection:
ListItem li = new ListItem("myText", "myID");
li.Attributes.Add("data-x", "xx");
dropdown.Items.Add(li);
This will give you this HTML:
<select name="dropdown" id="dropdown">
<option value="myID" data-x="xx">myText</option>
</select>
I suggest you prefix your custom attributes with "data-": http://html5doctor.com/html5-custom-data-attributes/
If you want to be able to preserve the items, try setting the AppendDataBoundItems property to true. Then you can programmatically add more items:
dropDown.Items.Add("Another Item", "2");
and preserve the original ones.

Search wordpress using three different drop down menus

I have three drop down menus that are chained together. Year, Make Model. I need wordpress search results to show their matching results. If I give them all the name="s" then it only searches the final s= in the url.
I basically need to know how to make
mysite.com/?s=2001&s=Chevrolet&s=Express&Search=Search
turn into:
mysite.com/?s=2001+Chevrolet+Express&Search=Search
or whatever gets the job done.
Any suggestions?
I would not name the selects. Instead, give them ids and make a hidden form field, then use javascript to update the hidden field.
function updateHiddenField(){
var year = document.getElementById("YearDD").value; //this is conceptual
var make = document.getElementById("MakeDD").value; //this is conceptual
var model = document.getElementById("ModelDD").value; //this is conceptual
document.getElementById("s").value = year+"+"+make+"+"+model; //this is conceptual
}
Then later...
<input type="hidden" name="s" id="s" value="">
<select id="YearDD" onChange="updateHiddenField();">
...
Otherwise you could overwrite the "Submit" Button, generate your own query string/url and redirect the page.
Or, in a real dirty way, you could just search the string and convert "&s=" with "+".

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