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

516

У меня есть форма с 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 для НЕ отправки формы
just.another.programmer
2
используйте <button type="button">для того, кто не отправляет форму, и <input type="submit">для другого. Тогда лови это с помощью jquery$('#formID').submit(function(e){});
Airwavezx

Ответы:

1131

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

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

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

Джош Ли
источник
14
По словам w3schools, это не так для IE .
R0MANARMY
53
Это просто ужасно плохой выбор дизайна.
октябрь
Все: Пожалуйста, прочитайте html.spec.whatwg.org/multipage/syntax.html#unquoted
Джош Ли,
Вау, ты и Алекс действительно обсуждали это в ревизиях. Я не понимаю, почему кто-то из вас заботится о кавычках или не о атрибуте.
ADJenks
228

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

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

<button type="button">Cancel changes</button>
s4y
источник
1
@ B.ClayShannon Не совсем. Вы можете использовать серверный код для возврата той же страницы при нажатии кнопки, но она все равно перезагрузит страницу. В конечном итоге кнопка является частью документа, поэтому единственным способом сообщить браузеру, как вы хотите, чтобы она действовала, являются HTML и JavaScript.
s4y
17

Просто используйте старый добрый 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();"/>
Джеффри Блейк
источник
7
Использование стандартного кнопочного элемента управления с надлежащим атрибутом типа - это «старый добрый html», что создает намного более простую разметку.
R0MANARMY
Очевидно, что не проще, если в некоторых браузерах используется тип отправки по умолчанию, а в других - кнопка по умолчанию. Черт, даже просто наличие типа отправки по умолчанию усложняет вещи больше, чем это необходимо для IMO. Должна быть разметка, которая легко предоставляет кнопку, которая ничего не делает. И есть:<input type="button" />
Джеффри Блейк
+1 Я использовал эту точную технику много раз, и она всегда хорошо работала для меня. Один из вариантов - если вам нужно отменить событие обратной передачи для кнопки на стороне сервера на основе некоторых вычислений на стороне клиента, вы можете включить window.event.returnValue = false; в вашем коде, который выполняется в событии onclick на стороне клиента для вашей кнопки ... то есть, если использование настраиваемого валидатора не подрезает вам горчицу :)
Адам Макки
1
@ JGB146: Тот факт, что не все браузеры по умолчанию используют одно и то же значение, не означает, что они не будут соблюдать правильный тип, если он установлен вручную (как предлагает jleedev. Не говоря уже о вопросах, в которых конкретно задается вопрос, как это сделать без JavaScript, пока ваш ответ не учитывает это
R0MANARMY
11
@ JGB146: Buttonэто контейнер в HTML. Это позволяет вам размещать такие вещи, как изображения или таблицы (не знаю, зачем вы это делаете, но вы можете) и т. Д., Пока inputэто не поддерживается. Между ними есть разница, и у каждого есть свой вариант использования.
R0MANARMY
5

Честно говоря, мне нравятся другие ответы. Легко и не нужно входить в 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>

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

TCCV
источник
Как ни странно, добавление e.preventDefault()ничего не делает, чтобы остановить отправку (с чего начинается function(e)).
Саблефост
1

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

DennisVM-D2i
источник
0

Да, вы можете заставить кнопку не отправлять форму, добавив атрибут типа кнопки value: <button type="button"><button>

гитайга джоффри
источник
-2
  <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
        }
        }

        ?>
Эндрю
источник