IE10 issue with form tag - internet-explorer-10

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

Related

Using cookie authentication and POST in an iFrame (iFrame content is ASP MVC Core, parent site 3rd party)

I have read through many answers on this topic but none seem to apply to what I am trying to do (or I am misunderstanding the problem entirely). Where a lot of my confusion lies is around whether it's the parent window or the iFrame that needs settings changed.
We have a small portal that allows users of our customers (asp mvc core 6 multi tenant app) to login and view their data. So far it works great, all but 1 of our customers do not iFrame the portal, we are trying to make it so they can frame our portal. They have their own domain.
Our authentication is the regular ASP Identity using cookies that is built in to the framework.
I've recreated a similar setup, I have a simple parent site that has this (the sub domain is their own sub domain to our site and if you go there you get the regular portal).
<div class="text-center">
<iframe src="https://sub.ourdomain.com" width="525" height="800" name="b3iframe"></iframe>
So far anything I do other than link to a new page fails within the iFrame. I can't POST a form, use AJAX, etc. Another problem is even if try to log them in (without POSTING a form, just hardcoded login for testing) the cookie does not set and the portal returns to the login page.
I have tried setting 'same-site=none' on both the parent and the framed site. (like what this describes).
I have tested simple things like making a fetch request and that fails (I get a 302)
All POST calls fail (even ones that don't require authentication, just test pages fail with a 400). When I get the 400 response code it is displayed within the frame.
I am aware and have used the ability to pass messages between the parent and iFrame but I don't think that can solve the cookie/POST problem.
I have tried using the 'target' attribute on the form to point to the iFrame but it appears that is for situations where the form is not inside the frame
The iFrame code can be just a simple login form:
<form method="post" id="loginForm">
<div class="form-group">
<label>Email Address</label>
<div>
<input asp-for="UserName" class="form-control" />
</div>
</div>
<div class="form-group">
<label>Password</label>
<div>
<input asp-for="Password" type="password" class="form-control" />
</div>
</div>
<div class="mt-5">
<button type="submit" style="width:100%" class="btn btn-primary tenant-custom-button">Log in</button>
</div></form>
What's frustrating is even in a mock parent website that I made and have full control of I can't seem to set it up so that the iFrame can use cookies or POST/GET (the test parent website is also ASP MVC CORE). The only thing I can do is have links to other pages without auth or POSTS.
Thanks for your time,
Brian

why use asp-controller and asp-action if it is not compulsory

#model Task3.Models.NewUser
<form action="" method="post">
<label>first Name </label>
<input type="text" placeholder="enter name" name="firstName"/>
<input type="text" placeholder="enter last name" name="lastName"/>
<button type="submit">Submit</button>
</form>
This code works even without asp-controller and asp-action. Why should I use those then?
The tag helpers asp-controller and asp-action can be used to automatically generate a target URL but you don’t have to use them. All they do is automatically generate the href attribute for links and action attributes for forms. If you want to fill in thos values manually, there is nothing that’s stopping you from doing that.
However, using the tag helpers has a clear benefit: The actual URL that you have to use depends on various things that affect your application’s routing. So if you use manual values, you have to take that into account. And if your routing changes (for whatever reason), you have to manually update the URLs throughout your templates.
By using the tag helpers, you are attaching the target location to something that is usually rather static: A controller action. So that way, you decouple the template from your routing configuration.
One more note for form actions specifically: If you do not specify a form action, the browser will automatically post to the current URL. So if you have a POST handler on the same route as the form, then you can totally omit the action and depend on that behavior.

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:

Different Ways of creating Buttons in DOJO Framework

Hi , i found these two ways for creating Button in DOJO Framework
<input id="cb" dojotype="dijit.form.Button" name="developer" type="Button" />
<button dojoType="Button" widgetId="helloButton" onClick="helloPressed();">Hello World!</button>
Please tell me if there is any difference between these two ways of creating buttons in DOJO ??
From Dojo's dijit.form.Button documentation, the difference is in the html tag underlying dojo's widget. Here <button> vs. <input type="button" />. Which to use? there is an interesting discussion about html button vs html input with type=button.
The main difference is that the second choice lets you write html content between tags.

HTML form submission in struts

Can I submit a simple html form with html tags and no struts tags. I'm using struts 1.0 and have a form like this:
<form action='/admin/fsubmit.html?action=search' method='post'>
<input type='text' name='keyword'>
<input type='submit' name='search' value='Search'>
</form>
I'm handling this submission with struts. but it seems like my action is never called. Do I need to use form with struts html tags?
If using struts html tags is the only option then how do I use two forms in single Action class?
The answer is yes,
The problem I see here is your action='/admin/fsubmit.html?action=search'. It's either your action is mapped to a .do extension or .html. If it's the latter, then your relative URL isn't mapped properly.