Find input value and associated html label text in asp.net - c#

I have the following setup:
<label for="<%= inpUserName.ClientID%>">Email</label>
<asp:TextBox id="inpUserName" runat="server" />
As you may noticed the label is not asp's label. How do I get the value of the input and the text of the label?
Edit
I am trying to loop through the posted form keys and get associated labels.

You could use <asp:Label> directly, just need to specify AssociatedControlID
<asp:Label ID="UsernameLabel"
Text="Email"
AssociatedControlID="inpUserName"
runat="server">
<asp:TextBox id="inpUserName" runat="server" />

Make the label server-side:
<label runat="server" id="lblEmail" for="<%= inpUserName.ClientID%>">Email</label>
Then you can access its text in code behind like this:
// label text
string labelText = lblEmail.InnerText;
// input value
string inputValue = inpUserName.Text;

change to:
<label runat="server" id="ClientID" for="<%= inpUserName.ClientID%>">Email</label>

You can find the textbox using the Id var txt = inpUserName.Text; for the label you can't, since its not a server side control and its not a request variable (input with value for instance) then you can't, unless you make it server side too and access in the same manner.

Related

Changing value of input element without changing element id

I have an ASPX page with an input element. On page load I set the value of that input element. Later on I try to get the contents of that field using the elements id(using javascript) but it fails because the id has been changed. Is there any way to stop C# from changing the elements id?
input element:
<input id="conferenceDate" runat="server" style="width:100%;" />
Setting the date in the Page_Load function:
conferenceDate.Value = DateTime.Now.ToString();
The id after the element vale has been set:
<input name="ctl00$PlaceHolderMain$conferenceDate" type="text" id="ctl00_PlaceHolderMain_conferenceDate" style="width:100%;" value="7/21/2014 11:30:55 AM" />
UPDATE: I have tried the following but neither work the id is still changed:
<asp:TextBox ID="conferenceDate" runat="server" ClientIDMode="Static" />
and
When I try to select them later with jQuery I have to use the altered id:
$("ctl00_PlaceHolderMain_conferenceDate").val()
In addition to setting the ClientIDMode to static, you can also find the id using the ClientID property.
<%= conferenceDate.ClientID %>
Using your sample information you can find it like this:
Single or double quotes and dont forget the hash mark (or dot if its a class).
$("#<%= conferenceDate.ClientID %>").val()
Try setting the ClientIDMode of the Textbox to "Static" (More info: http://msdn.microsoft.com/en-us/library/system.web.ui.control.clientidmode(v=vs.110).aspx):
<input id="conferenceDate" runat="server" ClientIDMode="Static" style="width:100%;" />
You can set the ClientIDMode to Static.
This will prevent the controls ID from changing at runtime.
E.g:
<asp:TextBox ID="conferenceDate" runat="server" ClientIDMode="Static" />
Why not to use the asp:textbox and set the ClientIDMode to static?
<asp:TextBox ID="conferenceDate" runat="server" ClientIDMode="Static"></asp:TextBox>

What is the difference between the Text property and the inner text of an asp:Label tag

One can specify label text to be displayed in 2 different ways:
Method 1:
<asp:Label ID="Label1" runat="server"
Text="Enter search string (optional):" ></asp:Label>
This will display: Enter search string (optional): Label text can be set from your code using Label1.Text = "SomeText";
Method 2:
<asp:Label ID="Label1" runat="server"
Text="Enter search string (optional):" >Please enter search string</asp:Label>
In this case Text attribute is ignored and it will display: Please enter search string
In all of the samples I saw Method 1 is used.
When would someone use Method 2 (if ever)? How can label text be set from your code for Method 2?
The Text property directly assigns Label1.Text. Writing in the tag's "inner text" adds a LiteralControl to the label's Controls collection.
The difference is that you could nest multiple controls in the label which can't be done through the Text property.
For example:
<asp:Label runat="server">
<asp:Image runat="server" ImageUrl="/image.jpg" />Some text
</asp:Label>
You can try to use Label1.innerText property to get the inner text of your control

How to set passwordchar property to asp.net TextBox?

I have one TextBox for Password and i want to set character for password, so which property can be used in asp.net?
<asp:TextBox TextMode="Password" runat="server" />
PasswordChar property is under this namespace, System.Windows.Forms. It is not available for asp .net web applications.
You could try JavaScript to change it into other characters such as "*" or "#".
You can see the following example to do so:
<script type="text/javascript">
function onTextChange(obj)
{
document.getElementById('hdnActualTextValue').value = obj.value;
obj.value = '';
for(int i=0; i<obj.value.length;i++)
{
obj.value +='*';//OR ANY OTHER CHARACTER OF YOUR CHOICE
}
}
</script>
<asp:TextBox ID="txtValue" runat="server" onblur="javascript:onTextChange(this);"
onkeyup="javascript:onTextChange(this);" onkeypress="javascript:onTextChange(this);"></asp:TextBox>
<asp:HiddenField ID="hdnActualTextValue" runat="server" />
OR maybe you could use input in HTML.
<label>PW: <input type="password"></label>
I think if you are using the Web Forms then in that the Password Characters are fixed. You can not change unless you use Javascript to change some behavior at run time
When we use WebForms in that PasswordCharacters are set by default.
Check out this link. You can get some Idea what I am telling you.
Simply use TextMode property in asp
<asp:TextBox ID="txtValue" runat="server" TextMode ="Password"> </asp:TextBox>

"Converting" asp.net form to html form

i have an asp.net webform. the users enter data into the textboxes and i do OnClick="SubmitData" with a button:
now i would like to use jquery and make my form look much better and i do not know if i can keep the asp.net controls or whether i have to convert to html controls.
question do i need to convert
<asp:TextBox ID="section_c_issue_error_identified_byTextBox" width="500" runat="server"
/>
to something like this:
<textarea name="comments" id="comments" rows="5" cols="60"></textarea>
and if so, how would i grab the user input from these new html textboxes?
can you tell me exactly how would i pass these values into my c# code?
You don't need to convert anything as it gets converted to html anyway on clientside.
There are few ways to grab the value of the text box such as,
If the following is my textbox,
<asp:TextBox ID="txtCountry" Width="500" runat="server" CssClass="countryText" />
I can use,
$('#<%= txtCountry.ClientID%>').val()
$('.countryText').val()
You don't need to convert anything, simply adding the property clientID the type static
ClientIDMode="Static"
That's warranted that the id asp component doesn't change the name of the id
<asp:TextBox ID="txtCountry" Width="500" runat="server" CssClass="countryText" ClientIDMode="Static" />
$('#txtCountry').val();
question do i need to convert
<asp:TextBox ID="section_c_issue_error_identified_byTextBox"
width="500" runat="server"
/>
to something like this:
<textarea name="comments" id="comments" rows="5"
cols="60">
Yes, you need to do that.
To capture input from those controls using JQuery, you need to do:
var elementValue = $('#elementid').val();
elementid is the id you assigned to the element in your markup. In your example above, it would be "comments".
elementValue will have the text entered in your text area.

get asp:textbox value in client side using javascript function doesn't work

This code doesn't display the value, I don't know why?
I have server control:
<asp:TextBox ID="txtTest" runat="server" Visible="false" TextMode="MultiLine"
Rows="3" Columns="23" CssClass="white-scroll" />
in javascript function:
var eventText = document.getElementById('<%=txtTest.ClientID%>').value;
alert (eventText);
I enter text then click on button that call the javascript function, but the alert box doesn't display the entered text.
EDIT: when I initialize the text with Text="some text", it is displayed in alert, I want to enter text in client side and get the value of it in the Javascript function.
Thanks
Using label or textbox visible set false so it can access the value in JavaScript
Sol
1)
Make a div and set style="display:none;" so label is not display at UI(browser) but value can access in JavaScript.
This is because you server Control is called "txtTest" not "txtEventDescription"
change your javascript function to :
var eventText = document.getElementById('<%=txtTest.ClientID%>').value;
alert (eventText);
EDIT: ok, I see you've now changed the post to show the code and renamed the js control, so above is no longer relevant (for those who are confused by my answer) :-)
The problem is the Visible="false" - this control will not render into the client and will therefore not be accessible via javascript (as the HTML element does not exist client side)
So, hide the element using CSS and then call alert on it. Sample snippet
CSS
.hide-element {
display: none;
}
HTML Markup
<asp:TextBox ID="txtTest" runat="server"
Columns="23"
CssClass="white-scroll hide-element"
Rows="3"
TextMode="MultiLine"/>
JavaScript
var eventText = document.getElementById('<%=txtTest.ClientID%>').value;
alert (eventText);
This way you will definitely get an alert.
You alert is empty because you have not set the property Text for your asp:Textbox
Make it Visible="true" to your textbox and than test.
<asp:TextBox ID="txtTest" runat="server" TextMode="MultiLine"
Rows="3" Columns="23" CssClass="white-scroll" />
if "txtTest" textbox has visible="false" in that case its not render on html code on client machine and if it hasn't on client's html code then how javascript calls this textbox. Because when javascript search this textbox by its id it doesn't find and it gives an error.
you can assign any other custom attribute to the control i.e.
<asp:TextBox ID="txtTest" runat="server" Visible="false" TextMode="MultiLine"
Rows="3" Columns="23" CssClass="white-scroll"
clientID="myClientID" />
and then access control using jquery like
var txtVal = $('textbox[clientID=myClientID]').val();
hope it helps.

Categories