Develop Reference

How can I get the text from an Asp.Net TextBox control with Jquery or Javascript?

I have an Asp.Net TextBox control:
<asp:TextBox ID="txtFromDate" runat="server" CssClass="txtDateFrom"></asp:TextBox>
In a separate Jquery/Javascript file, I would like get the text from it... normally the text is like '9/1/2015'.
I have tried the following:
var r2FromDate = new Date($(".txtFromDate").val);
var r2FromDate = new Date($(".txtFromDate").val.toString());
var r2FromDate = new Date($(".txtFromDate").val());
var r2FromDate = new Date($(".txtFromDate").text());
var r2FromDate = new Date($(".txtFromDate").text);
and the same with using the # <%= txtFromDate.ClientID %> notation and it completely breaks with that.
Please help!

$('#txtFromDate').val();
You want to select using the ID, not the class.

var text = $("#<%=txtFromDate.ClientId %>").val();
ASP should then output the ID generated on the client and your javascript can select it. You can also reuse this variable instead of querying the DOM over and over [it has to find it every time you use jQuery like "$(...)"].
If your javascript is located in another file, you can use the name attribute instead
<asp:TextBox ID="txtFromDate" runat="server" CssClass="txtDateFrom" name="txtFromDate"></asp:TextBox>
$('input[name="txtFromDate"]').val();
https://api.jquery.com/attribute-equals-selector/

Alternatively, you can define the following property on your TextBox
ClientIDMode="static"
That will ensure that your ID on the client side will be the same as the server side id.
And then you can use:
$('#txtFromDate').val();

It was actually because I put the id as 'txtFromDate' and the class as 'txtDateFrom' instead of keeping them the same. I was trying to access the class 'txtFromDate' when it didn't exist.
.val() works when you select the right class.

You can try this through this you can also get asp button or any control for that matter.
var txt_txtFromDate = document.querySelector("input[id*='txtFromDate']");
alert(txt_txtFromDate.Value);
you can also try querySelectorAll() if you have multiple controls with same id in client side.
Also, $("input[id*='txtFromDate']") will work.

Getting ASP dropdownlist selected value using javascript

I have a dropdownlist in asp as below:
<asp:DropDownList ID="ddlActiveStatus" AutoPostBack="True" runat="server" onchange = "dconfirm()" OnSelectedIndexChanged = "ddlActiveStatus_SelectedIndexChanged">
<asp:ListItem></asp:ListItem>
<asp:ListItem Value="Y">Y</asp:ListItem>
<asp:ListItem Value="N">N</asp:ListItem>
</asp:DropDownList>
I would like to retrieve the value of selected index when user selects on a different set of values. I have a code like this:
function dconfirm(){
var e = document.getElementById("<%=ddlActiveStatus.ClientID%>");
var selVal = e.options[e.selectedIndex].value;
alert(selVal);}
Expected result is when user selects 'Y', the javascript will alert 'Y'. However the program kept throwing below error:
The name 'ddlActiveStatus' does not exist in the current context
I would like to get it done using javascript only. What have I missed out? Kindly advise.
Thank you.

While technically what you're doing should work, you can avoid referencing ddlActiveStatus.ClientID in your JavaScript by adding ClientIDMode="Static" directly on the ddlActiveStatus control.
Doing this gives you full control over the ID generated for the control so you can then simply use the following in your JavaScript:
var e = document.getElementById("ddlActiveStatus");

ASP sometimes changes the ID. Add a "Name" to the element like so:
<asp:DropDownList Name="DdlActiveStatus" ID="ddlActiveStatus" AutoPostBack="True" runat="server" onchange = "dconfirm()" OnSelectedIndexChanged ="ddlActiveStatus_SelectedIndexChanged">
Then use: var x = document.getElementsByName("DdlActiveStatus");
Or, you could use jquery:
$('[name="DdlActiveStatus"]').doStuff();

$('#ddlActiveStatusoption').val()
or
$('select#ddlActiveStatusoption:selected').val())

I've figured out a workaround for this. Hopefully it'll be able to help someone who're looking for answer.
Instead of getting the selected values of ddlActiveStatus in my javascript, I'll be passing the value by adding below code to my dropdownlist property as below:
onchange = "dconfirm(this.value)"
As for my javascript function it'll display the user selected value. Code as below:
function dconfirm(values)
{
alert(values);
if (values == 'Y')
{
//do something
}
}
This does the job for me. Hope it helps.
Thanks guys for your helpful replies, cheers.

the easy way for me is
var VarName = $('#<%=YouDropDownId.ClientId %>').val();
for your case you forget #
try this i hope it works
var e = document.getElementById('#<%=ddlActiveStatus.ClientID %>');
good luck.

How to get ids from divs that were dragged into a drop zone on button click javascript

I'm trying to find a way to get the ids from dragged divs after they are in the drop zone.
All the drag components have an id from drag1 - drag8 and the drop zone is div drop zone. Because there are no divs in the drop zone when the page loads I want to gather the ids on a save button for now with a text box entry and drop down menu select.
I have tried the code below:
$(document).ready(function() {
$("#dropzone div").click(function() {
var index = $("#dropzone div").index(this);
$("#dropzone_drag").html("Index " + drag + " was clicked");
});
});
And I use jQuery for the text box, which works nicely:
$(document).ready(function() {
$('#save').click(function() {
alert($('#name').val());
});
});
How do I find the ids from dragged divs after they are in the drop zone?

After playing around i came up with the following:
var ids = {};
$("#dropzone>div").each(function(i){
ids[i] = $(this).prop('id');
});
which at the moment says undefined, but i did manage to put it on the save button so it no longer pops up when i open the page.
Any suggests please?

In my comprehension .index(this) returns the index of the element relative to the list "#dropzone div"., which may or may not contain the elements in the order you want. But if all your elements have a common class, say ".foo_bar" it probably would be easier to know the id given an clicked element.
Otherwise, as you're using this on the function, if this is one of your "drags" it is probably easier to pick the id from this than to try the indexes.
Try doing it like that and maybe it'll word better.
ids = {};
$("#dropzone>div").each(function(){
ids[$(this).prop('id')] = $(this).prop('id').replace(/[^0-9]/g, '');
});
the code .replace() means that we are removing characters (in this case anything that isn't a number) from the string so we end up with it's true number. Instead of it's place in the DOM.
If i didn't comprehend well your problem, correct my comprehension errors and i will edit the answer. And an html of the zones would be nice ;)

The following code worked for me:
<script>
var div = document.getElementById('dropzone')
</script>
and on the button i added:
alert( div.innerHTML )
The result gave me all of the div information from it's html page so i could select the information i wanted to push to the database.
Thank you all for you input and advice.
Matthew

Passing ClientId of a textbox to use it in a javascript function

this is my control:
<asp:TextBox ID="txt_rol" onkeyup="this.value=this.value.toUpperCase()" runat="server" BorderColor="#E0E0E0" BorderStyle="Solid" Width="240px"></asp:TextBox>
</strong>
<asp:ImageButton ID="imgBtnGuardar" runat="server" ImageUrl="~/imagenes/boton.guardar.jpg" OnClientClick="ValidaCajadeTextoVacia(document.getElementById('<%=txt_rol.ClientId%>'));MensajeCargandoJQUERY();"/>
The problem is, that i can't get the Id of the textbox.

Well, right off the bat I can tell you that there's a syntax issue in the code. It should be:
'<%= txt_rol.ClientID %>'
There may be other obstacles you need to overcome here too. For example, if these controls are nested in a GridView you won't be able to reference the control that way.

function masterClick(clicked, controlID) {
var dynCtrl = clicked.id.substring(0, clicked.id.lastIndexOf("_") + 1);
var tBox = document.getElementById(dynCtrl + controlID);
tBox.value = "";
tBox.focus();
}
Then call from your image button like...
masterClick(this,'txt_rol');
change tBox.value and focus to whatever action you like, but should have access to the control in JavaScript now. You can add in a check like " if (tBox) " to ensure you have an object. The downside is the static reference to the control within the inline javascript, and you have to adjust when the calling control is in a different container, grid, panel, etc.

Check the output with View Source and you will understand what is happening. You'll have to set the OnClientClick property server-side (onload). Or find a way to bind it OnClientClick='<%#SomeProperty%>'.
Another option could be to use jQuery to find your control:
$("input:text[id*=txt_rol]")
By the way: your JavaScript won't work if someone pastes in the textbox using the mouse (right-click/paste).

use dynamically generated array (jquery) in code behind class

var data = $("#list2 li").map(function () { return $(this).children().html(); }).get();
the data variable contains the values that are fetched using jquery
can anyone suggest me the way how can i use this array in code behind class of the web page
on button .click event
my button is aspx control (runat ="server")
as
script type="text/javascript">
function eOrder() {
var data = $("#list1 li").map(function () { return $(this).children().html(); }).get();
debugger;
};
<div style="clear:both;"></div>
</div>
<asp:Button ID="btnSave" runat="server" Text="Save" />
the values in the list are generated dynam,ically on Page_Load method
li = new HtmlGenericControl("li");
div = new HtmlGenericControl("div");
div.InnerText = webpart.DisplayTitle;
li.Controls.Add(div);
list2.Controls.Add(li);
& the list is also runat= "server"
basically i need to send the data array in code behind class on btnSave click
thankx in advance

Simplest way is to add a HiddenField on your page and use jQuery to set its value to the string of the array. Then in code behind you use JSON deserializer to turn the string into an array of some type.
For deserialization you can use the JSON features provided by the .NET Framework: http://msdn.microsoft.com/en-us/library/bb412179.aspx
This is a bit more complex but does not add dependencies to your project.
Alternatively you can use the increasingly popular JSON.NET. It seems easier to use but is an additional dependecy to your project. You probably want to use it if you do a lot of JSON work serverside.

Think you could use Ajax here
jQuery.ajax