Dynamic control 'ID' automatically added to 'name' attribute, instead of ID attribute - javascript

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
?

Related

Javascript querySelector

In Robot I have a keyword that inputs the name of the associate in the search field, then i submit the form. It currently works only for a specific test account. I want to make that dynamic to work no matter what name I type. Of-course as long as the name exist in our system
Execute JavaScript document.querySelector("#add_associate_089 > img").click();
add_associate_089 > img = the image we display next to the associate name in the results page contains the record id
Im trying to make add_associate_089 dynamic this is the associate id we have in our database.
Any suggestions as to how I can accomplish this in robot?
You can try: [id^="add_associate_"] > img - this will select anything where id starts with that.

Is there any way to edit a URL to embed a form entry?

I know it is possible to embed form values into the URL as parameters if the form has an ID assigned to it. But what if it does not have an ID?
For example the "Search" field in this page:
http://au.autodesk.com/speaker-resource-center/call-for-proposals/voting
<input type="text" placeholder="Search " class="form-control ng-valid ng-dirty search-box" ng-model="search.$" ng-change="updateButtons()">
I know it is possible to embed form values into the URL as parameters if the form has an ID assigned to it.
That is not true.
Server-side (and occasionally client-side) code on a page may read the query string as a means to set default values for form controls (typically so that a form can be corrected and resubmitted if there were errors in the previous attempt).
In these cases, the name attributes will usually map onto the query string (because the form will generate the query string from the name attributes). Often an input will be given an id that is the same as its name.
It is entirely under the control of the site's authors.
There is no way to set values of inputs on another site without the other side providing a mechanism to allow you to do that.
There's a few different ways to do that. Looking at that HTML, it's the first text-type input inside the div, so the first method that comes to mind is this:
You could pull out the div (using the class "search-area") and then target the first text input box within that div. I don't know whether you're using jQuery or native JS or exactly what language/library/framework you're using.
JQuery would be something like:
var inputElement = $(".search-area")[0].first()
This SO answer may help:
jQuery: how to find first visible input/select/textarea excluding buttons?
Edited to add: Answer is targetting the input element. As the answer from someone else mentions.. You can't actually do what you're wanting to do with the URL.
Edited again. Misread the question. I'll leave this here in case someone else needs to know how to target an input field that doesn't have an ID. Alternatively, I have no problems if someone wants to delete this answer.

While automating using html code to locate element by id to send keys some values are changing in each refresh in the site

While automating using html code to locate elements by id to send keys some values are changing in each refresh in the siteWhile automating using html code to locate element by id to send keys some values are changing in each refresh in the site.
For example Username has input_0 and password input_1 and after refreshing or make the login the go back to login screen the value is increased !
Is there a way that we can make it always by default (not increased).
Here are 2 example to understand what i'm talking about username in the first one is input_0 (the origin) and in the other is input_4 (for the same field)
You don't have to use ids to locate elements, especially if they change dynamically and are not reliable enough. Instead, I'd use the by.model approach:
var usernameInput = element(by.model("credentials.username"));
If you then, say, need to locate the corresponding label, you can do it this way:
var usernameLabel = usernameInput.element(by.xpath("preceding-sibling::label"));
Or, using the id of the input:
usernameInput.getAttribute("id").then(function(id) {
var usernameLabel = $("label[for=" + id + "]");
});
I have used tagName instead of Id in order to locate element to make automation.

Getting values of html form elements in Asp.net added dynamically via Jquery

Hello there i have written some code in jquery to add new input type elements in aspx page! Now I want to fetch values of these elements via ASP.NET! I know if i want to achieve this i will have to store each values in hidden form elements n then fetching hidden element val in cs file! I am curious if i could get a direct/shortcut way to fetch the values of each dynamically added contols in Asp.Net incase there were dozens of elements which were added dynamically in jquery!
Thanks in advance
When you add inputs on the client-side, the server doesn't have an object created to access its POST data like it does with your runat="server" controls. There are a few options:
1) Use a script to set the value of a runat="server" HiddenField before postback.
2) Access Request.Form["YourInputName"].
Give every element you add to your page a class, say "dynamic". Before postback, update a HiddenField like so:
var hiddenValues = "";
$(".dynamic").each(function(){
hiddenValues += $(this).val() + ",";
});
$("#hiddenField").val(hiddenValues);
Then access the comma delimited hidden field value in the code behind.

How to Get ClientSide Value from ASP.net Custom Control?

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

Categories