C# Autofill input box in webbrowser control that has no value attribute - webbrowser-control

<input id="inputID" class="textfield" name="myData" maxLength="5" type="text" autocomplete="off">
I was looking for a way to fill the input box programmatically but there is no value attribute...
I tried element.SetAttribute("value", "blahblah");
Any ideas?
It involves C# Windows Forms Webbrowser.
edit: My thanks go to the only one who responded to my post. I've found a better answer for me which is to set the InnerText and then programmatically click the element so it would behave like if I typed something. I am still wandering though whether I could use SetAttribute or not.

If you include the 'runat="server"' attribute in your input tag, then you should be able to access it from the code-behind. For example:
<input id="inputID" class="textfield" name="myData" maxLength="5" type="text" autocomplete="off" runat="server"/>
can be accessed as such:
inputID.Value = "New Text";
Another StackOverflow article explains this: Accessing HTML Elements in ASP.Net.

Related

How to make a Input field in AEM/CRX required?

since our AEM guy is out of office at the moment, i need to fix something in our CRX. I have a form with a checkbox in my website, where authors can set a text next to it. Now i am trying to add the functionality to set this checkbox to be required from the authoring dialog.
I was able to find a textfield which has this property in authoring, but in the html in CRX i only see the code required=${required}, where other fields like label are shown like ${properties.label} and have a corresponding node in CRX. I don't understand how the required is implemented and need help here.
I already tried to add required=${required} to my checkbox input markup, but this did not work, since in the authoring dialog there still was no checkbox/switch to make the field required (which was kinda expected).
this is the line in the markup which should be required if the author sets it to required in the authoring dialog:
<input required="${required}" type="checkbox" name="campaignform-termsofservice"/>
this is the whole html of the checkbox i want to be able to make required:
<div data-sly-test="${!empty}" class="form__text">
<label class="maut-checkbox--container">
<input required="${required}" type="checkbox" name="campaignform-termsofservice"/>
<span class="maut-checkbox--checkmark"></span>
<span>${properties.checkboxtext #context='html'}</span>
<div>${properties.tncText}</div>
<div style="color:white;" class="authoring-error" data-sly-test="${wcmmode.edit && !tncDate.tncLinkActivationDate}">${'b2x.maut.campaignform.dialog.tos.activationmessage' # i18n, source='user'}</div>
<input type="hidden" name="maut.field.tnc" value="${tncDate.tncLinkActivationDate}" />
</label>
</div>
Now i only need to figure out how i can show the option to set it to required in the authoring dialog.
Thanks in advance
If you want to know how the required=${required} is implemented then first of all in html of the component look for something like data-sly-use.required. This will have a expression like =com.project.yourProject.className or some js file.
Lets discuss about the java case which is the most common way. What data-sly-use does is that it creates an object of the class that you gave in the expression. In your case your object is required. Then you need to check the java class that the expression evaluates to. Commonly all the backend logic code will be their and if some manipulations or validations are required to be done with the data that the author enters in the dialog will be their. This class will also contain annotations that maps the class variables with the property value of the dialog.
Hope this explains from where this ${required} came from. It will be more clear to you if you look into the java class that is referred to by the data-sly-use expression.

How to make a custom element post its value during form submit?

I'm creating a custom element that wraps a third-party control. For some reason, I have to apply this 3rd-party control on a <div> instead on an <input> or else it will behave differently.
I'm using x-tag to create the custom element.
You could insert a <input> tag with attribute type="hidden" and then duplicate the content of the <div> you want to post, it should work.
As an example, you can read this other post on SO.

Angular2 v4.0.2 and radio FormControls

I'm just curious if anyone else has had any issues with FormControl's and radio buttons. We recently updated to Angular2 v4 and radio controls which were working before have stopped. Given the below HTML and an associated FormGroup (not shown), the radio buttons can both be selected. I really hope I'm just overlooking something simple but was curious if anyone else has experienced similar behavior.
<input type="radio" formControlName="fcAdjustmentType" value="amount"/> <label>Amount</label>
<input type="radio" formControlName="fcAdjustmentType" value="percentage"/> <label>Percentage</label>
And before it's mentioned, the "name" attribute on the element is optional according to Angular:
Blockquote When using radio buttons in a reactive form, radio buttons in the same group should have the same formControlName. You can also add a name attribute, but it's optional.

unable to identify tooltip message present for the textboxes in selenium

i am trying to automate the login functionality of a site.I want to verify whether the tooltip is present or not and to capture the tooltip text displayed for the textboxes.The tooltip is displayed when trying to click on the login btn without filling the textboxes.The tooltip text is attached to the input elements via bootstrap javascript.No tilte attribute is present for the textboxes
https://elasticbox.com/login/ is the site address.Any ideas on how to capture the tooltip text .Thanks in advance
This is not a bootstrap tool-tip as you commented for #Varun's reply.
This is just the HTML5 form validation which comes into action when you put "required" as the attribute of textfield.
Make an html file 'test.html' file using the below code:
<html>
<body>
<form name='form1' post="http://www.google.com">
<input type='email' required placeholder='email address please' />
<input type='password' required placeholder='password please' />
<input type='submit' value='button1' />
</form>
</body>
</html>
Herein, when you click on "button1" (after opening the file in browsers like: Chrome, Firefox, etc.), you will see the necessary validation under the textfield(s).
But, there is no possible way to inspect them.
You can, however, use Sikuli/Autoit to check the presence of that validation text, but that again will be a lost cause as the image of the validation messages/tooltip differs from one browser to another.
Looks like developer needs to be consulted for this.
In javascript it seems like the signin button will remain disabled until both values are filled i.e. username and password.
I am not much into javascript, may be you can consult the developer in order to understand this more.
You can refer image below:

IE10 issue with form tag

I have div in html
<div id="test"></div>
If I do
$('#test').html(' <form method="GET" action="whatever"> <input type="text"/> </form>')
In IE 10 I will get
<div id="test">
<input type="text">
</div>
In Firefox or IE 8 I will get
<div id="test">
<form action="whatever" method="GET">
<input type="text">
</form>
Can you help me with IE10?
(jquery 1.7.2)
Around div test there is another form tag.
You stated in the end of your question that you are attempting to nest one form inside of another. Please have a look at the specification regarding the content model for form elements:
4.10.3 The form element
Content model:
Flow content, but with no form element descendants.
It is invalid to nest form elements. This may be why Internet Explorer 10 is trying to protect you from invalid markup that may not work properly in all browsers. The latest version of Google Chrome appears to also remove invalid child forms.
If you need to submit one form from inside another, use the form attribute on buttons instead. This will tell them which form they are to submit, and not necessarily the form they are currently in.
4.10.18.3 Association of controls and formsA form-associated element is, by default, associated with its nearest ancestor form element (as described below), but may have a form attribute specified to override this.
Note: This feature allows authors to work around the lack of support for nested form elements.
So you could have the following:
<form id="one">
<!-- This button submits #two -->
<input type="submit" form="two">
</form>
<form id="two">
<!-- This button submits #one -->
<input type="submit" form="one">
</form>
Try using .html() to append the the form with HTML functionality and after that use .append() to push every element in the form, so you have something like:
$('#test').html('<form method="GET" action="whatever"></form>');
$('form [action="whatever"]').append('<input type="text"/>'); // Note for selector will be better to use ID for the form