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.
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 have a page (demo):
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="http://codeorigin.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(function() {
$("#id_button").click(function(e) {
$("#id_file").click();
});
});
</script>
</head>
<body>
<form method="post" enctype="multipart/form-data" action="http://www.google.com/">
<input type="file" name="file" id="id_file" />
<input type="button" id="id_button" value="fake button" />
<input type="submit">
</form>
</body>
</html>
if
I open browse dialog via clicking "fake button", select file (I see it in input[type="file"]), than click submit button and no post happens, the input[type="file"] is cleared.
What should I changed to get it work?
I get this problem in IE8 and IE10.
PS: file input will be hidden, so user will work only with fake button.
All of the browsers have different behavior when it comes to what they allow you to do from javascript with regards to programmatically clicking the input button for file inputs.
The best solution I have found that seems to work cross browser is to set the opacity to 0 (do not use display:none) and put the button underneath the input, so the user clicks through the 0 opacity input to your button, thus firing the input select dialog.
A good writeup on styling the file input can be found here: http://www.quirksmode.org/dom/inputfile.html
http://jsfiddle.net/j38Wj Works fine in Google Chrome but does not work in IE 10.
As I think IE does not allow select file by external 'click' event.
Only one way to "customize" input[type=file] is usage of opacity style to hide it and relative positioning of custom button control below it.
Working example: http://blueimp.github.io/jQuery-File-Upload/
[...]
I think all browser does that behaviour for security reason. When you submit a form, you are redirected to a different page(or the same page) and if you are directed to the same page, the form is re-initialized.
In this case, you simply can NOT set the value of file for security reason.
From example, How to set a value to a file input in HTML?, you don't want this happen
<form name="foo" method="post" enctype="multipart/form-data">
<input type="file" value="c:\passwords.txt">
</form>
<script>document.foo.submit();</script>
Add a label tag along with the input file element. Set the 'for' attribute of the label to the id of the input file element.
Then when you click on the label the input file element will 'click' and the file dialog will open.
Then simply style the label however you like. Have tried on various IE versions.
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
I have a form like the following:
<html>
<head>
<title>My Page</title>
</head>
<body>
<form name="myform" action="http://www.abcdefg.com/my.cgi" method="POST">
<div align="center">
<br><br>
<br><input type="submit" value="ABC" tabindex=0><br>
<br><input type="button" value="cancel"><br>
</div>
</form>
</body>
</html>
I would like the form to submit when the ENTER button is pressed and would also like the submit button to have have some color around it to show that it's default.
But it seems that I have to click the tab button to make the submit have blue around it as the default.
Is there some way to make it that the submit button is always the default and always shoes a blue circle around it to indicate this?
Also what if I have other input fields on the same html page but outside of the default. What I need is for the form to always submit when I press enter no matter where I am on that page. Is there some way to do this?
The submit should always be the default — whilst the form is focused, which is difficult here because you have no real input fields. What does this form actually do?
Further than that, don't override browsers' default UI behaviour: you'll just confuse your users.
For your enter-anywhere-submit, I would do it with jQuery. A lil bit of searching led me to this:
Submitting a form on 'Enter' with jQuery?
On forms, only the currently focused element has the blue outline, and this is typically a platform dependent feature.
That being said, you can customize that outline with a little bit of CSS to make the form look consistent across browsers:
form *:focus {
outline:2px solid blue;
}
Now, to make the submit button always show that outline, I would give it a class of "default":
<input type="submit" value="ABC" tabindex="0" class="default">
Then change the above CSS to include that class:
form *:focus, input.default {
outline:2px solid blue;
}
As for submitting the form on hitting enter: so long as an element in the form has focus, hitting enter will submit the form by default. If you want that to happen if the form doesn't have focus, you will need to use a little bit of JavaScript, but I don't recommend it, because as Tomalak says in his answer, you shouldn't change the browser's default behavior.
If you use Jquery you could attach an event handler to the tag HTML (or the document itself). Since events bubble up the DOM, this would intrecept it even if it is outside the form. Then, if the key pressed is RETURN, you submit the form.
$(document).keyup(function(event){
if (event.keyCode == 13){
$('form[name=myform]').submit();
}
});
I have an app which runs in a new window. There are several forms to generate a PDF export. When I submit one of these forms, the window loses its focus and the original window pops up again when the download appears.
I created an iframe, so the forms can target the iframe and the current window doesn't lose its focus. It works great, but I have no idea how to observe the response inside the iframe if everything went right.
Here is how its working so far. I'm using prototypeJS.
<iframe id="pdf_frame" name="pdf_frame" style="display:none;"></iframe>
<form id="PDF_gen" name="PDF_gen" target="pdf_frame" action="pdf.pl">
<input type="hidden" name="size" value="">
<!-- more hidden inputs -->
</form>
<input type="button" id="pdf_submit" value="generate pdf">
JS:
$('pdf_submit').observe('click', function(){
//write stuff to hidden inputs
$('PDF_gen').submit();
});
If something goes wrong, the download dialogue does not appear. When using prototypes form.request() the browser does not know how to handle the response and does not bring up the download dialogue. How can I do it right?
Thanks in advance!
When something goes wrong in the iframe you can try to fire an event from the iframe to its parent window (assuming we're on the same domain; it won't work cross-domain):
parent.document.fire('something:went_wrong')
and have the parent document listen for that event:
document.observe('something:went_wrong', function() {...});