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>
Related
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).
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>
Since I am new to JS coding and web designing, I have a following doubt:
I have one html page which has onclick function for form text area. If text area remains empty and user clicks submit, it should display message to enter entry and if entry is right one the corresponding file should get open. I have if/else condition in JS file, which is giving appropriate message while text area remains empty but not loading file which I am mentioning when entry is not empty.
Below is the html snippet:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset=utf-8>
</head>
<body>
<form name="drugform" action="#">
<pre> Drug Name<input type="text" name="name1" value="" /></pre>
</p>
<input type="button" value="Enter" onclick='buttoncheck()' />
</form>
<script type="text/javascript" src="if-else-button.js"></script>
</body>
</html>
and JS code is:
function buttoncheck() {
if (Boolean(document.drugform.name1.value)) {
load(form1.php);
} else {
alert('Enter Drug name');
}
}
How to load file with js code (mentioned in if condition)?
if you want to load that form1.php file in existing file then you can use ajax for for reference go here.
and if you want to redirect to another page then you should use
window.location.href = "form1.php";
var url = 'form1.php';
window.location.href = url;
Instead of load(form1.php), substitute the above code snippet!
EDIT:
If you want to load the file without actually redirecting to a new page, you can use jquery's .load()
Check more about it here: http://api.jquery.com/load/
try like this,
function buttoncheck() {
if (document.drugform.name1.value != "") { // check not empty condition
load("form1.php"); // passing value to function with quotes
} else {
alert('Enter Drug name');
}
}
I have an iframe with a HTML form dynamically added. I need the parent page to have a button which submits this form (to a page set in the iframe), but then also is able to receive the return value.
The part I am struggling with is how to receive the return value. Submitting the form is fine, but getting the parent page to receive the return value - like with an AJAX request - is eluding me.
Here is an example of the kind of thing I am trying to achieve:
<html>
<head>
etc...
<script type="text/javascript">
$(doument).ready(function() {
$("#myFormButton").click(function () {
// This is what doesn't exist, a callback with the data
// this is what I would like to acheive somehow...
$("#myForm").submit(function(data) {
// do stuff with the data
});
});
});
</script>
</head>
<body>
<iframe>
etc...
<form action="mypage.ashx">
various inputs...
</form>
etc...
</iframe>
</body>
</html>
Thank you all very much for your help,
Richard Hughes
I'm using shadow box to submit a form, and since I'm new to JavaScript it's little difficult for me. I have three pages, a parent window, a child window(shadow box content) with the form and an update page to show the results. When I submit the form data in the child window, the form doesn't close and I am unable to retrieve the vales in my update page.
Can you please suggest me a tutorial or example that will help me to get a better idea of how to do this?
This is my code so far
// parent window(index.php)
<html>
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="shadowbox/shadowbox.css">
<script type="text/javascript" src="shadowbox/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init();
</script>
</head>
<body>
Example shaodow box
<script language="javascript">
$('#mylink').click(function(){
Shadowbox.open({
content: 'mybox.php',
player: 'iframe',
height: 550,
width: 800,
options: {
onClose:
function() {
top.location = "update.php";
}
}
});
});
</script>
//mybox.php
<form name="theform" action="update.php" method="POST">
<input type="text" name="nametxt" id= "nametxt"><br>
<input type="submit" value="submit">
</form>
//update.php
<?php
if(isset($_POST['nametxt']))
echo $_POST['nametxt'];
?>
please consider, this is just an example.when the form is submitted data needs to be shown in update php.
can any one help, Thanks in advance
Check out this simple example of submitting a form on NetTuts: http://net.tutsplus.com/tutorials/javascript-ajax/submit-a-form-without-page-refresh-using-jquery/
First, since the form you are submitting is in an iframe, by default, the result of the POST will be also. You can use target="_top" on the iframe to redirect this to the top level,sothe page is submitted to update.php and the output replaces the whole page. Check the documentation for Shadowbox to see how to set this parameter.
Another option would be to store the output in the session and send it back in the second GET request that results from your top.location = "update.php".
This is easiest if you name the resultts page something else, but it depends on your application.