在没有提交按钮的情况下提交 HTML 表单？答案

【问题标题】：Submit an HTML form without having a submit button?在没有提交按钮的情况下提交 HTML 表单？
【发布时间】：2011-12-04 00:49:45
【问题描述】：

我可以用<div> 代替<input type="submit"> 提交html <form> 吗？

像这样：

<form method="post" action="" id="myForm">
  <textarea name="reply">text</textarea>
</form>

<div>Submit the form by clicking this</div>

【问题讨论】：

标签： jquery html forms

【解决方案1】：

您可以用来提交特定表单的方法如下：

// Grab the form element and manually trigger the 'submit' method on it:
document.getElementById("myForm").submit();

因此，在您的示例中，您可以在任何您喜欢的元素上添加点击事件处理程序，并通过它触发表单的提交方法：

<form method="post" id="myForm">
  <textarea name="reply">text</textarea>
</form>

<div class="submit">Submit the form by clicking this</div>

const myForm = document.getElementById("myForm");
document.querySelector(".submit").addEventListener("click", function(){

  myForm.submit();

});

如果你想使用 jQuery 风格（我不推荐这样一个简单的任务）；

$("#myForm").submit();

完整形式：

const myForm = $("#myForm");
$(".submit").click(function(){

  myForm.submit();

});

参考资料：

HTML 表单元素的submit() 方法（原生JavaScript API）
jQuerysubmit() API

【讨论】：

为什么现在每个人都使用 jquery 来完成最简单的任务？ jQuery 将在此解决方案之上添加 500 条 CPU 指令。如果你可以做一些简单的事情，为什么不直接去做呢？
@japrescott jQuery 中的submit 方法并不昂贵。它基本上只是调用本机 Javascript 函数。我不知道你为什么这么坚持在这种情况下不使用 jQuery。
@japrescott，因为 OP 用 jQuery 标记了他的问题！
我会说 jQuery 方式更简洁一些，但并不简单。他们都是一个班轮。 jQuery 对于这项任务来说太过分了。 :)
如果问题要求 jquery，那么关于 JQuery v JS 的愚蠢讨论是无关紧要的。人们对 JS 做出各种关于这个和那个更好的陈述是完全狂热的。从长远来看，它是客户得到的，而不是它是如何完成的。我已经看到在顶级 AAA 游戏中发布了完全废话的代码，而惊人的优化代码被扔掉了。忘记基石传福音的人——它的结果和解决方案很重要。这周不是你喜欢的宠物最喜欢的东西。

【解决方案2】：

这个怎么样：

 $(document).ready(function() {
     $('#submitDiv').click(function() {
        $('#myForm').submit();
     });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" action="" id="myForm">
<textarea name="reply">text</textarea>
</form>

<div id="submitDiv">Submit the form by clicking this</div>

【讨论】：

此代码目前无法使用，因为它是跨站点伪造的，

【解决方案3】：

<?php
if(isset($_POST['text']) && !empty($_POST['text']))
{
   echo $text_val = $_POST['text'];
}

?>
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
        <form method="post" action="Enter your action">
        <p><label>Enter your Text : </label>
        <input type="text" name="text" id="text" onmouseover="this.form.submit();"></input>
        </p>
        </form>
</body>
</html>

【讨论】：

【解决方案4】：

你为什么不把一个按钮设计成看起来像一个普通的 div 呢？ :)

button{
    border:none;
    background:none;
    padding:0;
    text-align:left; 
}

【讨论】：

因为提交按钮必须在表单之外。
@RiMMER 啊，错过了抱歉

【解决方案5】：

为了更好的语义和优雅的降级，我建议你这样做：

$(document).ready(function(){
    $('form input[type="submit"]').replaceWith('<div class="submit">Submit the form by clicking this</div>'); // replace submit button with div

    $('.submit').live('click', function() {  
        $(this).closest('form').submit();
    });
});

这样，您的表单对于没有 JS 的客户端仍然可用。

话虽这么说：只需使用 CSS 为您的输入设置样式即可；）

【讨论】：

非常简单的 jquery 插件：jsfiddle.net/yckart/3b4yzj8h 我们可以通过迭代每个提交输入来优化它，用一个人替换每个。

【解决方案6】：

如果你想不必要地依赖 JavaScript，那么你可以……

jQuery('div').click(function () { jQuery('form').submit(); });

... 但是，您应该使用在没有 JS 的情况下工作的语义 HTML。所以使用一个真正的提交按钮并应用 CSS 让它看起来像你想要的那样。

【讨论】：

只需按“enter”键也将提交没有按钮或 JavaScript 的表单。
@Sparky672 — 由于表单中只有一个文本区域……不，它不会。
不幸的是，提交按钮的样式有限。对于他的目的，它们可能不够灵活。
@PeterOlson <button> 仍然是一个可行的选择。
对不起昆汀，你是对的。当你说“文本区域”时，我错误地想到了“文本框”。

【解决方案7】：

$('#myDiv').click(function() {  
    $('#myForm').submit();
});

【讨论】：

【解决方案8】：

仅通过使用 JavaScript，通常您会使用 jQuery 并将 div 的 click 事件与表单的 submit 事件联系起来。

见：http://api.jquery.com/submit/

那里的例子甚至演示了这个确切的场景。

【讨论】：

【解决方案9】：

是的，这很简单。只需在 click 处理函数中使用 submit^{[jQuery docs]} 方法即可。

$("#myDiv").click(function() {
 $("#myForm").submit();
});

如果您愿意，可以使用原生 Javascript：

document.getElementById("myDiv").onclick = function() {
  document.getElementById("myForm").submit();
};

【讨论】：

【解决方案10】：

绑定div点击事件。

$("div").click(function(){ $("form#myForm").submit(); });

【讨论】：

【解决方案11】：

使用 jquery：

$('#myForm').submit();

【讨论】：