如何让“div”按钮提交表单?

I have ASP.Net code generating my button's HTML for me using divs to get it to look and behave how I want. This question is regarding the HTML produced by the ASP.Net code.

我有ASP。Net代码生成我的按钮的HTML，我使用divs来让它看起来和行为我想要。这个问题是关于ASP生成的HTML。Net代码。

A standard button is easy, just set the onClick event of the div to change the page location:

一个标准的按钮很简单，只需设置div的onClick事件来更改页面位置:

<div name="mybutton" id="mybutton" class="customButton" onClick="javascript:document.location.href='wherever.html';">
Button Text
</div>

This works great, however, if I want a button like this to submit the form in which it resides, I would have imagined something like below:

但是，如果我想要一个这样的按钮来提交它所在的表单，我可以想象如下:

<form action="whatever.html" method="post">
    <div name="mysubmitbutton" id="mysubmitbutton" class="customButton" onClick="javascript:this.form.submit();">
    Button Text
    </div>
</form>

However, that does not work :( Does anyone have any sparkling ideas?

然而，这是行不通的。

6 个解决方案

#1

onClick="javascript:this.form.submit();">

this in div onclick don't have attribute form, you may try this.parentNode.submit() or document.forms[0].submit() will do

在div onclick中没有属性表单，您可以尝试使用this. parentnode.submit()或document.forms[0].submit()

Also, onClick, should be onclick, some browsers don't work with onClick

另外，onClick应该是onClick，有些浏览器不能使用onClick

#2

Are you aware of <button> elements? <button> elements can be styled just like <div> elements and can have type="submit" so they submit the form without javascript:

你知道

<form action="whatever.html" method="post">  
    <button name="mysubmitbutton" id="mysubmitbutton" type="submit" class="customButton">  
    Button Text
    </button>  
</form>

Using a <button> is also more semantic, whereas <div> is very generic. There's one (non-) caveat: a <button> can only have phrasing content, though it's unlikely anyone would need any other type of content when using the element to submit a form.

使用

#3

To keep the scripting in one place rather than using onClick in the HTML tag, add the following code to your script block:

要将脚本保存在一个地方，而不是在HTML标记中使用onClick，请在脚本块中添加以下代码:

$('#id-of-the-button').click(function() {document.forms[0].submit()});

Which assumes you just have the one form on the page.

假设页面上只有一个表单。

#4

You have the button tag

你有按钮标签。

http://www.w3schools.com/tags/tag_button.asp

<按钮> 你想要的东西> < /按钮

#5

A couple of things to note:

有几点需要注意:

Non-JavaScript enabled clients won't be able to submit your form
不支持javascript的客户端将无法提交表单
The w3c specification does not allow nested forms in HTML - you'll potentially find that the action and method tags are ignored for this form in modern browsers, and that other ASP.NET controls no longer post-back correctly (as their form has been closed).
w3c规范不允许在HTML中嵌套表单——您可能会发现，在现代浏览器和其他ASP中，该表单的操作和方法标记被忽略。NET控件不再正确(因为它们的窗体已经关闭)。

If you want it to be treated as a proper ASP.NET postback, you can call the methods supplied by the framework, namely __doPostBack(eventTarget, eventArgument):

如果您希望它被视为一个合适的ASP。NET回发，您可以调用框架提供的方法，即__doPostBack(eventTarget, eventArgument):

<div name="mysubmitbutton" id="mysubmitbutton" class="customButton"
     onclick="javascript:__doPostBack('<%=mysubmitbutton.ClientID %>', 'MyCustomArgument');">
  Button Text
</div>

#6

-2

Why does everyone have to complicate things. Just use jQuery!

为什么每个人都要把事情复杂化。只使用jQuery !

<script type="text/javascript">
  $(document).ready(function() {
    $('#divID').click(function(){
      $('#formID').submit();
    )};
    $('#submitID').hide();
  )};
</script>

<form name="whatever" method="post" action="somefile.php" id="formID">
  <input type="hidden" name="test" value="somevalue" />
  <input type="submit" name="submit" value="Submit" id="submitID" />
</form>

<div id="divID">Click Me to Submit</div>

The div doesn't even have to be in the form to submit it. The only thing that is missing here is the include of jquery.js.

div甚至不需要在表单中提交它。这里唯一缺少的是jquery.js的包含。

Also, there is a Submit button that is hidden by jQuery, so if a non compatible browser is used, the submit button will show and allow the user to submit the form.

此外，jQuery还隐藏了一个提交按钮，因此如果使用不兼容的浏览器，提交按钮将显示并允许用户提交表单。

#1

onClick="javascript:this.form.submit();">