我有一个带有2个按钮的表单

<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(),但未如预期的那样工作(看起来非常难看!)。

评论

HTML按钮可能重复,无法提交表单

对于未提交表单的表单,请使用

#1 楼

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

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


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

评论


根据w3schools的说法,对于IE而言并非如此。

–R0MANARMY
2010年7月23日在2:38

那只是一个令人震惊的糟糕设计选择。

–octern
15年2月12日在17:45

大家:请阅读html.spec.whatwg.org/multipage/syntax.html#unquoted

–李小龙(Josh Lee)
18年11月1日在15:03

哇,您和Alex确实在修订版中把它淘汰了。我不明白为什么你们两个都不关心引号,也不关心某个属性。

– ADJenks
19年9月6日23:06

另外,如果存在具有相同类型的属性type =“ submit”(或为空)的按钮,则当您按Enter键时,将提交表单。

–费尔南多·波波卡·奥尔蒂斯(Fernando Popoca Ortiz)
11月18日19:33



#2 楼

button元素的默认类型为submit

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

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


评论


@ B.ClayShannon不是。单击该按钮时,可以使用服务器端代码返回同一页面,但仍会重新加载该页面。最终,按钮是文档的一部分,因此告诉浏览器您希望它如何工作的唯一方法是HTML和JavaScript。

– s4y
15年6月22日在18:41

#3 楼

只需使用旧的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();"/>


评论


使用具有适当的type属性的标准按钮控件是“好旧的html”,它会创建简单得多的标记。

–R0MANARMY
2010年7月23日在2:46

如果在某些浏览器中使用默认类型的提交,而在其他浏览器中使用默认类型的按钮,则显然并不简单。哎呀,即使只是具有默认的提交类型,也会使IMO变得更加复杂。应该有易于提供不起作用的按钮的标记。并且有:

–杰弗里·布雷克(Jeffrey Blake)
2010年7月23日在3:01



+1我已经使用了很多次这种精确的技术,并且对我来说一直很好。一种变体是如果您需要基于某些客户端计算来取消服务器端按钮的回发事件,则可以包括window.event.returnValue = false;。在您的按钮的客户端onclick事件中执行的代码中...也就是说,如果使用自定义验证器控件不能为您节省芥末:)

–亚当·麦基(Adam McKee)
2010年7月23日在3:05

@ JGB146:仅仅因为并非所有浏览器的默认值都相同,并不意味着如果手动设置,它们就不会遵循正确的类型(这是jleedev的建议。更不用说这些问题专门要求一种方法来做到) JavaScript,而您的答案没有考虑到这一点。

–R0MANARMY
2010年7月23日在4:24

@ JGB146:按钮是HTML中的容器。这样一来,您就可以放置图像或表格之类的东西(不确定为什么这样做,但是可以这样做)等,而输入则不支持。两者之间是有区别的,并且每个都有其适当的用例。

–R0MANARMY
2010年7月23日在14:06

#4 楼

<form onsubmit="return false;">
   ...
</form>


#5 楼

老实说,我喜欢其他答案。容易,无需进入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>


作为一个附加的好处, ,您可以摆脱锚标记,而只需使用按钮即可。

评论


奇怪的是,添加e.preventDefault()并不能阻止提交(以function(e)开头)。

– Sablefoste
17年9月6日在17:47

#6 楼

在不设置type属性的情况下,您还可以从false处理程序返回OnClick,并将onclick属性声明为onclick="return onBtnClick(event)"

#7 楼

是的,您可以通过添加值类型按钮的属性来使按钮不提交表单:
<button type="button"><button>

#8 楼

  <form class="form-horizontal" method="post">
        <div class="control-group">

            <input type="text" name="subject_code" id="inputEmail" placeholder="Subject Code">
        </div>
        <div class="control-group">
            <input type="text" class="span8" name="title" id="inputPassword" placeholder="Subject Title" required>
        </div>
        <div class="control-group">
            <input type="text" class="span1" name="unit" id="inputPassword" required>
        </div>
            <div class="control-group">
            <label class="control-label" for="inputPassword">Semester</label>
            <div class="controls">
                <select name="semester">
                    <option></option>
                    <option>1st</option>
                    <option>2nd</option>
                </select>
            </div>
        </div>

        <div class="control-group">
            <label class="control-label" for="inputPassword">Deskripsi</label>
            <div class="controls">
                    <textarea name="description" id="ckeditor_full"></textarea>
 <script>CKEDITOR.replace('ckeditor_full');</script>
            </div>
        </div>



        <div class="control-group">
        <div class="controls">

        <button name="save" type="submit" class="btn btn-info"><i class="icon-save"></i> Simpan</button>
        </div>
        </div>
        </form>

        <?php
        if (isset($_POST['save'])){
        $subject_code = $_POST['subject_code'];
        $title = $_POST['title'];
        $unit = $_POST['unit'];
        $description = $_POST['description'];
        $semester = $_POST['semester'];


        $query = mysql_query("select * from subject where subject_code = '$subject_code' ")or die(mysql_error());
        $count = mysql_num_rows($query);

        if ($count > 0){ ?>
        <script>
        alert('Data Sudah Ada');
        </script>
        <?php
        }else{
        mysql_query("insert into subject (subject_code,subject_title,description,unit,semester) values('$subject_code','$title','$description','$unit','$semester')")or die(mysql_error());


        mysql_query("insert into activity_log (date,username,action) values(NOW(),'$user_username','Add Subject $subject_code')")or die(mysql_error());


        ?>
        <script>
        window.location = "subjects.php";
        </script>
        <?php
        }
        }

        ?>