没有提交按钮如何提交HTML表单？

Question

没有提交按钮如何提交HTML表单？

24

我可以用 <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>

- Frantisek

11个回答

10

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

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

如果您喜欢，可以使用原生JavaScript完成：

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

- Peter Olson

3

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

- Sparky

3

绑定div的点击事件。

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

- Dvir

2

使用jQuery：

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

- Samich

2

如果您想不必要地依赖JavaScript，那么您可以...

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

然而，您应该使用语义化的HTML，即使没有JS也能正常工作。因此，请使用真实的提交按钮，并应用CSS使其看起来符合您的要求。

- Quentin

只需按下“回车”键，即可提交没有按钮或JavaScript的表单。 - Sparky

@Sparky672 — 由于表单中只有一个文本区域，所以不会。 - Quentin

不幸的是，提交按钮在样式上有一定的限制。它们可能对他的目的来说不够灵活。 - Peter Olson

@PeterOlson <button> 仍然是一个可行的替代方案。 - vzwick

@Quentin，我不同意。我刚刚创建了一个简单的搜索框（没有按钮），可以在所有主要浏览器中通过“Enter”提交（无需JS）。 - Sparky

1

抱歉，Quentin，你是正确的。当你说“文本区域”时，我错误地想到了“文本框”。 - Sparky

2

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

$(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样式来使输入框看起来符合你的要求即可 ;)

- vzwick

非常简单的jQuery插件：http://jsfiddle.net/yckart/3b4yzj8h/ 我们可以通过迭代每个提交输入来进行优化，以替换每个输入框。 - yckart

1

这样怎么样：

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

- Piotr Perak

1

这段代码目前不能正常工作，因为存在跨站点伪造的问题。 - Laurel

0

为什么不直接将按钮样式设置成普通的 div 呢？ :)

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

- Andy

由于提交按钮必须放在表单之外。 - Frantisek

1

@RiMMER 啊，抱歉没注意到。 - Andy

0

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

- user2956239

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- japrescott · Accepted Answer

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

// 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的方式来做这件事情（我不建议在如此简单的任务上使用jQuery）;

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

完整形式如下：

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

  myForm.submit();

});

参考资料：

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