我可以<button>不提交表格吗?</button>

01/20 18:00
阅读数 215

我有一个表格,有两个按钮

<a href="index.html"><button>Cancel changes</button></a>

<button type="submit">Submit</button>

我也使用jQuery UI的按钮,就像这样

$('button').button();

但是,第一个按钮也会提交表单。 我本以为如果没有type="submit" ,就没有。

显然我可以做到这一点

$('button[type!=submit]').click(function(event) { event.stopPropagation(); });

但是有没有办法可以在没有JavaScript干预的情况下阻止后退按钮提交表单?

老实说,我只使用了一个按钮,因此可以使用jQuery UI设置样式。 我尝试在链接上调用button() ,但未按预期工作(看起来很丑!)。


#1楼

只需使用良好的旧HTML:

<input type="button" value="Submit" />

如果您愿意,请将其包装为链接的主题:

<a href="http://somewhere.com"><input type="button" value="Submit" /></a>

或者,如果您决定要javascript提供其他功能:

<input type="button" value="Cancel" onclick="javascript: someFunctionThatCouldIncludeRedirect();"/>

#2楼

为默认值type的属性button元素 “提交”。 将其设置为type="button"以产生不提交表单的按钮。

<button type="button">Submit</button>

HTML标准的话说:“什么都不做。”


#3楼

button元素具有默认的submit类型。

您可以通过设置button的类型使其不执行任何操作:

<button type="button">Cancel changes</button>

#4楼

老实说,我喜欢其他答案。 简单,无需进入JS。 但是我注意到您在问有关jQuery的问题。 因此,为了完整起见,在jQuery中,如果使用.click()处理函数返回false,它将否决小部件的默认操作。

参见此处的示例 (还有更多好吃的东西)。 这也是文档

简而言之,使用您的示例代码,执行以下操作:

<script type="text/javascript">
    $('button[type!=submit]').click(function(){
        // code to cancel changes
        return false;
    });
</script>

<a href="index.html"><button>Cancel changes</button></a>
<button type="submit">Submit</button>

另外一个好处是,您可以摆脱锚标记,而只需使用按钮。


#5楼

<form onsubmit="return false;">
   ...
</form>
展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部