Могу ли я сделать <button>не отправить форму? - PullRequest
Новая
       13

Могу ли я сделать <button>не отправить форму?

457 голосов
/ 23 июля 2010

У меня есть форма с 2 кнопками 

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

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

Я также использую на них кнопку пользовательского интерфейса jQuery, просто так 

$('button').button();

Однако первая кнопка также отправляет форму. Я бы подумал, что если бы у него не было type="submit", его бы не было.

Очевидно, я мог бы сделать это 

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

Но есть ли способ, которым я могу остановить эту кнопку возврата при отправке формы без вмешательства JavaScript?

Если честно, я использовал только кнопку, чтобы придать ей стиль с помощью jQuery UI. Я попытался позвонить button() по ссылке, и она не сработала, как ожидалось (выглядела довольно некрасиво!).

Ответы [ 7 ]

983 голосов
/ 23 июля 2010

Значением по умолчанию для атрибута type элементов button является"submit". Установите значение type=button, чтобы создать кнопку, которая не отправляет форму. 

<button type=button>Submit</button>

В словах стандарта HTML: «Ничего не делает».

222 голосов
/ 23 июля 2010

Элемент button имеет тип по умолчанию submit.

Вы можете заставить его ничего не делать, установив тип button: 

<button type="button">Cancel changes</button>
17 голосов
/ 23 июля 2010

Просто используйте старый добрый 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();"/>
6 голосов
/ 07 декабря 2015 
<form onsubmit="return false;">
   ...
</form>
5 голосов
/ 23 июля 2010

Честно говоря, мне нравятся другие ответы.Легко и не нужно входить в JS.Но я заметил, что вы спрашивали о jQuery.Таким образом, для полноты, в jQuery, если вы вернете false с помощью обработчика .click (), он отменит действие виджета по умолчанию.больше вкусностей тоже). Вот документация тоже .

в двух словах, с вашим примером кода, сделайте это: 

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

В качестве дополнительного преимущества вы можетеизбавьтесь от тега привязки и просто используйте кнопку.

0 голосов
/ 19 марта 2018

Без установки атрибута type вы также можете вернуть false из обработчика OnClick и объявить атрибут onclick как onclick="return onBtnClick(event)".

0 голосов
/ 07 декабря 2017 
  <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
        }
        }

        ?>
...