I am using a third party software which uses the Prototype library. It was working fine before the latest update (Ver 68 and above) of Firefox. It is still working in the other browsers. I tried debugging and whenever I introduce a breakpoint and go step by step the code works. I found the following line of code which if I step over and let the code run the problem is solved. But if I let the code run before this the problem occurs.
return formView.submit();
Any idea? I am ok with a hack even.
Update:
I created a MRE as suggested. Here is the link https://brandsoftinfotech.com/test/firefox-frame-submit/
I have created 2 forms, one in the parent page and one in the frame. On submitting the parent page form the frame page form gets submitted and writes the data in a log file. And the form page when submitted just shows the data from that log file.
index.html
<!DOCTYPE html>
<html>
<head>
<script>
function submitFunction() {
var myFrame = document.getElementById("myFrame");
var myForm = myFrame.contentWindow.document.getElementById("myForm");
myForm.submit();
}
</script>
</head>
<body>
<form action="index-submit.php" onSubmit="submitFunction()">
<input type="submit" value="Submit">
</form>
<iframe id="myFrame" src="frame-box.html"></iframe>
</body>
</html>
frame-box.html
<form action="frame-submit.php" id="myForm">
First name:<br>
<input type="text" name="firstname" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
</form>
This works fine on Chrome, MS Edge but doesn't work on Firefox.
I am not sure if solving this would solve my problem, but at least this should work for my library code to work.
I'm mildly surprised to see that it works on any browser. By allowing the parent's form submission to occur, you're tearing down the page, which means tearing down the iframe, and any requests that may be underway can be aborted (or if not quite started, never started).
I'd probably switch to ajax rather than doing the actual form submission.
But if you want to do the form submission, to do this reliably you'll have to wait for the frame's submission to complete before doing the parent submission. The easy way to do that is to have the frame submission respond with a small page with JavaScript on it that tells the parent it's finish:
<!DOCTYPE html>
<html>
<body>
<script>
if (parent && parent.formCallback) {
parent.formCallback();
}
</script>
</body>
</html>
Then the parent page is something like:
<!DOCTYPE html>
<html>
<head>
<script>
function submitFunction() {
var myFrame = document.getElementById("myFrame");
var myForm = myFrame.contentWindow.document.getElementById("myForm");
myForm.submit();
return false; // <−−−−−−−− cancel submission
}
function formCallback() { //
document.getElementById("parentForm").submit(); // <−−−−−−−− Submit on callback
} //
</script>
</head>
<body>
<!-- vvvvvvvvvvvvvvv−−−−−−−− Added ID -->
<form id="parentForm" action="/index-submit" onSubmit="return submitFunction()">
<input type="hidden" name="index-field" value="x">
<input type="submit" value="Submit">
</form>
<iframe id="myFrame" src="frame-box.html"></iframe>
</body>
</html>
But you may get away with just detecting the change in location in the iframe. That would involve just changing the parent page as indicated:
<!DOCTYPE html>
<html>
<head>
<script>
function submitFunction(form) { // <−−−−−−−− Added parameter
var myFrame = document.getElementById("myFrame");
var myForm = myFrame.contentWindow.document.getElementById("myForm");
myForm.submit();
// Wait for the location of the iframe window to change
setInterval(function() {
if (String(myFrame.contentWindow.location).includes("frame-submit")) {
// Frame's form submitted, we can submit ours
form.submit();
}
}, 100);
return false; // <−−−−−−−− cancel submission
}
</script>
</head>
<body>
<form action="/index-submit" onSubmit="return submitFunction(this)">
<!-- ^^^^−−−−−−−−− added argument -->
<input type="hidden" name="index-field" value="x">
<input type="submit" value="Submit">
</form>
<iframe id="myFrame" src="frame-box.html"></iframe>
</body>
</html>
I wouldn't expect that to work if the form in the frame does a significant upload (though I could be wrong about that).
Related
I have a situation where I need to open a new tab to an external site when the user clicks "submit" on a form, and at the same time I need to redirect the original tab to a different page to prevent the user making multiple duplicate requests to the external site.
NOTE: I have protected against this behaviour in the back-end, I just want to use JavaScript to improve the UX where possible, removing the rendering of the option in the first place.
NOTE2: This works in Firefox, but not in Chrome or Safari.
Some example code which illustrates my issue is shown below:
<script type="text/javascript">
function testFunction(){
alert("Executing testFunction()!");
window.location.replace("http://www.google.com");
}
// uncomment this line to show that testFunction() does work when called directly
//testFunction();
</script>
<html>
<head>
<title>JS Redirect Then Post Test</title>
</head>
<body>
<form action="" method="POST" target="_blank">
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname"><br><br>
<input type="submit" value="Submit" onclick="testFunction()">
</form>
</body>
</html>
When I click submit, I observe the alert popping up, but the redirect does not execute.
If I uncomment the line which calls testFunction() directly, it works as expected.
How can I get the behaviour I'm looking for?
This is what I managed to come up with after a bit of tinkering around. You can pass the click event from onclick into your handler function. If you let the event happen, it will just submit the form and prevent all following execution, that is why I stopped the original click event with preventDefault and triggered form.submit() programmatically.
Also notice how I wrapped the redirect inside a setTimeout to give time to the submit() to actually happen before the redirect.
<html>
<head>
<script type="text/javascript">
function testFunction(e) {
e.preventDefault();
e.target.parentNode.submit();
alert("Executing testFunction()!");
setTimeout(function() {
document.location.href = "http://www.google.com";
}, 0);
}
// uncomment this line to show that testFunction() does work when called directly
// testFunction();
</script>
<title>JS Redirect Then Post Test</title>
</head>
<body>
<form action="" method="POST" target="_blank">
First name: <input type="text" name="firstname"><br> Last name: <input type="text" name="lastname"><br><br>
<input type="submit" value="Submit" onclick="testFunction(event)">
</form>
</body>
</html>
I am trying out EmailJS.com service with the following snippets:
The HTML part:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Daily Report</title>
<script src="https://cdn.emailjs.com/dist/email.min.js"></script>
<script src="tst.js"></script>
<noscript>Please enable JavaScript.</noscript>
</head>
<body onLoad="today()">
<h1 id="today"></h1>
<hr>
<form onSubmit="draft()">
<fieldset>
<legend>Message</legend>
<textarea id="shout" rows="2" cols="97">TEST.</textarea><br>
<input type="submit" value="Email">
</fieldset>
</form>
</body>
</html>
The JavaScript part:
var s = new Date().toDateString();
function today() {
emailjs.init("EMAILJSASSIGNED");
document.getElementById("today").innerHTML = s;
}
function draft() {
var m = s + "<br>";
m += document.getElementById("shout").value + "<br>";
emailjs.send("EMAILJS_service", "TEMPLATE", {"body":m});
//alert(m);
}
I found that the code worked (ie, emailed according to my template specs) only if I add the alert(m) line. Seems like alert triggers a submit event to execute emailjs.send(). Without the alert, the emailjs.send is "skipped". I don't understand why.
The reason the email is not sent without the alert is because once you submit the form the page is reloaded, and the browser doesn't have a chance to complete the emailjs.send() request.
One easy solution is to add "return false" to the onSubmit statement, as follows:
<form onSubmit="draft(); return false;">
That will prevent the form from being submitted though, so if you do need the form to be submitted to the server you'll need to do this asynchronously, after the promise returned by emailjs.send() is resolved.
You can read more on emailjs.send() syntax, with and without promises here:
https://www.emailjs.com/docs/api-reference/emailjs-send/
Hope this helps!
I need to find a way for a page to redirect you to a third party page with a login form and log in for you. Need to use it on a screen that can access pages but cant input anything to said page.
I've managed to create a html file that takes me to the page;
<html>
<head>
<script type="text/javascript" language="JavaScript">
window.onload = function() {
window.location.href = 'www.URL.com';
};
</script>
</head>
</html>
I have also figured out that if I paste the following in to the address field after opening the page it logs me in;
javascript:void(document.loginForm.name.value = 'MYUSERNAME');
javascript:void(document.loginForm.password.value = 'MYPASSWORD');
javascript:void(document.loginForm.submit())
I have not been able to combine the two though. Any thoughts?
Inspect the source of the form on the other site and look for the action attribute (probably something like action="/login/")
(also make an note of the method attribute)
Then make a form on your own page with the other sites action like this:
<form id="loginForm" action="http://othersite.com/login/" method="same as other site">
<input type=hidden name="name" value="MYUSERNAME"/>
<input type=hidden name="password" value="MYPASSWORD"/>
</form>
You can submit the form on page load with
<script>
window.onload = function() {
document.getElementById('loginForm').submit();
};
</script>
I have this code
<html>
<head>
<script type="text/javascript" src="my-search.js"></script>
</head>
<body onLoad="my_Init();">
<div>
<form name="id_msearchform" onsubmit="my_EventHandler_Action(); return false;">
<input type="text" name="id_searchphrase" value="example"></input>
<br><br>
<input type="submit" name="id_searchsubmit" value="Search"></input>
</form>
<br><br>
<div id="id_searchresults">No search done...</div>
</div>
</body>
</html>
I don't want the browser to request a new URL. That is why "onsubmit" has "return false;". This code works in Internet Explorer, but Firefox generates a new request. Any ideas what I am doing wrong?
FireBug changes between not wanting to acknowledge there is Javascript reference and showing the Javascript file without any errors... I will update this when i have more to add. I will try various thingsm e.g. try upload it to the net and see if FireFox behaves differently when not running JS on local disk.
Are you sure that you haven't got any errors?
I try with a simple html:
<html>
<head>
<script type="text/javascript" src="my-search.js"></script>
</head>
<body onLoad="my_Init();">
<div>
<form name="id_msearchform" onsubmit="my_EventHandler_Action(); return false;">
<input type="text" name="id_searchphrase" value="example"></input>
<br><br>
<input type="submit" name="id_searchsubmit" value="Search"></input>
</form>
<br><br>
<div id="id_searchresults">No search done...</div>
</div>
</body>
</html>
And a simple javascript called my-search.js in the same path of my html with the next code:
var my_Init = function(){
alert('Hello Onload');
}
var my_EventHandler_Action = function(){
alert('Hello OnSubmit');
}
And it works fine.
Can you show a live demo (with dropbox or something)?
Instead of using a submit button, try using a button and link the javascript function to that.
<head>
<TITLE> Sample CIM Implementation </TITLE>
<script type="text/javascript">
function init(){
document.forms[0].submit();
}
</script>
</head>
<BODY onload="init()">
<iframe id="authpopup" src="https://test.authorize.net/profile/manage">
</iframe>
<form type ="hidden" method="post" name="iframepopup" id="formAuthorizeNetPage" style="display:none;">
<input type="hidden" name="Token" value="<%=token%>"/>
</form>
</BODY>
</HTML>
i have a jsp page in which iam loading a iframe. The iframe is getting refreshed continuolusly i actually don want the iframe to get refreshed. This seems to flicker
As soon as the page loads, you call init(), which submits a form. This causes the page containing the iframe to reload, and thus also causes the iframe to reload. The page then calls init() again (since it has just reloaded) and so on.
Don't do that.