javascript 如何自动填充 HTML 表单并立即提交？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11660395/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to autopopulate an HTML form and submit it instantly?
提问by Piedpiper Malta
I have a simple HTML form with a username and password.
我有一个带有用户名和密码的简单 HTML 表单。
This HTML form contains a login for both free and paid users. Paid users need to enter a username and password, while free users have to enter default usernames e.g. Username = myname, and Password = password.
此 HTML 表单包含免费和付费用户的登录信息。付费用户需要输入用户名和密码，而免费用户必须输入默认用户名，例如用户名=我的名字，密码=密码。
I managed to auto populate the values of the form using an HTML link -
我设法使用 HTML 链接自动填充表单的值 -
<a href="#" onclick="document.getElementById('name').value='myname';document.getElementById('password').value='mypassword';" >Free User</a>
This worked smoothly. Now I would like to add the possibility that when the Free User clicks the button, the values are auto populated as above and the said HTML form is submitted immediately.
这很顺利。现在我想添加一种可能性，当免费用户单击按钮时，值会自动填充如上，并立即提交所述 HTML 表单。
When I tried it using various methods, the fields would populate but the HTML form will not submit.
当我使用各种方法尝试它时，字段会填充但 HTML 表单不会提交。
Thanks you.
谢谢。
回答by RobG
Just set the defaults in the form, no script required:
只需在表单中设置默认值，无需脚本：
User ID: <input type="text" name="userid" value="guest">
<br>
Password: <input type="password" name="password" value="password">
<br>
<input type="submit" value="Login">
If you really reallymust use script, then (noting that a form control with a name of "name" will mask the form's name property so I've used something more suitable) use something like:
如果你真的真的必须使用脚本，然后（注意与“名”的名称表单控件会掩盖窗体的名称属性，因此我用的东西更适合）使用这样的：
<input type="button" value="Guest Login" onclick="
this.form.userid.value = 'guest';
this.form.password.value = 'password';
this.form.submit();
">
But frankly it's a complete waste of time. If you put two submit buttons in the form, one for guests and one for registered users, then guests can click the guest submit button.
但坦率地说，这完全是在浪费时间。如果您在表单中放置两个提交按钮，一个用于访客，一个用于注册用户，那么访客可以单击访客提交按钮。
<input type="submit" name="registeredLogin" value="Registered User Login">
<input type="submit" name="guestLogin" value="Guest User Login">
Whichever button is clicked will be sent to the server so it can set appropriate permissions. If they've clicked the guest button, you don't care what value they set for username or password, just ignore it.
单击哪个按钮将被发送到服务器，以便它可以设置适当的权限。如果他们点击了访客按钮，您就不必关心他们为用户名或密码设置了什么值，只需忽略它即可。
Again, zero script required.
同样，需要零脚本。
回答by GitaarLAB
You can still set them serverside, ie if a login-form submit is received without username/password, then override it with your default user/pass and continue your login-script.
您仍然可以在服务器端设置它们，即如果收到没有用户名/密码的登录表单提交，则使用您的默认用户/密码覆盖它并继续您的登录脚本。
Alternatively or on top of this, you could also set 1 or 2 extra hidden fields if you should wish to assign different default user/pass combinations dynamically.
或者或除此之外，如果您希望动态分配不同的默认用户/密码组合，您还可以设置 1 或 2 个额外的隐藏字段。
More directly to your question, you already figured out how to populate one field.. so a second field is repeating the same trick. You can still use the default submit-buton from the form if you'd like to, but then you need Javascript running on the client. Submitting the form is traditionally done by document.forms[n].submit();
Yet document.getElementById('submit').click(); works so much better..
更直接地回答你的问题，你已经想出了如何填充一个字段......所以第二个字段正在重复同样的技巧。如果您愿意，您仍然可以使用表单中的默认提交按钮，但是您需要在客户端上运行 Javascript。提交表单传统上是通过 document.forms[n].submit();
然而 document.getElementById('submit').click(); 效果好多了..
So all in all, for a graceful fallback, I'd advise 2 hidden form-fields and take care of the rest serverside.
总而言之，为了优雅的回退，我建议使用 2 个隐藏的表单字段并处理其余的服务器端。
Good luck
祝你好运
UPDATE 3:Two versions based on my technique, now works perfectly!!!
Auto-logon:
更新 3：基于我的技术的两个版本，现在完美运行！！！
自动登录：
<form action="login.php" method="post" id="formID" name="formID">
<label for="name">Username:</label>
<input id="name" name="name" type="text">
<label for="user_email">Password:</label>
<input id="user_email" name="email" type="password" />
<input id="submit" name="submit" type="submit" value="Login" />
</div>
</form>
<script type="text/javascript">
window.onload=function(){
document.getElementById('name').value = 'duddu';
document.getElementById('user_email').value = 'dudu';
document.getElementById('submit').click();
};
</script>
Button (user initiated) auto-logon:
按钮（用户启动）自动登录：
<form action="login.php" method="post" id="formID" name="formID">
<label for="name">Username:</label>
<input id="name" name="name" type="text">
<label for="user_email">Password:</label>
<input id="user_email" name="email" type="password" />
<input id="submit" name="submit" type="submit" value="Login" />
<input name="free" type="button" value="Free User Login" onclick="popAndSub();" />
</div>
</form>
<script type="text/javascript">
var popAndSub=function(){
document.getElementById('name').value = 'duddu';
document.getElementById('user_email').value = 'dudu';
document.getElementById('submit').click();
};
</script>
回答by Fergus In London
If I understand your question right, and you want a button to populate the form fields before posting the form - just place your embedded code in a javascript function and set it as the click handler via the 'onclick' property of the button.
如果我理解您的问题是正确的，并且您想要一个按钮在发布表单之前填充表单字段 - 只需将您的嵌入代码放在 javascript 函数中，并通过按钮的“onclick”属性将其设置为点击处理程序。
Ex:
前任：
<script>
function populate(){
document.getElementById('name').value='myname'; //set username
document.getElementById('password').value='mypassword'; //setpassword
document.forms["formID"].submit(); //submit 'formID'
}
</script>
...
<form>
....
<input type="button" name="test" value="Free User" onclick="populate()">
</form>
<!-- or as a link.. -->
<a href="#" onclick="populate()" title="login as free user">Free User</a>
Id question a design that means you need to populate the variables and not have them as defaults though! (Defaults can be set in the HTML) However, if that's the design spec then here's your code!
我质疑一个设计，这意味着您需要填充变量而不是将它们作为默认值！（可以在 HTML 中设置默认值）但是，如果这是设计规范，那么这就是您的代码！
EditTo summarise all the comments below: this code wont work if you have an element in your form with the name 'submit' - ala most submit forms which get named submit! If you try and call this code the submit line will actually try and call the button; which is obviously not a function and you'll get this error here...
编辑总结以下所有评论：如果您的表单中有一个名为“submit”的元素，则此代码将不起作用 - 大多数提交表单都被命名为 submit！如果您尝试调用此代码，提交行实际上会尝试调用该按钮；这显然不是一个函数，你会在这里得到这个错误......
Uncaught TypeError: Property 'submit' of object <#an HtmlFormElement> is not a function.
[jsFiddle with the error] [jsFiddle fixed] - Note only the submit button name has changed.
[ jsFiddle 有错误] [ jsFiddle 已修复] -请注意仅提交按钮名称已更改。
The explanation for this is here- well you learn something new everyday!
对此的解释就在这里- 好吧，您每天都会学到新东西！
So you can either set the name of your button to something else - i.e. sub; or you can use GitaarLAB's solution of calling the click event on the submit button programmatically. (See the comments section for this)
因此，您可以将按钮的名称设置为其他名称 - 即 sub；或者您可以使用 GitaarLAB 的解决方案，以编程方式调用提交按钮上的点击事件。（这个请看评论区）
