Чи можу я зробити так, щоб <кнопка> не надсилала форму?


515

У мене форма, з 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. Я спробував зателефонувати button()за посиланням, і це не спрацювало як очікувалося (виглядало досить потворно!)



2
використовувати <button type="button">для тієї, яка не подає форму, та <input type="submit">для іншої. Тоді $('#formID').submit(function(e){});
спіймай

Відповіді:


1129

Значенням за замовчуванням для 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>

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 якщо ви повернете помилку з обробником .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>

Як додаткову перевагу, завдяки цьому ви можете позбутися тега прив’язки і просто скористатися кнопкою.


Що цікаво, але додавання e.preventDefault()нічого не зупиняє подання (з чого це починається function(e)).
Sablefoste

1

Не встановлюючи typeатрибут, ви також можете повернутися falseзі свого OnClickобробника та оголосити onclickатрибут як onclick="return onBtnClick(event)".


0

Так, ви можете змусити кнопку не надсилати форму, додавши атрибут типу кнопки значення: <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
        }
        }

        ?>
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.