如何使用JavaScript填写另一页上的表单 [英] How to use JavaScript to fill a form on another page

查看：113
本文介绍了如何使用JavaScript填写另一页上的表单的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我试图通过JavaScript填写表单上的字段。问题是我只知道如何在当前页面上执行JavaScript，所以我不能重定向到表单并从那里执行代码。我对使用这个术语犹豫不决，但想到的唯一一句话就是跨站脚本。我试图执行的代码如下。

 < script language =javascript> 
 
 window.location =http://www.pagewithaform.com; 
 
 loaded（）; 
 
 //检查页面是否被加载。如果没有，超时后检查。 
函数loaded（）
 {
 if（window.onLoad）
 {
 //永远不会在新页面上执行。问题
 setTitle（）; 
} 
 else 
 {
 setTimeout（loaded（），1000）; 
警报（新警报）; 
 
 
 
 //设置字段值
函数setTitle（）
 {
 var title = prompt（Field Info， 默认值）; 
 var form = document.form [0]; 
 form.elements [fieldName]。value = title; 
} 
< / script>

我不确定这是否可行。我也接受其他想法，比如PHP。谢谢。

编辑：第二页是SharePoint表单。我无法编辑表单上的任何代码。目标是编写一个预填充大部分字段的脚本，因为其中90％是静态的。

重新尝试维持页面之间的状态。通常情况下，有两种维护状态的方式：


  • 在Cookie中存储状态

  • 查询字符串



无论哪种方式，您的第一页必须保持状态（cookie或查询字符串）分开 - 恢复状态。您不能在两页上使用相同的脚本。



示例：使用Cookie



第一页将不得不将所有你需要的表单数据写入cookies中： 

 <！DOCTYPE html> ; 
< html> 
< head> 
< title>使用Cookie维护状态< / title> 
< / head> 
< body> 
< div> 
设置Cookie并重定向... 
< / div> 
< script> 
 // document.cookie不是真正的字符串
 document.cookie ='form / title =我的名字是Richard; expires =星期二，2017年8月29日12:00:01 UTC'
 document.cookie ='form / text =我正在演示如何在JavaScript中使用Cookie; expires =星期二，2017年8月29日12:00:01 UT'; 
 setTimeout（function（）{
 window.location =./form-cookies.html; 
}，1000）; 
< / script> 
< / body> 
< / html>

...第二页然后会读取这些cookie并使用它们填充表单字段：

 <！DOCTYPE html> 
< html> 
< head> 
< title>使用Cookie维护状态< / title> 
< / head> 
< body> 
< form id =myFormaction =submit.mumps.cgimethod =POST> 
< input type =textname =title/> 
< textarea name =text>< / textarea> 
< / form> 
< script> 
 var COOKIES = {}; 
 var cookieStr = document.cookie; 
 cookieStr.split（/; /）。forEach（function（keyValuePair）{//不一定是解析cookie的最佳方法
 var cookieName = keyValuePair.replace（/=.*$/， ）; //一些解码可能是必需的
 var cookieValue = keyValuePair.replace（/ ^ [^ =] * \ = /，）; //一些解码可能是必需的
 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>使用查询字符串维护状态< / title> 
< / head> 
< body> 
< div> 
重定向... 
< / div> 
< script> 
 setTimeout（function（）{
 window.location =./form-querystring.html?form/title=My Name是Richard& form / text =我演示了如何在查询字符串中使用JavaScript; 
}，1000）; 
< / script> 
< / body> 
< / html>

...然后表单将解析查询字符串（可通过 window.location.search - 前面加上？）： 

 <！DOCTYPE html> 
< html> 
< head> 
< title>使用查询字符串维护状态< / title> 
< / head> 
< body> 
< form id =myFormaction =submit.mumps.cgimethod =POST> 
< input type =textname =title/> 
< textarea name =text>< / textarea> 
< / form> 
< script> 
 var GET = {}; 
 var queryString = window.location.search.replace（/ ^ \？/，''）; 
 queryString.split（/ \& /）。forEach（function（keyValuePair）{
 var paramName = keyValuePair.replace（/=.*$/，）; //一些解码是可能需要
 var paramValue = keyValuePair.replace（/ ^ [^ =] * \ = /，）; //可能需要一些解码
 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的散列部分）中。

第一个脚本与上面的查询字符串示例非常相似：重定向网址只包含片段标识符。为了方便起见，我将重新使用查询字符串格式，但请注意？中的＃曾经是： 

 <！DOCTYPE html> 
< html> 
< head> 
< title>使用片段标识符维护状态< / title> 
< / head> 
< body> 
< div> 
重定向... 
< / div> 
< script> 
 setTimeout（function（）{
 window.location =./form-fragmentidentifier.html#form/title=My Name是Richard& form / text =我演示了如何在片段标识符中使用JavaScript; 
}，1000）; 
< / script> 
< / body> 
< / html>

...然后表单必须解析片段标识符等：

 <！DOCTYPE html> 
< html> 
< head> 
< title>使用片段标识符维护状态< / title> 
< / head> 
< body> 
< form id =myFormaction =submit.mumps.cgimethod =POST> 
< input type =textname =title/> 
< textarea name =text>< / textarea> 
< / form> 
< script> 
 var HASH = {}; 
 var hashString = window.location.hash.replace（/ ^＃/，''）; 
 hashString.split（/ \& /）。forEach（function（keyValuePair）{
 var paramName = keyValuePair.replace（/=.*$/，）; //一些解码是可能需要
 var paramValue = keyValuePair.replace（/ ^ [^ =] * \ = /，）; //一些解码可能是必需的
 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>



如果您无法编辑表单页面的代码



尝试使用grepmonkey脚本。


I am trying to fill out the fields on a form through JavaScript. The problem is I only know how to execute JavaScript on the current page so I cannot redirect to the form and execute code from there. I'm hesitant to use this term, but the only phrase that comes to mind is cross-site script. The code I am attempting to execute is below.

<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>

I'm not truly sure if this is possible. I'm also open to other ideas, such as PHP. Thanks.

EDIT: The second page is a SharePoint form. I cannot edit any of the code on the form. The goal is to write a script that pre-fills most of the fields because 90% of them are static.

解决方案

You're trying to maintain state between pages. Conventionally there are two ways to maintain state:

  • Store state in cookies
  • Store state in the query string

Either way your first page has to persist state (to either cookies or the query string) and the other page has to - separately - restore the state. You can't use the same script across both pages.

Example: Using Cookies

Using cookies, the first page would have to write all the form data you'll need on the next page to cookies:

<!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>

... and the second page would then read those cookies and populate the form fields with them:

<!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>

Example: Using the Query String

In the case of using the Query String, the first page would just include the query string in the redirect URL, like so:

<!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>

...while the form would then parse the query string (available in JavaScript via window.location.search - prepended with a ?):

<!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>

Example: With a Fragment Identifier

There's one more option: since state is being maintained strictly on the client side (not on th server side) you could put the information in a fragment identifier (the "hash" part of a URL).

The first script is very similar to the Query String example above: the redirect URL just includes the fragment identifier. I'm going to re-use query string formatting for convenience, but notice the # in the place where a ? used to be:

<!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>

... and then the form has to parse the fragment identifier etc:

<!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>

And if you can't edit the code for the form page

Try a greasemonkey script.

这篇关于如何使用JavaScript填写另一页上的表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆