I have a form which is placed in an IFrame.I have added javascript function for validation. It will rise an error message when click submit button without filling mandatory fields.
The form contains more than 8 fields. The error message will be displayed in top of the page.
So when click the submit button, it stays the bottom of the page. So that, the error message is not visible.
For Scroll to up in an iframe, I have added the following code,
parent.parent.window.scroll(0,0);
It takes me to the top of the page in iframe.But , Skips the Javascript validation. It passes the request without validation.
Please help me on this one.
Thanks in advance
Set an id for the error's wrapping div, then use JavaScript's window.location move internally to this id, after - and depending- the mandatory field validation code (you can put it in a conditional statement).
An example on how to use it:
<!DOCTYPE html>
<html>
<head>
<script>
function scroll(){
window.location = '#error';
}
</script>
</head>
<body>
<div id='error'>
<p>Error: This is an error message.</p>
</div>
<iframe src="http://www.yahoo.com" width="400" height="800">
</iframe>
</br>
<input type="button" onclick="scroll()" value="Scroll"></input>
</body>
</html>
You can also use jQuery to scroll smoothly to it:
http://www.paulund.co.uk/smooth-scroll-to-internal-links-with-jquery
Related
The scenario:
I have a page with form that loads more than 4 iframe. i have no control in this iframe as this is generated by other website(API);
The Iframe has a form and input in it.
in my code
<form>
<div class="fields">
<!--onload iframe will populate this area-->
</div>
<div class="fields">
<!--onload iframe will populate this area-->
</div>
<div class="fields">
<!--onload iframe will populate this area-->
</div> </form>
upon page load this happens
<form>
<div class="fields">
<iframe src="" frameborder="0">
<html>
<body>
<form action="">
<input type="text">
</form>
</body>
</html>
</iframe>
</div>
<div class="fields">
<iframe src="" frameborder="0">
<html>
<body>
<form action="">
<input type="text">
</form>
</body>
</html>
</iframe>
</div>
<div class="fields">
<iframe src="" frameborder="0">
<html>
<body>
<form action="">
<input type="text">
</form>
</body>
</html>
</iframe>
</div></form>
in chrome:
when filling up the form, tabbing in chrome does not have any problem.
e.g click on the first input, then press tab key for next input until you complete the whole form filling up.
but in firefox mozilla:
click on the first input, then tab twice to get the next input. it does not select directly the input fields, it seems it goes to every element.
is there a script to prevent this? like the normal behaviour in chrome?
i have check this Tabindex to skip iframe but not content inside
but my case is different
**Update - It's important to note that this is a special accessibility feature of Firefox & Safari, i.e. it was implemented like this on purpose. Your question is in fact linked to this one - How to remove dotted outline from iframe in Firefox when tabbed
** Ideas on how to work around this..
I ran into this exact same issue today and I found a solution. However, there's two important caveats:
The code below shows only a partial solution - i.e. what you asked for - going forward. When the user presses SHIFT + TAB (to go back), they will see the border once again. So, in order to support this fully, you'd need to listen for these keyboard events, send a message
to the targeted Iframe, and within that controller focus the input. Also, bear in mind that you'd need to consider different browsers' implementations of this and gracefully handle the differences.
You need to be the provider/have full control of the iframe contents, in order to access the contents of the Iframe, attach listeners, get input and focus.
Hence, in your JavaScript controller you can do the following to implement the TAB (go forward) functionality:
constructor() {
...
this.input = document.getElementById("yourInputId");
window.addEventListener("focus", event => {
event.preventDefault();
this.input.focus();
});
}
What happens in the snippet above is:
Register an event listener on the whole window (meaning the whole iframe in this case)
Intercept the body focus event (as far as I understand, Firefox focuses the body of a cross-origin Iframe first. Perhaps to indicate it's a different context).
Prevent the default - so not focus
Focusing the input directly instead.
I can't understand why this isn't working.
I have a form opened in new tab, which I want to close when submitting:
<form name="form" id="form" method="post" enctype="multipart/form-data" >
//form inputs
<button accesskey="C" class="boton" onclick="form.submit(); alert('waiting...'); window.close()"> <u>A</u>djuntar</button>
</form>
when I remove window.close() the form is submitted, but when it's in my code, it shows the alert but not submitting.
Is there anything wrong?
you don't have to open the form in a new window (or tab).
you can either submit the data in ajax or use an inner hidden iframe as the target property of the form element. this way the form will open in a hidden inner element. e.g.:
<form id="eFrm" target="ifrm1">
</form>
<iframe id="ifrm1" name="ifrm1" style="display:none"></iframe>
The form won't be submitted until the event handler function has finished running.
alert blocks all execution of everything until the dialog is dismissed.
close closes a the window, so there is nowhere to load the form submission into, which cancels the request.
If you are going to close a window, don't expect it to be able to send an HTTP request at the same time.
You probably already found a solution, but I am posting this anyway for anybody who comes across the same in the future.
I am using Java servlets, but I think that is the same with every form submission => ability to choose which page must be displayed after the posted data was processed.
Once I have submitted the form, the doPost method in the servlet allows me to say which URL I want the browser to display after the data has been processed.
So, you can do probably do something along these lines:
request.getRequestDispatcher ( "/ClosePopup.html" ).forward ( request, response );
Then also create a file called ClosePopup.html, with nothing but a close () instruction
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body onLoad = "window.close();">
</body>
</html>
This way it won't be the button you click to trigger the closure of the popup, but you will be loading a self destroying page after the form is submitted. The final result is identical.
How can I reload an iframe which is already "rendered" due onload call through a javascript.
I have a page where I can add new users (by clicking submit button after entering name).
The page also displays all available users in an iframe(during onload, the iframe is "preloaded" with users). Everytime I add a new user and click on submit, the iframe(list) should also fetch the updated list automatically.
Also I am wondering how I can format the URL "get" results in the hidden form.
Can a URL copied into an iframe be modified at the destination?
How can I do this? Please help!
This is what I have so far:
<html>
<head><title>welcome page</title>
</head>
<body onLoad ="subMe()">
<script>
function subMe(){
document.getElementsByTagName('form')[1].submit();
}
function OnButton2()
{
document.getElementById("myframe").src ='http://localhost:8000/getusers/' ;
}
</script>
<div align="center">
<h1>Home</h1>
<form name ="Form0" action= "/cgi-bin/myuser.cgi" method ="get" target="uframe" onsubmit="return OnButton2();">
Enter Name:<input type="text" id ="name" name="name">
<input type="submit" value="Create new User">
</form>
<iframe id="uframe" name="uframe"></iframe>
<br>
<div style="display: hidden;">
<form action="http://localhost:8000/getusers/" method="get" target="myframe">
</form>
</div>
<iframe id="myframe" name="myframe"></iframe>
</div>
</body>
The answer is definitely as others have commented:
document.getElementById("myFrame").src = "http://www.google.com/"
There are a few reasons why this may not work. The most likely is that JS "same origin" policy is being violated. Try setting the src to a relative url like "getusers/" and watch for console errors.
Try also calling OnButton2() on its own and see if you can narrow down the problem.
Additionally, It sounds a lot like you are trying to load data into the DOM without reloading the page. Have you tried using AJAX? it's very simple and powerful once you get the hang of using it and will allow you to submit a form and display results in any format you wish, without using iframes or reloading the page.
this is my code :-
<html>
<head>
<title>(Type a title for your page here)</title>
<script language="JavaScript">
<!--
function enable_text(status)
{
status=!status;
document.f1.other_text.disabled = status;
}
//-->
</script>
</head>
<body onload=enable_text(false);>
<form name=f1 method=post>
<input type="checkbox" name="others" onclick="enable_text(this.checked)" >Others
<iframe name="other_text" src="www.google.com"></iframe>
</form>
</body>
</html>
right now i am click on check box same its enable not checked check box same enable
here i want to set if i click on check box then iframe is disable if check out then enable
disabled, in HTML terms, means "This form control is readonly and cannot be 'successful'" (successful meaning "will appear in submitted data").
iframe elements are not form controls, do not accept user input, and are not submitted with form data.
The term disabled has no meaning when applied to an iframe, so you cannot do this.
Update re comment:
i want inside content of iframe readonly not i frame disable now how its possible
Regular content inside an iframe, just like regular content anywhere else, is readonly.
If you want to disable form controls in a document in an iframe, then navigate through the DOM to those form controls and disable the form controls (subject to the normal cross-domain limitations of JS across frames).
You can't disable the iframe itself.
A workaround would be to position a transparent div above your iframe, which would prevent the user from interacting with the iframe content. To enable interaction you would just remove the div.
My question is somewhat difficult to explain. What I am trying to do is, I have a button on a certain page. When I press that button, I must be able to access elements of a form that is located on another page (without having the other page open).
Pressing that button will edit some of the elements in the form from that "unopened" page, and then post it, all this without opening any extra popup/tab/window. After the form has been posted, the button will disappear.
The form in question contains unique parameters that can't be retrieved without accessing its particular page, so I cannot emulate the form in standalone.
Some of my guesses are to use a dynamic iframe set to "display: none", or Ajax, but otherwise I'm not exactly sure if it is possible and how to do it.
Would anybody have some ideas? (sorry if the question isn't very clear, I tried my best to describe the problem)
Try using frameset.
given below sample code which have 3 pages
1. page 1 is the parent document which contains two frames.
2.frame1 refers to page2
3.frame2 refers to page3
test1.htm
<html>
<head>
<title>test</title>
<frameset rows="25px,*" frameborder="0" framespacing="0" >
<frame name="Frame2" id="Frame2" src="test2.htm"/>
<frame name="Frame1" id="Frame1" src="test3.htm"/>
</frameset>
</head>
</html>
test2.htm
<html>
<script>
var global="testing"
</script>
</html>
test3.htm
<html>
<script>
alert(parent.window.frames[0].global);
parent.window.frames[0].global="local"
function test()
{
alert(parent.window.frames[0].global);
}
</script>
<body>
<input type="button" onclick="test()" />
</body>
</html>
In the page test2 the value of global can be change from the page test3.htm.
I did it this way, using jQuery:
Acquire HTML code from the form page using $.get()
Extract the form node from the HTML string
Create an hidden iframe
Parse the form's HTML inside the new iframe
Modify the form's values;
"URLEncode" the form's data using jQuery's .serialize();
Post the serialized data to the target using $.post(), with a
callback function receiving the response
If response indicates success, hide the button and remove the hidden
iframe
I decided to extract the form out of the HTML string returned by $.get(), since parsing it won't require to load the whole form page before using the actual form as an object. Using an hidden iframe for parsing is probably not the most "professional" way, but it works.