如何使用<li>而不是提交按钮提交表单？

Question

我希望能够提交表单，但不想点击提交按钮，而是想要点击一个 <li> 元素来提交表单。

非常感谢您的帮助！

提前致谢！

Ncoder

- NCoder

---

(a) 你会使用 JavaScript 吗？ (b) 为什么？哦为什么？ - Skilldrick

Answer 1

您可以在LI上放置一个onclick事件，该事件调用表单的提交事件：

<form id="myForm" action="foo.htm" method="post">  
  <ul>
    <li onclick="myForm.submit();">Click me</li>
  </ul>
</form>

您的表单将不符合标准，也不太易于访问。

- alergy

---

哇，谢谢您的快速回复！如果我这样做，我是否可以有几个不同的Li元素可以提交表单？并且每个提交都会发送一个变量到表单，告诉表单哪个被点击了？ - NCoder

是的，您必须将onclick应用于每个LI。 如果您想要在每次单击时提交一个变量，则可以有一个隐藏的输入（例如<input type =“hidden”id =“myVariable”value =“”/ >），您可以在onclick事件中填充它（例如：onclick =“myForm.myVariable.value ='foo';myForm.submit();”）。 我认为这不是处理表单的好方法。 - alergy

Answer 2

<li onclick="formName.submit();">

虽然上述方法可行，但这似乎是一个奇怪的要求，我建议重新思考程序的逻辑。

- Greg

---

抱歉，这可能有点奇怪，因为应用程序的设计要求如此。使用这种方法，我需要它允许多个Li元素提交表单。每个Li元素能告诉表单哪一个被点击了吗？ - NCoder

是的，您需要的所有细节都在点击事件中。 - Greg

Answer 3

JavaScript。

将元素的onclick事件连接起来。获取表单的引用。

var frm = document.getElementById('formid');

提交它。

frm.submit()

- deostroll

Answer 4

在 <li> 元素上添加 click 处理程序，并使用 JavaScript 提交表单 document.getElementById('formid').submit();。

- Andrey M.

Answer 5

<form id="myForm">
...

<li id="something" onclick="mySubmit();"><p>hello world!</p></li>
...
</form>
<script type="text/javascript">
   function mySubmit(){
   document.getElementById("myForm").submit();
}</script>

- DefyGravity

Answer 6

我相信我试图做的事情与你非常相似，但我决定以“正确”的方式编写代码。这里提供了一种替代方法，基本上是将提交按钮样式化为li元素。

HTML/Coldfusion

<div id="student_options">
<ul>
    <cfoutput query="student_specs">
        <cfif #currentStudent# IS NOT #student_specs.GS1FNFP#>
            <form action="" method="POST" name="dropdown">
                <input type="hidden" name="change_stnum" value="#Trim(student_specs.STNUM)#" />
                <input type="submit" name="submit_stu_change" value="#Trim(student_specs.GS1FNFP)#" />
            </form>
        </cfif>
    </cfoutput>
</ul>
</div>

CSS

#student_options input[type="submit"] {
    padding:15px 20px 15px 20px;
    font-size:90%;
    color:#555;
    background-color:#eee;
    display:block;
    width:100%;
    text-align:left;
}

#student_options input[type="submit"]:hover {
    background-color:#F4F4F4;
    cursor:pointer;
}

您需要根据自己的喜好自定义元素，但这比使用JavaScript提交表单更好。

- Jerad