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
Related
I am trying to call a function in an external JavaScript file from an HTML-file. The goal is to work with the content of a form there.
I tried so many things and always got the Error "ReferenceError: Can't find variable: X"
The positioning of the jquery javascript file loading
The positioning of the <script src="XXX"> call
Calling the function from the button "onclick" or the form "onsubmit"
Trying to call the javascript file from an embedded script in the HTML
This is what my JavaScript file and my HTML looks like right now:
function submit(e) {
answerText = document.getElementById("text").value;
// Do something with it.
}
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="/scripts/debug_alerts.js" type="text/javascript"></script>
</head>
<body>
<form id="validation-form" onsubmit="return submit(e)">
<input type="text" class="form-control" name="text" id="text" placeholder="Text" required>
<button type="button" class="btn btn-primary" onclick="submit(e)">Send</button>
</form>
</body>
I also tried
function doSomething() {
// Do something
}
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="/scripts/debug_alerts.js" type="text/javascript"></script>
</head>
<body>
<form id="validation-form" onsubmit="return submit(e)">
<input type="text" class="form-control" name="text" id="text" placeholder="Text" required>
<button type="button" class="btn btn-primary" onclick="submit(e)">Send</button>
</form>
<script>
function submit(e) {
doSomething();
}
</script>
</body>
In both cases, it returned the same error over and over again: "ReferenceError: Can't find variable: X". In the first example, X being "submit" and in the second "doSomething".
All help is very welcome. I know there are similar headlines here, but non of the solutions did anything for me.
Hey so when I ran the code without the e as a parameter for the submit function in the html it didn't give me the error. I think it may be because the e is the place holder for the text of the submit function in this case. Hope this helps.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="/scripts/debug_alerts.js" type="text/javascript"></script>
</head>
<body>
<form id="validation-form" onsubmit="return submit(e)">
<input type="text" class="form-control" name="text" id="text" placeholder="Text" required>
<button type="button" class="btn btn-primary" onclick="submit()">Send</button>
</form>
<script type="text/javascript">
function submit(e) {
answerText = document.getElementById("text").value;
// Do something with it.
}
</script>
</body>
</html>
I am trying to create a page when you input a number and then on a separate page it displays the multiplication of that number up to and including 10. I can get it to display the table on a new page with document.write but with no formatting and still using the same URL as the first. So far I have tried:
window.location.href
location.href
return
Original Page: Assignment2_Input.html
Result Page: Assignment2_Outpul.html
Script: Assignment2Script.js
Any help would be appreciated!
Orginal Page:
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Input</title>
<link href="Assignment2InputStyle.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
<div id="title">
<h2>Assignment 2</h2>
<h1>Multiplication Table</h1>
<form method="post"><label id="NumberLabel">Please Enter Number: </label><input id="Number" type="text" size="25"></form>
<br/>
<input id="submitButton" type="submit" value="Calculate" >
<p></p>
</div>
</div>
<br/>
<br/>
<script src="Assignment2_Script.js" type="text/javascript"></script>
</body>
</html>
Result Page: (This is the format I am going for on this URL)
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Input</title>
<link href="Assignment2InputStyle.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
<div id="title">
<h2>Assignment 2</h2>
<h1>Multiplication Table</h1>
<form method="post"><label id="NumberLabel">Please Enter Number: </label><input id="Number" type="text" size="25"></form>
<br/>
<input id="submitButton" type="submit" value="Calculate" >
<p></p>
</div>
</div>
<br/>
<br/>
<script src="Assignment2_Script.js" type="text/javascript"></script>
</body>
</html>
Javascript:
function calculate() {
num = document.getElementById("Number").value;
document.write('<body background-color="aqua">');
document.write('<table border="1" cellspacing="0">');
for(i=1;i<=10;i++) {
document.write("<tr><td>" + num + " x " + i + " = " + num*i + "</td></tr>");
}
document.write("</table>");
}
I now have the code working in Chrome(still does not work in Firefox)
However when it switched to the new page it flashes the table up for a second and then it disappears. Any thoughts?
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/
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
Here's a sample form:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Form onreset</title>
</head>
<body>
<form onreset="myFunction();">
<input type="text" name="fname">
<input type="text" name="lname">
<button type="reset" value="Reset">Reset</button>
</form>
<script>
function myFunction() {
alert("The form was reset!");
}
</script>
</body>
</html>
When I click the reset button, the form onreset event fires first, i.e. the alert message appears before resetting the form fields. How can it happen after the form fields rest?
I also tried the following to no avail:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Form onreset</title>
</head>
<body>
<form>
<input type="text" name="fname">
<input type="text" name="lname">
<button type="reset" value="Reset" onclick="myFunction();">Reset</button>
</form>
<script>
function myFunction() {
alert("The form was reset!");
}
</script>
</body>
</html>
Try it
function myFunction() {
setTimeout(function () {
alert("The form was reset!");}, 100);
}