0

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

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

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

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

这工作顺利。现在我想添加这样一种可能性，即当免费用户单击按钮时，值会自动填充，如上所示，并立即提交所述 HTML 表单。

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

谢谢。

4

3 回答 3

4

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

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

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

同样，需要零脚本。

于 2012-07-26T00:01:38.223 回答
1

如果我正确理解您的问题，并且您希望在发布表单之前使用一个按钮来填充表单字段 - 只需将您的嵌入代码放在 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 大多数提交名为 submit 的表单！如果您尝试调用此代码，则提交行实际上会尝试调用按钮；这显然不是一个函数，你会在这里得到这个错误......

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

[ jsFiddle 出现错误] [ jsFiddle 已修复] -注意只有提交按钮名称已更改。

对此的解释就在这里——你每天都能学到新东西！

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

于 2012-07-26T00:00:28.270 回答
1

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

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

更直接地回答您的问题，您已经想出了如何填充一个字段..所以第二个字段正在重复相同的技巧。如果您愿意，您仍然可以使用表单中的默认提交按钮，但是您需要在客户端上运行 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>
于 2012-07-26T00:05:30.093 回答