How can I get ClientSide(JavaScript) Value for My ASP.net Custom Control?
for example I want to get a value like this:
var selectedItemID = getElementById("<%=MyControl1.ClientId%>").value;
How can i set a specific Value in my control scripts to get it from ".value" property like above?
Additional Note:
i want ".value" property(javascript) to get the dropDown control(one of my controls in my custom control) selected Value.
You can have a custom attribute for your custom control while it is rendering and bind the necessary value. Then in the Clientside, you can get the custom attribute and get the corresponding value from it.
For ex: Say suppose you are adding a custom attribute to your control using the code below while rendering,
MyControl.Attribures.Add("attributeName","Value");
then you can get the value in the clientside using the code snippet below.
var controlValue = $("#"+"<%= MyControl1.ClientID %>").attr("attributeName");
This would give you the value that you stored in the custom attribute of the control.
I'm not sured but You can try this:
var control = $find("<%= MyControl1.ClientID %>");
may be following link usefull for you No error message displayed for custom validator
just do like this way using jquery:
$("<%= MyControl1.ClientID %>").val();
using javascript:
var Val=document.getelementbyid("<%= MyControl1.ClientID %>").value;
hope this help.
If your control rendered as an input, your code will work but if it is anything else, such as a span or label, you need to use .innerHTML instead of .value
Related
I'm unable to remove the placeholder after set the user name.
Anyone have idea how to remove place holder once set user name by using console
Link : https://login.microsoftonline.com
document.getElementById("i0116").value = "singapore#mail.com"
The trick is, Microsoft didn't used native HTML placeholder. They have added extra div for placeholder. You just need to hide that div after setting the value. Please see following code
document.getElementById("i0116").value = "singapore#mail.com";
document.getElementsByClassName("phholder")[0].style.display = "none";
Modified:
Microsoft is using Knockout for data binding. That's why you need to fire change event to set the values in ViewModel. Use following code after above two lines.
var event = new Event('change');
document.getElementById("i0116").dispatchEvent(event)
I have a couple of lists on a configuration page in my application where users can configure the order of items as well as the selection for specific application pages. I'm using the ID of the dynamic controls added at runtime to move them from A to B, but currently this doesn't work due to my JavaScript failing to retrieve the ID of the control selected.
After digging down and inspecting further, the dynamic controls aren't getting an ID attribute assigned automatically, instead the ID is applied to the name attribute of the control which is why the JavaScript is failing.
I'm using both dynamic HtmlGenericControls and Textboxes.
JavaScript that retrieves the ID, it works when I switch this.id to this.name. However I need to use the ID attribute.
document.getElementById('itemID').value = this.id;
'itemID' is a hidden input field.
I've tried applying runat="server", clientidmode="static" / "autoID" but no luck so far.
Why is my dynamic controls getting the ID assigned to the name attribute instead of the ID attribute?
Is there something missing that I need to add to make it apply it to the ID attribute?
If you need any more information just comment below :-)
Additional Information
The web page is using a master page, so the controls are added within content place holders.
I've tried setting the ID in the javascript which added the ID to the attribute correctly but when doing the following the item was still null.
this.id = this.name;
TextBox selectedItem = (TextBox)exampleList.FindControl(itemID.Value);
Example of the dynamic control after being added:
<input name="ctl00$uniqueBody$ctl86" type="text" value="EXAMPLE" runat="server">
As you can see the name attribute holds the ID.
When you create Dynamic Control and want them to have an id, you need to specify that when creating them.
TextBox tb = new TextBox();
tb.ID = "TextBox1";
PlaceHolder1.Controls.Add(tb);
Now JavaScript can locate them by their ID, and FindControl will also work. FindControl works recursively, so you first need to find the ContentPlaceHolder on the Master page, then the PlaceHolder and then the dynamically created TextBox.
ContentPlaceHolder contentPlaceHolder = Master.FindControl("ContentPlaceHolder1") as ContentPlaceHolder;
PlaceHolder placeHolder = contentPlaceHolder.FindControl("PlaceHolder1") as PlaceHolder;
TextBox textbox = placeHolder.FindControl("TextBox1") as TextBox;
If the value of this.ID is not a string, but instead is of type int, double, etc, you'll see problems like this with your code when trying to assign to a string value. You need to use either Convert.ToString(this.id) or this.id.ToString(). The latter cannot handle nulls on its own.
document.getElementById('itemID').value = Convert.ToString(this.id);
document.getElementById('itemID').value = this.id.ToString();
What you are seeing now instead is the default method, which prints the control Type. If you see the type like that, you likely passed the whole control in and not its value. That suggests you need to check a text value.
document.getElementById('itemID').value = this.id.Text;
Have you tried:
this.name.id
?
i want to change the attribute of a text element from required to not required. I am using javascript to do this. i am calling a function based on the input of the radio button and i am using html 5..
document.getElementById("adiv").removeAttribute("style")
document.getElementById("myimage").setAttribute("src","another.gif")
var getvalue=document.getElementById("myimage").getAttribute("src")
Now but it in a function and use it how you wish.
That is how you get set and remove attributes in JavaScript.
Source: http://www.javascriptkit.com/dhtmltutors/domattribute.shtml
I think I want to do something simple, but I'm not sure how to execute it. I have been trying for hours now, with little luck.
function myFunc (form) {
// determine currently selected field on form - Thank you James!
var currElem = document.activeElement;
myAJAX_request(); // This will regenerate the form (no field selected)
// restore currently selected field on form
currElem.focus(); // This does NOT work -- WHY?
currElem.select();
}
I'm looking for a clean implementation that will use "document.forms..." to find the input fields, instead of having to put an id tag on every single form element. Is this possible?
You can use framework such as jQuery. jQuery has .serialize() method that should do exactly what you need. Here it is
You could use document.getElementByName. I do assume you have names for your fields atleast, don't you ? Store them in a variable/cookie and retrieve it back after your myAjax_request().
and to make your life easier in future,
You could use other selectors of jquery, like name, class, etc.
Read about jQuery's selectors here.
I have a form which has many elements (e.g. textarea, input, select), after users have entered some data the states of these elements should change.
For example, an input[type="radio"] element will have the attribute checked="checked" if a user has checked it. The value attribute of an input[type="text"] element will contain the text entered by user.
The problem is that the html string returned by $('#form1').html() does not contain these data.
Feel free to take a look at this example:
http://jsfiddle.net/cmNmu/
You can see that no matter what your inputs are, the html returned is still the same (having no attribute data).
Is there any easy way to collect the html including their states?
Thanks in advance.
use below code getting the value of input type text via jQuery
alert($("input:text").val())
Maybe you could use the 'onblur' event handler to set the value of the element when you leave it
You should get the value using :
$('#form1').find(':input').val();
$('#form1').find(':radio[name=gender]:checked').val();
if you have multiple input then you can filter them bu their name or class or even id. Then you will need to select input using .find(':input[name=input_field_name]'). My Suggestion is : use name property instead of other property if you want to use form.
People usually use $('#form1').serialize() to get the values. If html() doesn't return both the source and data, I don't think that there is something you can other than manually constructing the full html by looking at the data.
Live demo: http://jsfiddle.net/cmNmu/6/
By using the jQuery formhtml plugin written by gnarf:
jQuery html() in Firefox (uses .innerHTML) ignores DOM changes
The changes in the input elements can be reflected in the html string returned by formhtml().
Thank you very much everyone.