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

Can I submit a html <form> with <div> instead of <input type="submit"> ?

我可以用

而不是提交html

Like this:

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

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

11 个解决方案

#1

Quite simple;

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

And if you want to do it jQuery style (which I do not recommend for such a simple task);

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

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

#2

Yes, it's fairly simple. Just use the submit^{[jQuery docs]} method inside of a click handler function.

是的,这很简单。只需在点击处理函数中使用submit [jQuery docs]方法即可。

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

If you prefer, you can do it with vanilla Javascript:

如果您愿意,可以使用vanilla Javascript:

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

#3

Bind the div click event.

绑定div click事件。

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

$(“div”)。click(function(){$(“form#myForm”)。submit();});

#4

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

#5

If you want to unnecessarily depend on JavaScript, then you could…

如果你想不必要地依赖JavaScript,你可以......

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

… however, you should use semantic HTML that works without JS being present. So use a real submit button and apply CSS to make it look the way you want.

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

#6

For better semantics and graceful degradation, I suggest you do this:

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

$(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();
    });
});

This way, your form remains usable for clients without JS.

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

That being said: Just style your input to look the way you want it to with CSS ;)

话虽如此:只需设置您的输入样式,以便通过CSS查看您想要的方式;)

#7

Using jquery:

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

#8

Only by using JavaScript, typically you'd use jQuery and tie the click event of the div to the submit event of the form.

只有使用JavaScript,通常你才会使用jQuery并将div的click事件绑定到表单的submit事件。

See: http://api.jquery.com/submit/

The example there even demonstrates this exact scenario.

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

#9

why don't you just style a button to look like a regular div? :)

你为什么不把一个按钮看起来像一个普通的div? :)

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

#10

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

#11

How about this:

这个怎么样:

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

#1