I'm trying to make my iframe to auto login.
Here is my code. It's not logging in automatically. Whats the problem with my code?
<form id="login" target="frame" method="post" action="https://172.16.8.187:6060/NCMContainer.cc">
<input type="hidden" name="username" value="user" />
<input type="hidden" name="password" value="pass" />
</form>
<iframe id="frame" name="frame"></iframe>
<script type="text/javascript">
// submit the form into iframe for login into remote site
document.getElementById('login').submit();
// once you're logged in, change the source url (if needed)
var iframe = document.getElementById('frame');
iframe.onload = function() {
if (iframe.src != "https://172.16.8.187:6060/NCMContainer.cc") {
iframe.src = "https://172.16.8.187:6060/NCMContainer.cc";
}
}
Your main HTML should look like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" /><meta charset="utf-8" />
<title>Numpty</title>
</head>
<body>
<iframe src="frame.html"></iframe>
</body>
</html>
then create a new file, frame.html, which can look like this
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" /><meta charset="utf-8" />
</head>
<body>
<form id="login" method="post" action="https://172.16.8.187:6060/NCMContainer.cc">
<input type="hidden" name="username" value="user" />
<input type="hidden" name="password" value="pass" />
</form>
<script type="text/javascript">
document.getElementById('login').submit();
</script>
</body>
</html>
Now the iframe will be logged in to https://172.16.8.187:6060/
Related
i have contactus.html which has iframe <iframe name="myframe" id="frame1" src="contact_inputs.php"></iframe> containt only three inputs in contact_inputs.php
and the button submit in contactus.html i want to submit the forms in iframe file contact_inputs.php using the button outside of iframe to submit to php_form.php
contactus.html
<iframe name="myframe" id="frame1" src="contact_inputs.php"></iframe>
<form action="php_form.php" method="post">
<input type="submit" name="DoIt" value="submit">
</form>
contact_inputs.php
<form>
<input type="" name="cn">
<input type="" name="ex">
<input type="" name="cr">
</form>
Here you can try this logic :
function sub(ev) {
ev.preventDefault();
let frame1 = document.getElementById("frame1");
let parser = new DOMParser();
let doc = parser.parseFromString(frame1.innerHTML, "text/html");
let iframeForm = doc.body.querySelector("form");
console.log(iframeForm);
//access value of form input field via name also
console.log(iframeForm.cn.value);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<iframe name="myframe" id="frame1" src="contact_inputs.php">
<form id="iframe1Form">
<input type="" name="cn" value ="HELLO"/>
<input type="" name="ex" />
<input type="" name="cr" />
</form>
</iframe>
<form onsubmit="sub(event)">
<input type="submit" name="DoIt" value="submit" />
</form>
</body>
</html>
I have a JSP page with a form. I want to submit and return the input to the JSP page. I can't get it to work.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Ejemplo</title>
<script type="text/JavaScript" src="Scripts/jquery-1.9.1.js"></script>
<script>
function enviarDatos() {
form = document.getElementById("datos");
form.datoIntroducido.value = "holaaaaaa";
form.submit();
<%System.out.println(request.getParameter("datoIntroducido"));%>
}
</script>
</head>
<body>
<h3>Ejemplo</h3>
<form name="datos" id="datos" action="mypage" method="post" enctype="multipart/form-data">
Escribe aquí: </br>
<textarea cols=50 rows=10 id="texto"></textarea><br />
<input type="hidden" name="datoIntroducido" id="datoIntroducido"/>
<input type="submit" value="Enviar datos" class="btn-primary" onclick="enviarDatos();"/>
</form>
</div>
</body>
</html>
It prints "null" when executing the first time but it doesnt write anything when pressing the button
I have form validation setup and working as you can see (using javascript), the only problem is that when someone successfully logs in, I have it redirect to login.php but if someone directly visits mysite.com/login.php they don't need a password to login. If there is any type of php code I need to add then that's fine, another option would be to change the function for the javascript on a successful login. Any info will help!
I have a password only form; here is my code:
<!doctype html>
<html>
<head>
<meta name="googlebot" content="noindex">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="js/account.js"></script>
<link rel="stylesheet" type="text/css" href="css/main.css">
<meta charset="utf-8">
<title>The Order of Aztec</title>
</head>
<body>
<div id="page" align="center">
<br /><br /><br />
<div align="center"><img src="images/aztec-logo.png" width="256" height="198" alt="Aztec"/></div>
<br /><br /><br /><br /><br />
<div id="error-division"></div>
<br />
<form id="myForm" align="center">
<div align="center"><input placeholder="Password" name="pword" id="pword" type="password" /></div>
<br />
<div align="center" id="agree-box"><input id="agree-box-input" onClick="login();return false;" type="checkbox">Agree that you are part of the steam group "The order of aztec."</input></div>
<br />
<div align="center"><input id="submit" type="submit" /></div>
</form>
<div id="ack"></div>
</div>
</body>
<script type="text/javascript">
function login()
{
var pass = document.getElementById('pword');
var corpass = "t";
var agree = document.getElementById('agree-box-input');
if(pass.value == corpass && agree.checked == true)
{
window.location = "login.php"
} else {
document.getElementById("error-division").innerHTML = "Wrong password or agreement not checked. Please try again.";
}
}
</script>
</html>
add if statement in your login.php
<?php
if(isset($_POST['your_username']) && isset($_POST['your_password'])){
// do your activities
}else{ ?>
<script type="Javascript">
alert("Your username / password is incorrect");
window.location = "your_validation_page.php";
</script>
<?php } ?>
I have this index.php file;
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Proj</title>
<script type="text/javascript">
function openWindow() {
window.open("popup.php", "popup_id", "scrollbars=no,resizable,width=200,,left=300,top=300,height=200");
}
</script>
</head>
<body>
<form name="form1" action="">
<input name="initialdata" type="text" value="initial data" />
<input type="button" value="Send" onClick="openWindow()" />
</form>
</body>
</html>
and this popup.php file
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>popup</title>
<script type="text/javascript">
function putData() {
//How to copy from that file -> document.formname.popupdata.value to
//index.php -> document.form1.initialdata.value???
window.close();
}
function loadData() {
//how to get the value "initial data"
//from index.php -> document.form1.initialdata.value????????????
}
</script>
</head>
<body onLoad="loadData();">
<form name="formname" action="">
<input name="popupdata" type="text" value="" />
<input type="button" value="Send" onClick="putData()" />
</form>
</body>
</html>
How how to get the value "initial data" from from index.php -> document.form1.initialdata.value and how to copy from popup.php -> document.formname.popupdata.value to index.php -> document.form1.initialdata.value??
Using
window.opener.document.getElementsByName("initialdata")[0].value;
This might not work on every browser, though. For details, see this question:
window.opener alternatives
I'm having a little 'teething' problem here is my code so far
<form name="job_app">
Source?<br/>
<input type="radio" name="source" value="GAZ" id="GAZ" /> Stonoway Gazette <br/>
<input type="radio" name="source" value="JCP" id="JCP" /> Job Center <br/>
<input type="radio" name="source" value="WOM" id="WOM" /> Word of Mouth <br/><br/>
<script language="text/JavaScript">
if (document.job_app.source.GAZ.checked){
document.write='Issue <br/><input type="text" name="issue" /><br/><br/>';
}
else if (document.job_app.source.JCP.checked){
document.write='Ref <br/><input type="text" name="ref" /><br/><br/>';
}
//word of mouth has no additional input so there is no if statement for it
</script>
</form>
what i want this to do is create (or unhide) the issue or ref text box depending on which radio button is selected without creating multiple text boxes.
sorry for any inconvenience if this is a rookie mistake, i have never worked with java before nor a language like it.
This is the working code as of 07:15 26/05/2012 as thanks to Amy McCrobie.
It has undergone some edits since Amy's version (see below) i have moved all scripts above the form to make adding the next few fields easier, added a statement for word of mouth, omitted <head> as that is part of index.php and meta.php while this is for form.php, added a spacer and made the function name more specific.
index.php
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<?php
include './meta.php';
?>
</head>
<?php
/*if(isset($_POST['submit'])){
include './submit.php';
}
else{*/
include './form.php';
//}
?>
</html>
meta.php
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
<meta http-Equiv="Cache-Control" Content="no-cache" />
<meta http-Equiv="Pragma" Content="no-cache" />
<meta http-Equiv="Expires" Content="0" />
<title>job_app</title>
<link rel="StyleSheet" type="text/css" href="./style.css"/>
form.php
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#issueEl").hide();
$("#refEl").hide();
});
function showHide_source(){
if (document.getElementById('GAZ').checked)
{
document.getElementById('issueEl').style.display = 'block';
document.getElementById('refEl').style.display = 'none';
document.getElementById('src_spEl').style.display = 'none';
}
if (document.getElementById('JCP').checked)
{
document.getElementById('issueEl').style.display = 'none';
document.getElementById('refEl').style.display = 'block';
document.getElementById('src_spEl').style.display = 'none';
}
if (document.getElementById('WOM').checked)
{
document.getElementById('issueEl').style.display = 'none';
document.getElementById('refEl').style.display = 'none';
document.getElementById('src_spEl').style.display = 'block';
}
}
</script>
<form name="job_app" action="" method="post">
Source?<br/>
<input type="radio" name="source" value="GAZ" id="GAZ" onChange="showHide_source()" /> Stonoway Gazette <br/>
<input type="radio" name="source" value="JCP" id="JCP" onChange="showHide_source()" /> Job Center <br/>
<input type="radio" name="source" value="WOM" id="WOM" onChange="showHide_source()" /> Word of Mouth <br/><br/>
<div class="hideable" id="issueEl">Issue <br/><input type="text" name="issue" /><br/><br/></div>
<div class="hideable" id="refEl">Ref <br/><input type="text" name="ref" /><br/><br/></div>
<div class="hideable" id="src_spEl"></div>
rest of form
<input...
.../>
</form>
style.css
div.hideable{
height: 62px;
}
Try this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta http-Equiv="Cache-Control" Content="no-cache">
<meta http-Equiv="Pragma" Content="no-cache">
<meta http-Equiv="Expires" Content="0">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#issueEl").hide();
$("#refEl").hide();
});
</script>
<title>Test</title>
</head>
<body>
<form name="job_app" action="" method="post">
Source?<br/>
<input type="radio" name="source" value="GAZ" id="GAZ" onChange="showHide()" /> Stonoway Gazette <br/>
<input type="radio" name="source" value="JCP" id="JCP" onChange="showHide()" /> Job Center <br/>
<input type="radio" name="source" value="WOM" id="WOM" onChange="showHide()" /> Word of Mouth <br/><br/>
<div id="issueEl">Issue <br/><input type="text" name="issue" /><br/><br/></div>
<div id="refEl">Issue <br/><input type="text" name="ref" /><br/><br/></div>
</form>
<script type="text/javascript">
function showHide(){
if (document.getElementById('GAZ').checked)
{
document.getElementById('issueEl').style.display = 'block';
document.getElementById('refEl').style.display = 'none';
}
if (document.getElementById('JCP').checked)
{
document.getElementById('issueEl').style.display = 'none';
document.getElementById('refEl').style.display = 'block';
}
}
</script>
</body>
</html>
I would suggest jQuery, it's not hard to learn, in fact I find it much easier than basic javascript
also I would go the route of two textboxes that are hidden, and then showing them via jQuery
as it stands now I think if the user checks one radio button and then the other two text boxes will appear
and with jQuery added (which is as easy as including the sript at the top of your page your code would be more like this...
<form name="job_app">
Source?<br/>
<input id="GAZ" type="radio" name="source" value="GAZ" id="GAZ" /> Stonoway Gazette <br/>
<input id="JCP" type="radio" name="source" value="JCP" id="JCP" /> Job Center <br/>
<input id="WOM" type="radio" name="source" value="WOM" id="WOM" /> Word of Mouth <br/><br/>
Issue <br/><input id="issue" type="text" name="issue" /><br/><br/>
Issue <br/><input id="ref" type="text" name="ref" /><br/><br/>
<script language="text/JavaScript">
$("#issue").css("display","none");
$("#ref").css("display","none");
if ($("#GAZ").checked){
$("#issue").css("display","inline");
$("#ref").css("display","none");
}
if ($("#JCP").checked){
$("#issue").css("display","none");
$("#ref").css("display","inline");
}
//word of mouth has no additional input so there is no if statement for it
</script>
</form>