[英]How to use JavaScript to fill a form on another page
我正在嘗試通過 JavaScript 填寫表單上的字段。 問題是我只知道如何在當前頁面上執行 JavaScript，所以我無法重定向到表單並從那里執行代碼。 我對使用這個術語猶豫不決，但我想到的唯一短語是跨站點腳本。 我試圖執行的代碼如下。
<script language="javascript">
window.location = "http://www.pagewithaform.com";
loaded();
//checks to see if page is loaded. if not, checks after timeout.
function loaded()
{
if(window.onLoad)
{
//never executes on new page. the problem
setTitle();
}
else
{
setTimeout("loaded()",1000);
alert("new alert");
}
}
//sets field's value
function setTitle()
{
var title = prompt("Field Info","Default Value");
var form = document.form[0];
form.elements["fieldName"].value = title;
}
</script>
我不確定這是否可能。 我也對其他想法持開放態度，例如 PHP。 謝謝。
編輯：第二頁是 SharePoint 表單。 我無法編輯表單上的任何代碼。 目標是編寫一個腳本來預填充大多數字段，因為其中 90% 是靜態的。
您正在嘗試維護頁面之間的狀態。 通常有兩種方式來維護狀態：
無論哪種方式，您的第一頁都必須保持狀態（到 cookie 或查詢字符串），而另一個頁面必須 - 單獨 - 恢復狀態。 您不能在兩個頁面上使用相同的腳本。
使用 cookie，第一頁必須將下一頁所需的所有表單數據寫入 cookie：
<!DOCTYPE html>
<html>
<head>
<title>Maintaining State With Cookies</title>
</head>
<body>
<div>
Setting cookies and redirecting...
</div>
<script>
// document.cookie is not a real string
document.cookie = 'form/title=My Name is Richard; expires=Tue, 29 Aug 2017 12:00:01 UTC'
document.cookie = 'form/text=I am demoing how to use cookies in JavaScript; expires=Tue, 29 Aug 2017 12:00:01 UT';
setTimeout(function(){
window.location = "./form-cookies.html";
}, 1000);
</script>
</body>
</html>
...然后第二頁將讀取這些 cookie 並用它們填充表單字段：
<!DOCTYPE html>
<html>
<head>
<title>Maintaining State With Cookies</title>
</head>
<body>
<form id="myForm" action="submit.mumps.cgi" method="POST">
<input type="text" name="title" />
<textarea name="text"></textarea>
</form>
<script>
var COOKIES = {};
var cookieStr = document.cookie;
cookieStr.split(/; /).forEach(function(keyValuePair) { // not necessarily the best way to parse cookies
var cookieName = keyValuePair.replace(/=.*$/, ""); // some decoding is probably necessary
var cookieValue = keyValuePair.replace(/^[^=]*\=/, ""); // some decoding is probably necessary
COOKIES[cookieName] = cookieValue;
});
document.getElementById("myForm").getElementsByTagName("input")[0].value = COOKIES["form/title"];
document.getElementById("myForm").getElementsByTagName("textarea")[0].value = COOKIES["form/text"];
</script>
</body>
</html>
在使用查詢字符串的情況下，第一頁只會在重定向 URL 中包含查詢字符串，如下所示：
<!DOCTYPE html>
<html>
<head>
<title>Maintaining State With The Query String</title>
</head>
<body>
<div>
Redirecting...
</div>
<script>
setTimeout(function(){
window.location = "./form-querystring.html?form/title=My Name is Richard&form/text=I am demoing how to use the query string in JavaScript";
}, 1000);
</script>
</body>
</html>
...而表單將解析查詢字符串（在 JavaScript 中通過window.location.search可用 - 以?開頭）：
<!DOCTYPE html>
<html>
<head>
<title>Maintaining State With The Query String</title>
</head>
<body>
<form id="myForm" action="submit.mumps.cgi" method="POST">
<input type="text" name="title" />
<textarea name="text"></textarea>
</form>
<script>
var GET = {};
var queryString = window.location.search.replace(/^\?/, '');
queryString.split(/\&/).forEach(function(keyValuePair) {
var paramName = keyValuePair.replace(/=.*$/, ""); // some decoding is probably necessary
var paramValue = keyValuePair.replace(/^[^=]*\=/, ""); // some decoding is probably necessary
GET[paramName] = paramValue;
});
document.getElementById("myForm").getElementsByTagName("input")[0].value = GET["form/title"];
document.getElementById("myForm").getElementsByTagName("textarea")[0].value = GET["form/text"];
</script>
</body>
</html>
還有一個選擇：由於狀態是在客戶端（而不是服務器端）嚴格維護的，您可以將信息放在片段標識符中（URL 的“哈希”部分）。
第一個腳本與上面的查詢字符串示例非常相似：重定向 URL 僅包含片段標識符。 我要再次使用的查詢字符串格式化為了方便，但要注意的#在地方一個? 以前是：
<!DOCTYPE html>
<html>
<head>
<title>Maintaining State With The Fragment Identifier</title>
</head>
<body>
<div>
Redirecting...
</div>
<script>
setTimeout(function(){
window.location = "./form-fragmentidentifier.html#form/title=My Name is Richard&form/text=I am demoing how to use the fragment identifier in JavaScript";
}, 1000);
</script>
</body>
</html>
...然后表單必須解析片段標識符等：
<!DOCTYPE html>
<html>
<head>
<title>Maintaining State With The Fragment Identifier</title>
</head>
<body>
<form id="myForm" action="submit.mumps.cgi" method="POST">
<input type="text" name="title" />
<textarea name="text"></textarea>
</form>
<script>
var HASH = {};
var hashString = window.location.hash.replace(/^#/, '');
hashString.split(/\&/).forEach(function(keyValuePair) {
var paramName = keyValuePair.replace(/=.*$/, ""); // some decoding is probably necessary
var paramValue = keyValuePair.replace(/^[^=]*\=/, ""); // some decoding is probably necessary
HASH[paramName] = paramValue;
});
document.getElementById("myForm").getElementsByTagName("input")[0].value = HASH["form/title"];
document.getElementById("myForm").getElementsByTagName("textarea")[0].value = HASH["form/text"];
</script>
</body>
</html>
這是一個使用cookies的好地方
例如：來自quirksmode.org
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
和旁注，您可以使用 onload 事件來了解頁面何時准備就緒
<script language="javascript">
function setTitle(){
var title = prompt("Field Info","Default Value");
var form = document.form[0];
form.elements["fieldName"].value = title;
}
windows.onload = setTitle;
</script>
如果可以在不訪問目標系統/源代碼/mitm-methods 的情況下操縱目標網站，那么這將真正成為惡意軟件與點擊劫持相結合的高速公路！ 我不希望你的腳本告訴我銀行的表格要做什么。 ;-)
為此，請使用某種自動化工具，例如 AutoIt (www.autoitscript.com)。 易於學習，並且具有良好的表單集成。 如果標准不夠，請為 AutoIt 尋找像 winhttp 這樣的 UDF。
使用本地存儲非常容易
第一頁表格
<style>
input{
font-size: 25px;
}
label{
color: rgb(16, 8, 46);
font-weight: bolder;
}
#data{
}
</style>
<script>
function getData()
{
//gettting the values
var email = document.getElementById("email").value;
var password= document.getElementById("password").value;
var telephone= document.getElementById("telephone").value;
var mobile= document.getElementById("mobile").value;
//saving the values in local storage
localStorage.setItem("txtValue", email);
localStorage.setItem("txtValue1", password);
localStorage.setItem("txtValue2", mobile);
localStorage.setItem("txtValue3", telephone);
}
</script>
<fieldset style="width: fit-content; margin: 0 auto; font-size: 30px;">
<form action="action.html">
<legend>Sign Up Form</legend>
<label>Email:<br />
<input type="text" name="email" id="email"/></label><br />
<label>Password<br />
<input type="text" name="password" id="password"/></label><br>
<label>Mobile:<br />
<input type="text" name="mobile" id="mobile"/></label><br />
<label>Telephone:<br />
<input type="text" name="telephone" id="telephone"/></label><br>
<input type="submit" value="Submit" onclick="getData()">
</form>
</fieldset>
這是第二頁
<script>
//displaying the value from local storage to another page by their respective Ids
document.getElementById("data").innerHTML=localStorage.getItem("txtValue");
document.getElementById("data1").innerHTML=localStorage.getItem("txtValue1");
document.getElementById("data2").innerHTML=localStorage.getItem("txtValue2");
document.getElementById("data3").innerHTML=localStorage.getItem("txtValue3");
</script>
<div style=" font-size: 30px; color: rgb(32, 7, 63); text-align: center;">
<div style="font-size: 40px; color: red; margin: 0 auto;">
Here's Your data
</div>
The Email is equal to: <span id="data"> Email</span><br>
The Password is equal to <span id="data1"> Password</span><br>
The Mobile is equal to <span id="data2"> Mobile</span><br>
The Telephone is equal to <span id="data3"> Telephone</span><br>
</div>
我可以在一頁上使用JavaScript來在另一台服務器上填寫表格嗎？
[英]Can I use JavaScript on one page to fill out a form on another server?
如何在javascript中存儲表單數據以在其他頁面或重新打開頁面中使用歷史記錄
[英]How to store form data in javascript for history use in another page or reopen page
如何從一個頁面獲取JavaScript並在另一頁面的php中使用它
[英]How to take javascript from one page and use it in php on another page
如何將數據從表單獲取到javascript並重定向到另一個頁面？
[英]How to get data from form to javascript and redirect to another page?
如何在不使用表單標簽的情況下將值提交到另一頁[JAVASCRIPT]
[英]how to submit value to another page without using form tag [JAVASCRIPT]
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.