IE7 - <button> 不提交表单答案

【问题标题】：IE7 - <button> does not submit formIE7 - <button> 不提交表单
【发布时间】：2010-10-26 02:07:36
【问题描述】：

如何在 IE7 中制作一个标签来提交表单，同时进行表单上设置的所有表单验证？

如果我只是执行 document.forms[0].submit(); 它会提交，但会忽略表单验证。

编辑：每个人都喜欢告诉我使用输入标签...这将包含表单，但在我的情况下不起作用，这就是为什么我询问按钮标签...

<form action="my/script" onsubmit="return ValidateFunc();">
<button> <img src="image/do_this_with_input_tag.png"> Some Text </button>
</form>

【问题讨论】：

您使用的是<button type="submit">吗？
@Nick Craver：如果我没记错的话，那是 IE 中的默认类型，而不是其他浏览器。
@Justin808：我认为我们需要查看更多代码来帮助您。
您应该使用<input> 标签。使用<button> 标签可以完成的任何事情都可以通过<input> 和一些CSS 来实现。
@meager 不，它不能。您不能将文本段落、标题和一些文本、表格、图像（带有 alt 文本）、编号列表等放入中，而所有这些都可以通过

标签： javascript internet-explorer-7

【解决方案1】：

首先有一个类型为 submit as 的按钮

<input type="submit" value="submit" />

在您的表单标签中，将 onsubmit() 事件包含为

<form
     action="/path/to/server/side/script"
     name="testform" 
     onsubmit="return validate()"
     >

如果表单验证通过，validate() 函数应该返回 true，如果验证失败，则返回 false。例如

function validate(){
   if(...){//valid
      return true;    
   }else{//not valid
      return false;
   }    
}

编辑： 始终指定按钮类型。如果未指定，则在 IE 中默认为“按钮”，而在 Chrome 和 Firefox 中默认为“提交”。

<form action="my/script" onsubmit="return ValidateFunc();">
<button type="submit"> <img src="image/do_this_with_input_tag.png"> Some Text </button>
</form>

如果您想得到正确的答案，将来可以在您的问题中包含更多详细信息。

【讨论】：

这正是事情的运作方式，使用 INPUT 标签，而不是使用 BUTTON 标签。
我会在回到办公室后再次尝试 type="submit" 属性。
为了安全，还要在服务器上验证，以防用户禁用 Javascript (Noscript) 或什至不使用浏览器（Fiddler/Charles 等）。我怎么强调都不过分；）

【解决方案2】：

我通过在按钮上添加type="submit" 解决了这个问题。

<button>Submit</button> 未在 IE7 中提交。

<button type="submit">Submit</button> 确实在 IE7 中提交。

【讨论】：

【解决方案3】：

我猜验证只能识别来自“提交”按钮的“提交”事件。

您应该使用“提交”输入而不是“按钮”输入。然后验证机制将能够拦截提交事件。您可以在validation.submit 函数中调用form.submit。

代码如下：

<form id="theForm">
   ...
   <input type="submit" value="submitMe"/>
</form>

在 Javascript 中：

$('#theForm').validate({
    ...
    submitHandler: function() {
        // do some trick here
        ...
        // submit the form
        $('#theForm').submit();
    }
});

【讨论】：

【解决方案4】：

我使用 jquery 提交按钮。如果我绕过验证设置直接使用javascript。 Jquery 的表单提交在提交之前运行验证。

经过进一步研究，即使带有 type="submit" 的标签也无法在旧版本的 IE 中提交表单。

【讨论】：

我已经在 ie7 上测试了 type="submit"，看来提交表单对我来说很好。

【解决方案5】：

我在表单内使用（虚拟/不可见）输入字段，该 css 定位为绝对位置：

<input class="dummy" type="submit" />

.dummy {
    position:absolute;
    bottom:0px;
    right:0px;
    padding:0px;
    margin:0px;
    border:0px;
    font-size:0px;
    line-height:0px;
}

请避免使用 display:none 或 visibility:hidden 或 width:0px 等。仅使用我提供的这个 css。

【讨论】：

【解决方案6】：

我在 IE11 中遇到了同样的问题，在另一个表单中使用了提交按钮：

<form id="form1">
  ...
</form>
<form id="form2">
  ...
    <button type="submit" form="form1">OLA KE ASE</button>
  ...
</form>

你可以使用 javascript 来解决它，我用 jQuery 以一种通用的方式来解决它。

$(document).ready(function() {
    $('button[type=submit]').on('click', function() {
        if ($(this).attr('form') != '') {
            document.getElementById($(this).attr('form')).submit();
        }
    });
});

【讨论】：