我可以让不提交表单吗?

I've got a form, with 2 buttons

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

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

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

I use jQuery UI's button on them too, simply like this

我也在上面使用jQuery UI的按钮，就像这样

$('button').button();

However, the first button also submits the form. I would have thought that if it didn't have the type="submit", it wouldn't.

然而，第一个按钮也提交表单。我可能会想，如果它没有type="submit"，它就不会。

Obviously I could do this

显然我可以这么做

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

But is there a way I can stop that back button from submitting the form without JavaScript intervention?

但是，有没有一种方法可以在没有JavaScript干预的情况下阻止back按钮提交表单呢?

To be honest, I used a button only so I could style it with jQuery UI. I tried calling button() on the link and it didn't work as expected (looked quite ugly!).

老实说，我只使用了一个按钮，所以我可以用jQuery UI来设计它。我尝试在链接上调用button()，但它并没有按预期工作(看起来很难看!)

7 个解决方案

#1

The default value for the type attribute of button elements is "submit".

按钮元素的类型属性的默认值是“submit”。

<button type=button>Submit</button>

#2

The button element has a default type of submit.

按钮元素具有默认的提交类型。

You can make it do nothing by setting a type of button:

你可以设置一个按钮，让它什么都不做:

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

#3

Just use good old HTML:

只要使用好的旧HTML:

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

Wrap it as the subject of a link, if you so desire:

如果你愿意的话，把它包装成一个链接的主题:

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

Or if you decide you want javascript to provide some other functionality:

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

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

#4

Honestly, I like the other answers. Easy and no need to get into JS. But I noticed that you were asking about jQuery. So for the sake of completeness, in jQuery if you return false with the .click() handler, it will negate the default action of the widget.

老实说，我喜欢其他的答案。容易，不需要进入JS。但是我注意到你问的是jQuery。因此，为了完整性起见，在jQuery中，如果使用.click()处理程序返回false，它将否定小部件的默认动作。

See here for an example (and more goodies, too). Here's the documentation, too.

这里有一个例子(还有更多的好东西)。这是文档。

in a nutshell, with your sample code, do this:

简单地说，使用示例代码，可以这样做:

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

As an added benefit, with this, you can get rid of the anchor tag and just use the button.

作为一个附加的好处，有了它，您可以去掉锚标签，只使用按钮。

#5

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

#6

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

        ?>

#7

Without setting the type attribute, you could also return false from your OnClick handler, and declare the onclick attribute as onclick="return onBtnClick(event)".

不设置类型属性，也可以从OnClick处理程序返回false，并将OnClick属性声明为OnClick =“return onBtnClick(event)”。