使超链接成为表单提交按钮

Question

我正在尝试获取一个超链接元素作为表单提交按钮。多年来，此类问题已得到多次回答，但出于某种原因，即使使用剪切粘贴代码，我也无法使其正常工作，我想知道我是否遗漏了我的一些非常简单的东西眼睛太瞎了，看不见。完整代码在这里：

<html>
<head>
<script language="JavaScript" type="text/javascript">
<!--
function signup() {
    alert("Form is " + document.signup_form);
    document.signup_form.submit() ;
}
-->
</script>
</head>

<body>

  <?php
    echo("Submit is [" . $_POST['submit'] . "]");
  ?>

  <form method="post" name="signup_form" id="signup_form" action="" >
    <input type="text" name="from_email" placeholder="e-mail address"><br>
    <input type="submit" name="submit" value="Send Email"> 
    <a href="javascript:signup()">Sign Up!</a><br>
  </form>

</body>
</html>

输入提交元素 ("Send Email") 工作正常。超链接 ("Sign Up!") 也可以正常工作并调用 javascript 函数，以便显示函数中的 alert() 框。

所以，只是 submit() 调用没有做任何事情——我什至在 alert() 框中打印出 document.signup_form 以确认它已定义（确实如此）。那么我在这里缺少什么？

感谢您的帮助！

Answer 1

您的 <form> 元素在其 action 属性中缺少一个值。引用规范：

You also have to specify the URL of the service that will handle the submitted data, using the action attribute

Link here

Answer 2

表单与 Javascript 的工作方式有一个奇怪的地方 - 每个字段都可以使用 formElement.fieldName 访问。不幸的是，这意味着如果您将字段命名为输入 submit，built-in formElement.submit() 函数会突然被您的输入元素替换。所以在你的代码中，document.signup_form.submit() 失败了，因为它调用的是元素，而不是方法，你不能将元素作为函数调用。有关详细信息，请参阅此 SO QA。

修复很简单 - 更改：

<input type="submit" name="submit" value="Send Email">

至：

<input type="submit" name="submitBtn" value="Send Email">

此外，正如其他人指出的那样，您需要为您的表单提供有效的操作。此外，一般来说，可能更喜欢通过 id (document.getElementById()) 访问事物，而不是通过 document.signup_form.

之类的事物。

使超链接成为表单提交按钮

Make hyperlink a form submit button

html

javascript

php

forms

submit