We Keep Coding

Pass selected value server side dropdown list to javascript function

I have web form and JavaScript function like this:
web form
<div>
<asp:DropDownList runat="server" ID="ddlType">
<asp:ListItem Value="1" Text="Type1"></asp:ListItem>
<asp:ListItem Value="2" Text="Type2"></asp:ListItem>
</asp:DropDownList>
<asp:LinkButton ID="lnkTest" OnClientClick='<%= "getValue('0' + '|' + 'ddlType.SelectedValue');return false;" %>' runat="server" Text="text">
new
</asp:LinkButton>
</div>
JavaScript function
<script>
function getValue(Input) {
var result = Input.split("|");
section1 = result[0];
section2 = result[1];
}
</script>
I need to pass string includes '0' (hardcoded) and ddlType.SelectedValue to getValue.
This web form has syntax error Server tags cannot contain <% ... %> constructs (I know). I can get selected value by getElementById but I want to pass SelectedValue as argument. I read many posts but none of them don't pass SelectedValue.
It would be very helpful if someone could explain solution for this problem.

SelectedValue is a server-side value. It's available to the server-side code at page load (i.e. before the page is rendered to the user). In javascript it has no meaning at all, and isn't available at the time when a user clicks on the link.
If you want to get the selected value on the client side you can do something like this:
First get rid of the all the OnClientClick code from your LinkButton.
Second, write some javascript like this (at the bottom of the page, after all your HTML/ASP markup:
document.getElementById("<%=lnkTest.ClientID %>").addEventListener("click", function(event) {
event.preventDefault(); //stop default action of the link button, to allow script to execute
var selectedVal = document.getElementById("<%=ddlType.ClientID %>").value;
getValue('0|' + selectedVal);
});
This will cause the browser to listen for a user clicking on the button, and then run the JS function given. That function fetches the currently selected value of the dropdown (as selected in the browser - at this point the server has no idea what's selected because no postback has happened) and passes that selected value to your existing getValue function.
N.B. In case you're wondering, the reason I use the contruct <%=ddlType.ClientID %> is because ASP.NET dynamically creates the client-side ID of each element based on the structure of the server-side controls it lies within. So just relying directly on the server-side ID (e.g. "ddlType") will not reliably identify the element in the rendered DOM. .NET provides the ClientID value at runtime in order to allow us to access the generated ID.

Get value of selected RadioButtonList in aspx

I have an aspx application with a RadioButton list like below:
<asp:RadioButtonList runat="server" ID="rblIsDiesel" RepeatLayout="Flow" RepeatDirection="Horizontal">
<asp:ListItem Text="Diesel" class="carFuel" Value="true" Selected="True" />
<asp:ListItem Text="Petrol" class="carFuel" Value="false" />
</asp:RadioButtonList>
In jQuery I am able to get the Buttons using the below:
var buttons = $('span.carFuel input:radio');
However, I am missing how to get the value of which RadioButton is selected.
What I am trying to do in pseudo code would be:
if (buttonSelected == Diesel) {
alert("Diesel")
}
else {
alert("Petrol")
}
And secondly, fire an alert on toggling between the buttons.
if (valueChanged) {
alert("You changed fuel type");
}
For the first question, I was trying to add :checked to the selector and then use .val() but that is giving me an undefined value. I believe the buttons selector I have above is working OK as if I add a debugger line, I can see 2 objects and the correct client side ids for the radio buttons.
And for the second part, I believe I will need to use the jQuery change event - just not sure on the correct selector.

The key thing you seem to be missing is the ClientID.
When a Web server control is rendered as an HTML element, the id attribute of the HTML element is set to the value of the ClientID property.
With that, what you then do is look for the input control that is checked:
var selectedRB = $('#<%= rblIsDiesel.ClientID %> input:checked');
Then to get the value, just call val().
var selectedValue = selectedRB.val();
But remember, this gets the value of the radiobutton, not the text. So with how you have it setup, you would see true or false as the value. And to be honest, I'm not totally sure I understand why the values would be true and false in your implementation - but that is beside the point.
To capture when the selected radiobutton changes, there is a handy change function that you can use:
$('#<%= rblIsDiesel.ClientID %> input').change(function() {
alert("You changed fuel type");
});

Get variable value from aspx and use it in code behind

I am having a little issue. I have a drop down list which can have multiple values selected. I did that by simply adding a $('#id').attr('multiple','multiple');
I know there is a simple way of accessing variable from code behind to aspx page but now i need the opposite thing, because when I multiselect it, from the code file it doesn't recognize the multiselection but only takes 1 value. So basicly I was hoping for something like
var temp = $('#id').val(); --- It takes the selected items correctly
<% simplevariable= %> = temp;

You can add a HiddenField
<asp:HiddenField ID="hiddenField" runat="server" />
Set its value like
$("#<%=hiddenField.ClientID%>").val($('#id').val())
You can use HiddenField.Value in code behind

Getting Javascript code to fire on a selection change on a DropDownList in ASP.Net

I would like to add Javascript code to be fired when the selected index is changed on a dropdownlist in asp.net.
So, here is my DDL:
<asp:DropDownList ID="comboReportTypes" runat="server" />
I would like to add something like this to the above DDL: onSelectionIndexChanged="MyJavascriptFuntion(this)"
So I'd like to end up with something like this:
<asp:DropDownList ID="comboReportTypes" runat="server" onSelectionIndexChanged="MyJavascriptFuntion(this)" />
Is this possible?
Thanks in advance. I'm using ASP.Net 4.0

add onchange event to it from the code .
Eg:
DropDownList dlOption = new DropDownList();
dlOption.Attributes.Add("onchange", "javascript:return functionname(this);");

Using jquery you can easily achieve what you are trying to do
$('#comboReportTypes').change(function(){
//do whatever you need to.
});
See Demo
Note: Make sure you are using the correct ID for the DropDownList as server controls tend to change their ID's on rendering.

Set Text property of asp:label in Javascript PROPER way

I have a series of textboxes on a form. When the user inserts numbers into these textboxes, calculations are made and <asp:Label> controls are updated via JavaScript to reflect these calculations:
document.getElementById('<%=TotalLoans.ClientID %>').innerHTML = TotalLoans;
This correctly updates the UI. However, when I try to access the value in the codebehind, the Text property is empty. This makes sense I guess, since I was updating the innerHTML property via the JavaScript.
//TotalLoans.Text will always be equal to "" in this scenario
double bTotalLoans = string.IsNullOrEmpty(TotalLoans.Text)
? 0.00
: Convert.ToDouble(TotalLoans.Text);
How do I update the Text property of the <asp:Label> via JavaScript in such a way that I can read the property in the codebehind?
Update
This is a small problem on a large form that contains 41 labels, each of which displays the results of some calculation for the user. Taking the advice of FishBasketGordo I converted my <asp:Label> to a disabled <asp:TextBox>. I'm setting the value of the new textbox as such:
document.getElementById('<%=TotalLoans.ClientID %>').value = TotalLoans;
Again, in the codebehind, the value of TotalLoans.Text is always equal to "".
I don't mind changing how I approach this, but here's the crux of the matter.
I am using JavaScript to manipulate the property values of some controls. I need to be able to access these manipulated values from the code behind when 'Submit' is clicked.
Any advice how I can go about this?
Update 2
Regarding the answer by #James Johnson, I am not able to retrieve the value using .innerText property as suggested. I have EnableViewState set to true on the <asp:Label>. Is there something else I am missing?
I don't understand why, when I type in a textbox and submit the form, I can access the value in the codebehind, but when I programmatically change the text of a textbox or label by way of JavaScript, I cannot access the new value.

Place HiddenField Control in your Form.
<asp:HiddenField ID="hidden" runat="server" />
Create a Property in the Form
protected String LabelProperty
{
get
{
return hidden.Value;
}
set
{
hidden.Value = value;
}
}
Update the Hidden Field value from JavaScript
<script>
function UpdateControl() {
document.getElementById('<%=hidden.ClientID %>').value = '12';
}
</script>
Now you can access the Property directly across the Postback. The Label Control updated value will be Lost across PostBack in case it is being used directly in code behind .

This one Works for me with asp label control.
function changeEmaillbl() {
if (document.getElementById('<%=rbAgency.ClientID%>').checked = true) {
document.getElementById('<%=lblUsername.ClientID%>').innerHTML = 'Accredited No.:';
}
}

Use the following code
<span id="sptext" runat="server"></span>
Java Script
document.getElementById('<%=sptext'%>).innerHTML='change text';
C#
sptext.innerHTML

Instead of using a Label use a text input:
<script type="text/javascript">
onChange = function(ctrl) {
var txt = document.getElementById("<%= txtResult.ClientID %>");
if (txt){
txt.value = ctrl.value;
}
}
</script>
<asp:TextBox ID="txtTest" runat="server" onchange="onChange(this);" />
<!-- pseudo label that will survive postback -->
<input type="text" id="txtResult" runat="server" readonly="readonly" tabindex="-1000" style="border:0px;background-color:transparent;" />
<asp:Button ID="btnTest" runat="server" Text="Test" />

Asp.net codebehind runs on server first and then page is rendered to client (browser). Codebehind has no access to client side (javascript, html) because it lives on server only.
So, either use ajax and sent value of label to code behind. You can use PageMethods , or simply post the page to server where codebehind lives, so codebehind can know the updated value :)

Since you have updated your label client side, you'll need a post-back in order for you're server side code to reflect the changes.
If you do not know how to do this, here is how I've gone about it in the past.
Create a hidden field:
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
Create a button that has both client side and server side functions attached to it. You're client side function will populate your hidden field, and the server side will read it. Be sure you're client side is being called first.
<asp:Button ID="_Submit" runat="server" Text="Submit Button" OnClientClick="TestSubmit();" OnClick="_Submit_Click" />
Javascript Client Side Function:
function TestSubmit() {
try {
var message = "Message to Pass";
document.getElementById('__EVENTTARGET').value = message;
} catch (err) {
alert(err.message);
}
}
C# Server Side Function
protected void _Submit_Click(object sender, EventArgs e)
{
// Hidden Value after postback
string hiddenVal= Request.Form["__EVENTTARGET"];
}
Hope this helps!

The label's information is stored in the ViewState input on postback (keep in mind the server knows nothing of the page outside of the form values posted back, which includes your label's text).. you would have to somehow update that on the client side to know what changed in that label, which I'm guessing would not be worth your time.
I'm not entirely sure what problem you're trying to solve here, but this might give you a few ideas of how to go about it:
You could create a hidden field to go along with your label, and anytime you update your label, you'd update that value as well.. then in the code behind set the Text property of the label to be what was in that hidden field.