Question

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

像这样：

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

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

Answer 1

非常简单;

document.getElementById("myForm").submit();

如果你想做jQuery风格（我不推荐这么简单的任务）;

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

Answer 2

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

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

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

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

Answer 3

绑定div click事件。

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

Answer 4

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

Answer 5

使用jquery：

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

Answer 6

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

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

...但是，您应该使用在没有JS存在的情况下工作的语义HTML。因此，使用真实的提交按钮并应用CSS使其看起来像您想要的那样。

Answer 7

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

$(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的形式显示您想要的方式;）

Answer 8

只有使用JavaScript，通常您才会使用jQuery并将div的click事件绑定到表单的提交事件。

请参阅：http://api.jquery.com/submit/

那里的例子甚至可以证明这种情况。

Answer 9

这个怎么样：

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

Answer 10

为什么不把按钮设计为看起来像普通的div？：）

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

Answer 11

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

提交一个没有提交按钮的HTML表单？

11 个答案: