1

I am working on an Angular application and i have a view who is containing an iframe (The purpose of that iframe is just to display a login form).

Like my attempt to submit the form manually was unsuccessful, i tried to log the formular to check if i am really able to reach it but i am confused about how to do that...

the form inside the iframe have name attribute myForm

 <iframe id="myIframe" name="myIframe" src="someUrl.com"> <html> ... <form name="myForm" class="form" action="myAction()" method="post" onsubmit="myStuffToDO()"> ... ... </form> ... </html> </iframe>

So the way that i am trying to log the form in my controller is like that:

 var iframeForm = angular.element.find('myForm'); console.log(iframeForm);

the result in hte console is that:

[]

I am really confused about how to do that so any help would be really kind.

Improve this question
1
  • The action attribute is missing a closing double quote in your snippet. Commented Jul 22, 2015 at 10:09

3 Answers 3

Reset to default
1

.find('myForm') would find <myForm> tags, not tags with an attribute with the "myForm" value. .find('[name="myForm"]') is what you are looking for, but it won't work with the built-in element implementation because .find, as stated in the docs, is "Limited to lookups by tag name". That means you'll need to also include jQuery in your project. Then Angular will use it instead of its jqLite implementation and complex selectors will work.

Improve this answer
Sign up to request clarification or add additional context in comments.

11 Comments

If jquery is already included in the project .find( ' [name="myForm"] ' ) should work?
So if it is not working, it could be because jquery is not included in the remote app targeted by the iframe or it is impossible?
So the iframe loads stuff from another domain and you are trying to do JS stuff in it from outside? Then there are two situations: either the JS is outside and you might have a cross-domain permissions issue, or the JS is inside and you don't have jQuery there.
Anyway to try it in standard javascript with angular? Do you have an example in mind?
How about doing a document.getElementById('myTable') and add a id="myTable" to the table instead?
|
0

You can access using form name withing scope like below:

console.log($scope.formName);

You can access all elements by their names inside formName object.

Improve this answer

2 Comments

Thank you for your help but it's not working, maybe because it is inside an iframe where the code is in standard javascript
Have you tried plain JS, document.getElementByTagName('myForm')?
0

from the page you can access angular element by angular.element+jquery selector

eg : angular.element("[name='myForm']")

Improve this answer

1 Comment

I have already tried that but it is not working, look at @Sergiu Paraschiv answers, maybe you know another way?

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.