Using JQuery onblur to set textbox value - javascript

I have a textbox with these rules:
1) I populate the textbox.text from a dictionary in session
2) If the user enters a new value, setTextBoxData will save it in the dictionary
3) On entry (on focus) the field text is blanked.
4) On blur, if the field is still empty, I want to set it to the original value.
<asp:TextBox ID="txtNumberEmployees" runat="server" Width="50px" onfocus="this.value='';"
onchange= "javaScript:$(function()setTextBoxData('NUMBEREMPLOYEES','txtNumberEmployees');});"
onblur="javaScript:restore ('txtNumberEmployees', 'NUMBEREMPLOYEES');"/>
The "restore" function referenced above is:
function restore(control, input) {
var data = getInputData(input);
$('#' + control).val(data);
}
getInputData returns the data value correctly. The problem is with the last line.
I have tried many ways to set this, but none seem to work. It should be a simple problem, but I can't get it to work yet.

The problem is ASP.NET will generate an ID that will not be txtNumberEmployees. ASP.NET will generate an ID for your input that will end with txtNumEmployees.
Change this line:
$('#' + control).val(data);
to this:
$('[id$=' + control + ']').val(data);
It will work because this is the Attribute Ends with Selector.

1: Make sure you have no javascript errors. I see there's a missing '{' in the onchange.
2: You can simply pass 'this' as the textbox reference and update it like below:
<asp:TextBox ID="txtNumberEmployees" runat="server" Width="50px" onfocus="this.value='';"
onchange= "javaScript:$(function(){setTextBoxData('NUMBEREMPLOYEES',this);});"
onblur="javaScript:restore (this, 'NUMBEREMPLOYEES');"/>
then simply set the value like:
$(control).val(data);
3: There are other ways as well to grab an asp.net element like shown here. Find ASP.NET ClientID in jquery

Related

asp.net button_click function returns weird value for devexpress ASPxHiddenField

I have a hidden field in my page:
<dx:ASPxHiddenField ID="screenWidth" runat="server" ClientIDMode="Static"
ClientInstanceName="screenWidth"></dx:ASPxHiddenField>
and I set its value using JQuery:
$(document).ready(function(){
$("#screenWidth").val($(window).width());
var value = document.getElementById('screenWidth').value;
alert(value);
});
(the last two lines are used to debug, and the alert shows the correct value).
On the same page I have a button for resizing one of the controls, according to the windows size, and I am trying to get the screen size:
string screenWidth = Request.Form["screenHeight"].ToString();
But, when I click the button, I get this for the screeenWidth variable:
{"data":"12|#|#"}
Request.Form["screenHeight"] returns the same string as above.
What am I doing wrong?...
It seems Devexpress framework has a dubious way (well, for me it's dubious) to handle their hidden field:
I had to set the window value to a new property of the hidden field:
$(document).ready(function(){
screenWidth.Set('scW', $(window).width());
alert(screenWidth.Get('scW'));
});
then, in the C# button_clik function I got the value this way:
string screenWidth1 = screenWidth["scW"].ToString();
This link helped:
How to get a value by a key from ASPxHiddenField
Quote from the article:
" The ASPxHiddenField component represents a dictionary that can
maintain an unlimited number of elements."
As Uranus suggested, this is stated in their documentation:
ASPxHiddenField Class

how to get value in javascript from document.getElementsByClassName('myTxtBox');

The html for the textbox I was to get the value from is created from a .js file -- from javascript. I tried this to get the value that I enter into myTxtBox which is defined by a className:
<input type='text' class='myTxtBox editable' name='myTxtBox' value='' maxlength='200' size='90'/>
....
I try to retrieve the value I enter into myTxtBox as follows:
var txtval = document.getElementsByClassName('myTxtBox');
alert(txtval);
...more stuff where I set a breakpoint
the alert says I have [object htmlcollection]
intellisense does not give me .value -- I only get txtVal.valueOf, but when I break into the code and hover over txtval I get a listing for >Methods, ..., >myTxtBox. When I expand the >myTxtBox list if I scroll to the bottom of that listing I DO see "value" in >myTxtBox list and it DOES equal what I entered on the web page.
How do I retrieve that value? I have tried all sorts of options from the intellisense, but it either gives an error msg or [object htmlcollection] on the alert. How do I retrieve the value I entered? Or -- do I use something different than document.getElementsByClassName('myTxtBox') for my scenario?
You would need to return the index + value as getElementsByClassName returns a HtmlCollection so there are many elements to it.. try this:
var val = document.getElementsByClassName('myTxtBox')[0].value
alert(val)
getElementsByClassName returns a HtmlCollection which is array like. Do this like this:
var txtval = document.getElementsByClassName('myTxtBox')[0].value
alert(txtval)
I discovered that I could add an ID to my input element 'myTxtBox' and use jquery to retrieve the desired value, so I did this -- added an ID to the textbox and use jquery in the alert to do a document.getelementbyID
//--generate the html section here
"...<input type='text' class='myTxttBox editable datepicker' id='myTxtBox' name='myTxtBox' value='' size='10'/>..."
function NextButton_Click()
{
try
{
alert($("#PositionStartDateTextBox").val()); <---and this displays the value entered into this textbox
....
The whole deal is I have to evaluate some date textboxes because users can enter values in manually -- I guess the best fix would be for this textbox to not be editable. That would be another question -- how to add a datepicker and not have an editable textbox.

How to retrieve the label text and pass to a string in asp.net?

I am using a label with the text as numbers. The label text is populated from javascript as below:
document.getElementById("label").innerText = arrList[2];
I want to use this label text to pass to a string.
string a = label.Text.
It is not working. The label text is empty even it has the value.
Help me on this.
try this:
I am assuming You are using Server side ASP control as Label
something like this:
<asp:Label runat="server" ID="label" />
then it should be
document.getElementById('<%=label.ClientID%>').innerHTML = arrList[2];
Description:
While Rendering page inside browser ASP.Net run-time will change ID of Server Side Controls So You need to Specify those controls using label.ClientID their client id
The problem might be that, the id of the label is not just label. Right click on the label in browser, choose inspect element and you will find the id of the label.
It will be like ContentPlaceHolder1_label or ct100_label or something.
To avoid confusion like this, you should use ClientID:
document.getElementById('<%=label.ClientID %>').innerHTML = arrList[2];

How to Change textbox text into another textbox in asp.net C#?

I am having two text boxes on my web page as txtGivenName and txtDisplayName. Now I want to display txtGivenName text on txtDisplayName while entering text on txtGivenName by using keypress event or keydown event.
I have tried some code for achieve this but not able to get the textbox1 value on textbox2.
My Code is:
<asp:TextBox ID="txtGivenName" runat="server" onkeypress = "copyText()" ></asp:TextBox>
Script code is:
function copyText() {
var givenName = document.getElementById("txtGivenName");
var displayName = document.getElementById("txtDisplayName");
displayName = givenName;
}
but nothing happened while entering text on txtGivenName. Can anyone suggest me to achieve this or tell me any other way to achieve this?
(Note: I dont want to do this by OnTextChanged event, Bcoz it will populate the first text box value on second one after text enter got over only. While entering the text on first textbox we need to change the text on second textbox simultanously)
Thanks.
I got the exact answer for this feature by using below mentioned script code.
Solution:
function OneTextToOther() {
var first = document.getElementById('<%= txtGivenName.ClientID %>').value;
document.getElementById('<%= txtDisplayName.ClientID %>').value = first;
}
Take a look at the page source in the browser -- "txtGivenName" and "txtDisplayName" are not going to be the IDs of the text boxes because ASP.NET prepends the IDs based on the control hierarchy so they are globally unique.
You have two options -- use "<%=txtGivenName.ClientID%>" to get the true name of the text box in javascript, or set ClientIdMode="static" on the text boxes so the IDs are left alone.
function copyText() {
var givenName = document.getElementById("<%=txtGivenName.ClientID%>");
var displayName = document.getElementById("<%=txtDisplayName.ClientID%>");
displayName.value = givenName.value;
}
You can try keyup event but I know only Jquery method to do it.
<input class="one" type="text"/>
<input class="two" type="text"/>
$(".one").on("keyup", function(){
$(".two").val($(".one").val());
});
here is the demo: http://jsfiddle.net/pUpZA/
PS: the asp:textbox translates to input when you compile so its basically the same thing. use "CssClass=one" for your asp:textboxes

javascript - get object data

In my rails application, i have a form where user has to select some items via checkbox. I want to display the selected items' information in a div.
I am currently using javascript to do that.
So in form, when user clicks in a checkbox, i pass the 'this' obj as parameter to a javascript function which then appends the 'this.value' to the end the div.
However appending the 'this.value' displays only the id of of the selected item. I also want to display the other data of the selected item in the div.
Is that possible in javascript? How do i get other information of the 'this' obj, apart from 'this.value'?
Many thanks for any suggestion provided.
Please find code below-
#in my form:
<input id="id_<%= item.id %>" name="submission[item_ids][]" onclick="addtoselected(this);" value="<%= item.id %>" type="checkbox" />
javascript code:
function addtoselected(obj){
if(obj.checked==true){
var s = '<div>' + obj.value + '</div>';
$j('#selected_recs').append(s);
}
}
If the text you want is in a label, you could loop through all labels and check which one has the id in his for attribute.
Use the contents of this.value to lookup the information you need. You could send it as a parameter to a server-side script to get its information back in JSON format, or if you already have an existing javascript object store, you could look up the item's information from there.

Categories

Resources