Question

我有一个带有用户名和密码的简单HTML表单。

此HTML表单包含免费和付费用户的登录信息。付费用户需要输入用户名和密码，而免费用户必须输入默认用户名，例如用户名= myname，密码=密码。

我设法使用HTML链接自动填充表单的值 -

<a href="#" onclick="document.getElementById('name').value='myname';document.getElementById('password').value='mypassword';" >Free User</a>

这很顺利。现在我想补充一点，当Free Free用户单击按钮时，会自动填充上面的值，并立即提交所述HTML表单。

当我使用各种方法尝试时，会填充字段，但不会提交HTML表单。

谢谢你。

Answer 1

只需在表单中设置默认值，无需脚本：

User ID: <input type="text" name="userid" value="guest">
<br>
Password: <input type="password" name="password" value="password">
<br>
<input type="submit" value="Login">

如果你真的真的必须使用脚本，那么（注意名称为“name”的表单控件将掩盖表单的name属性，所以我使用了更合适的东西）使用像：

<input type="button" value="Guest Login" onclick="
  this.form.userid.value = 'guest';
  this.form.password.value = 'password';
  this.form.submit();
">

但坦率地说，这完全是浪费时间。如果您在表单中放置了两个提交按钮，一个用于访客，一个用于注册用户，则客户可以单击访客提交按钮。

<input type="submit" name="registeredLogin" value="Registered User Login">
<input type="submit" name="guestLogin" value="Guest User Login">

无论点击哪个按钮都会发送到服务器，以便它可以设置适当的权限。如果他们点击了访客按钮，您不关心他们为用户名或密码设置的值，只需忽略它。

同样，需要零脚本。

Answer 2

如果我理解你的问题，并希望在发布表单之前填充表单字段的按钮 - 只需将嵌入的代码放在javascript函数中，然后通过按钮的“onclick”属性将其设置为单击处理程序

<强>实施例

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

我怀疑设计意味着你需要填充变量而不是将它们作为默认值！（默认值可以在HTML中设置）但是，如果这是设计规范，那么这是你的代码！

修改总结下面的所有评论：如果您的表单中有一个名为“submit”的元素，则此代码将不起作用 - ala大多数提交表单都会被命名提交！如果您尝试调用此代码，提交行将实际尝试并调用该按钮;这显然不是一个功能，你会在这里得到这个错误...

Uncaught TypeError: Property 'submit' of object <#an HtmlFormElement> is not a function.

[jsFiddle with the error] [jsFiddle fixed] - 请注意，只有提交按钮名称已更改。

对此的解释是here - 你每天都学到新的东西！

因此，您可以将按钮的名称设置为其他内容 - 即sub;或者您可以使用GitaarLAB以编程方式在提交按钮上调用click事件的解决方案。（参见评论部分）

Answer 3

您仍然可以在服务器端设置它们，即如果收到没有用户名/密码的登录表单提交，则使用您的默认用户/密码覆盖它并继续您的登录脚本。

或者或者在此基础上，如果您希望动态分配不同的默认用户/通行证组合，还可以设置1或2个额外的隐藏字段。

更直接地提到你的问题，你已经想出如何填充一个字段..所以第二个字段重复相同的技巧。如果您愿意，您仍然可以使用表单中的默认submit-buton，但是您需要在客户端上运行Javascript。提交表单传统上由document.forms [n] .submit（）;
完成然而，document.getElementById（'submit'）。click（）;工作得更好..

总而言之，对于优雅的后备，我会建议2个隐藏的表单字段，并处理其余的服务器端。

祝你好运

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

按钮（用户启动）自动登录：

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

如何自动填充HTML表单并立即提交？

3 个答案: