I have an input tag having some text in it. Now I would like that onclick of a button the text will be changed.
For some reason it is not being changed.
This is the input tag:
<input id="network_table" type="text" value="oldValue" runat="server"/>
the following is the way I am trying to change the value of the input tag:
network_table.Value = "newValue";
network_table.Text = "newValue";
Bind the "onclick" event and apply this these methods:
In jQuery :
$('#network_table').val("your val");
http://docs.jquery.com/Val
Javascript
document.getElementById('network_table').value = "your val";
you can do it serverside with "OnClick" event on button, assuming your controls are defined with runat="server" attribute
http://msdn.microsoft.com/fr-fr/library/system.web.ui.webcontrols.button.onclick(v=VS.80).aspx
You could try and assign some meaningless class to the input and use that as a reference point to get in hold of the input field.
<input id="network_table" type="text" value="oldValue" runat="server" class="myInputField"/>
$('.myInputField').val('newValue');
Using the id will not work because you are using the 'runat=server' and it makes the id unavailable on client side and you would need to get the unique id first to be able to get in hold of it. This is a lot cleaner way but you need to make sure not to use the class elsewhere to avoid ambiguous results.
Here is a jsfiddle example which does what you want but on load.
http://jsfiddle.net/yX5ze/
Related
I have been having trouble updating the value for my input type=text or the texbox control text value with the jquery $(window).resize(function(){}); I know that the event fires because when i resize the browser an alert will appear. I also am using the functionality for something else.
It currently looks like this:
$(window).resize(function(){
if($(window).width()>1080){
var innerwidth = $(window).width()-170;
$("#div1").width(innerwidth);
}
I want to add this:
$(window).resize(function(){
if($(window).height()>500){
var innerheight = $(window).height();
$('input.hiddentest').val(innerheight);
}
I know that the issue lies with:
$('input.hiddentest').val(innerheight);
I have also tried this:
$('#texttest.ClientID').text(innerheight);
This is the input and the textbox below that I am using(note that the type used to be hidden, but i dont think that makes an issue and I wanted it to be visible for debugging purposes)
<input id="hiddentest" type="text" visible="true" name="hiddentest" onclick="test();" runat="server" value="1000" />
<asp:TextBox id="texttest" Visible="true" runat="server" Text="1000" />
Overall I have been looking for a way to dynamically update the values as the page resizes with the size of the page. My geuss is that i am not using the right thing to identify the id's. Thanks for taking the time to look at this and for any replies.
P.S. I am also open to the idea of using a javascript function instead but i can't even seem to get the function to fire for the resize event so it would require more help.
This is what i have so far:
window.onresize=Test();
function Test(){
var hdnfld= document.getElementById("texttest");
var testing = window.innerWidth;
alert(testing);
hdnfld.text= testing;
}
Use just ID of elements without dots (that actually represent the classes you don't have).
So use
$('#hiddentest').val(innerheight)
and
$('#texttest').val(innerheight)
Note that asp:TextBox renders as inptut type="text" so you still have to use .val() on it, not .text()
Hidden text box id is "hiddentest" so the code will be
$('#hiddentest').val(innerheight);
hiddentest is an id not a class in your case
Try,
$(window).resize(function(){
if($(window).height()>500){
var innerheight = $(window).height();
$('#hiddentest').val(innerheight);
}
});
<asp:TextBox id="texttest" Visible="true" runat="server" Text="1000" />
For the above asp.net textbox control, the ID changes dynamically when rendered (prepended with master and page information), id looks similar to main_ctrl100_texttest
var hdnfld= document.getElementById("texttest");, so this no longer holds good. Use a class instead.
<asp:TextBox id="texttest" Visible="true" runat="server" CssClass="texttest" Text="1000" />
var hdnfld = document.getElementsByClassName("texttest");
If you need more info on how to access .net controls using jquery, see here.
How can I recover a Css class that was add via JQuery in my <asp:TextBox> component ?
Example:
ASPX
<asp:TextBox ID='txtTest' runat='server' CssClass='inputText'></asp:TextBox>
JQUERY
$('#txtTest').addClass('testClass');
Page Renderized
<input type='text' ID='txtTest' CssClass='inputText testClass' />
Code Behind
How can I recover the testClass that was add via Jquery in my <asp:TextBox> component ?
I tryied this.txtTest.CssClass but return just inputText class.
You won't be able to retrieve this because changes to style aren't even submitted in the request. ASP.NET will reconstruct the object from what "it knows" about it, that is, the original markup in this case.
If you must keep track of this, then you are going to have to add the new class to a hidden element and retrieve it on code-behind:
<input type="hidden" id="addedClasses" name="addedClasses" />
Then the jQuery part:
$('#txtTest').addClass('testClass');
$('#addedClasses').val('testClass');
And on code behind:
string addedClasses = Request.Params["addedClasses"];
The only way I can think to do this is to put the TextBox's class into a Hidden field with javascript and have it be sent back to the server on a POST.
Do any one know how can I get the textbox value based on the name in controller?
Example:
<asp:TextBox runat="server" ID="stDate" Text='<%# Eval("StartDate")%>' Width="6em" />
When I read from the source code, it's show as below:
<input name="ctl00$cplh$GridView1$ctl10$stDate" type="text" id="stDate" style="width:6em;" />
How can I get the get this textbox value based on the name ctl00$cplh$GridView1$ctl10$stDate in the controller?
NOTE: the reason I would like to do in this way is because I have more then 1 textbox are using the same ID (stDate)
To get the ID generated on the page, you have to get the ClientID
stDate.ClientID
there's a few things I want to suggest:
ID's must be unique, you should assign an unique identifier to each controller in your page.
.NET needs a hook to your control - so it needs to set the name if it is going to be created by .NET (you can't change it even if you try to force it).
If you want to assign a common name between controllers use the attribute class, for example:
<input id="txtbox1" class="commonController" type="text" value="input1">
<input id="txtbox2" class="commonController borderClass" type="text" value="input2">
p.d.: remember, you can assign multiple classes to a controller.
Also remember that id is only for client side DOM manipulation... name is required for the browser to actually post the content
If you want more info check here and here
If you using ASP.NET 4 you can you set the ClientIDMode to static on the textbox then asp keeps the id as you had set it.
<asp:TextBox runat="server" ID="stdate" ClientIDMode="Static" />
This helps if you need to use the textbox in client side scripting. Here's an article on it. You would need to make sure that the id is unique then, if you need a common name it would be better to use a class as Luis suggested.
I am trying to integrate with a payment gateway. They require a set of hidden input boxes to be posted to their gateway like:
<input id="orderref" name="orderref" type="hidden" runat="server"/>
I have added runat="server" so I can dynamically populate the boxes with values.
However, of course at runtime the input box name gets changed to:
<input name="ctl00$ContentPlaceHolder1$orderref" type="hidden" id="ContentPlaceHolder1_orderref" value="9" />
I'm in a catch 22. If I remove runat="server" all is fine with regards to the name, but I then can't populate the input box with values! Is there a means to force the name of the field to stay the same?
Depending on what .NET version you are using the control over this differs: basically, pre-.NET4 you can only alter the container prefix by implementing your own, but from .NET4 you can omit the container prefixes using ClientIDMode.
Alternatively, you may expose methods, say, on your page or master page and then call them using inline-scripting (<%=MyMethodReturningValue() %>) which is evaluated at the time of render.
EDIT:
To elaborate a little on my second suggestion, you can define a method in your pages code-behind that can be executed in an inline manner by use of embedded code blocks; the referenced link gives simple examples of this, but the methods needn't be in <script> blocks of the page itself (as I previously touched on) so that you can keep your logic separated, such as:
Define a method in your page's code-behind:
public string RenderMessage()
{
return "This need not be a hard-coded string!";
}
Write out your input element, omitting the runat attribute, and adding the embedded code block in place of where the value would be (think of this as a place holder); this code block is going to call the specified method on pre-render, and essentially be replaced by the returning value:
<input id="orderref" name="orderref" type="hidden" value='<%=RenderMessage() %>'/>
If you are using ASP.NET 4.0, you can set clientidmode="Static" on the <input> which will cause the ID to stay exactly as you set it. There are caveats to this, but in general should work for your needs.
Documentation on ClientIDMode
Edit: As it turns out, they need the name attribute to be static, which ClientIDMode does not control, and can not be set programatically in ASP.NET, it only controls the id attribute.
Use the following code:
Page.ClientScript.RegisterHiddenField("orderref", "9")
This creates the following hidden input:
<input id="orderref" name="orderref" type="hidden" value="9" />
For more details see System.Web.UI.ClientScriptManager.RegisterHiddenField on MSDN
I also struggled with this issue and eventually found the following solution:
In the markup I have the following:
<%=html %>
In the codebehind I have a protected variable:
protected string html;
I then set this variable as follows:
html = "<input id='Express_Receipt_Email' type='hidden' value='" + sessionUser.EmailAddress + "' name='Express_Receipt_Email'>";
i need to do the following two things...
i want to set value of in asp .net page_load. the problem is that i dont want to use runat="server". i have tried this the following but it does not work:
HtmlInputHidden hiddenControl = (HtmlInputHidden) FindControl("a");
is there a way to access in asp .net page_load without using runat="server"? ? ?
i can do this if i use but in this case i cannot access it in master page's javascript function. i have tried this but it does not work...
var hdnField = document.getElementById('<%= hdnIdentity.ClientId%>');
var hdnField = document.getElementById("hdnIdentity").getAttribute("value");
var hdnField = document.getElementById("hdnIdentity").value
what i need... i want to access content page's hidden field value in javascript in master page. is there a way ? ? ? thnx in advance regards Haroon haroon426#yahoo.com
I sometimes do the following, especially when I want control over my ids (especially when using jquery).
<asp:literal id="literal1" runat="server"><input type="hidden" id="someid" value="{0}"/></asp:literal>
Then, in codebehind you can set the value with the following:
literal1.Text = string.Format(literal1.Text, "somevalue");
This doesn't really get around using runat="server", but you haven't specified why you don't want to do that. Also, you'd have to get the value with a request.form
Update
In .net 4.0 you have much more control over your IDs. See this for more information:
http://weblogs.asp.net/asptest/archive/2009/01/06/asp-net-4-0-clientid-overview.aspx
IIRC, you need to look in the HttpRequest.Forms, somewhere in there.
If the value is part of a POST form then you want to check Request.Forms or Request.QueryString if it's a GET form.
ad 1) in aspx file just write <input type="hidden" value="<%=GetHiddenValue%>" />. And in your code behind define protected property
public class MyPage : Page {
protected GetHiddenValue { get { /*...*/ } }
You can use it in your master page javascript how ever the control name is not what you expect it to be you'd need to use ClientID to get that. If you do not apply runat=server you can only get a hold of the control as text by either traversing the .aspx file or as some one mentioned embedding it in a named tag and then doing string manipulation on the inner HTML. That is for setting it. If you need to get the value use Request[tagName] or similar
ad 2) You can use simple html code in your content page with specified id <input type="hidden" id="myHiddenField" />. Then in master page javascript use document.getElementById('myHiddenField').