Przycisk HTML, aby NIE przesłać formularza

370

Mam formularz Poza tą formą mam przycisk. Prosty przycisk, taki jak ten:

<button>My Button</button>

Niemniej jednak, kiedy klikam, przesyła formularz. Oto kod:

<form id="myform">
    <input />
</form>
<button>My Button</button>

Wszystko co powinien zrobić, to trochę JavaScript. Ale nawet jeśli wygląda tak jak w powyższym kodzie, przesyła formularz. Kiedy zmieniam przycisk znacznika na zakres, działa to idealnie. Ale niestety musi to być przycisk. Czy jest jakiś sposób, aby zablokować ten przycisk przed przesłaniem formularza? Jak np

<button onclick="document.getElementById('myform').doNotSubmit();">My Button</button>

javascript html

— arik
źródło

3

Ten problem nie jest powtarzalny w nowoczesnych przeglądarkach, a problem mógł pierwotnie wynikać z nieporozumienia. Chociaż domyślną wartością buttonjest type=submit, nie ma formularza, który należy przesłać, gdy buttonelement jest poza jakąkolwiek formą. O ile nie można podać faktycznej demonstracji (przykładowy dokument, identyfikacja przeglądarki i opis obserwacji, które pokazują, że przesłano jakiś formularz), pytanie to należy zamknąć jako niemożliwe do odtworzenia. Używanie type=buttonjest dobrą praktyką, ale nie czyni problemu realnym.

— Jukka K. Korpela

894

Myślę, że jest to najbardziej denerwująca mała osobliwość HTML ... Ten przycisk musi być typu „przycisk”, aby się nie przesyłać.

<button type="button">My Button</button>

Aktualizacja 5 lutego-2019: Zgodnie z HTML Living Standard (a także specyfikacją HTML 5 ):

Domyślna wartość brakuje i domyślna wartość nieważne są Prześlij stanu przycisku.

— Dave Markle
źródło

9

@Powerslave bez powoduto use <button>

— Sandip Pingle

4

@ SandipPingle Nie ma powodu, aby go używać, chyba że potrzebujesz naprawdę złożonego stylu. Ponadto IE6 i IE7 (na szczęście są wycofywane) <button>w niektórych przypadkach niepoprawnie obsługują s. Ponadto <button>nie jest w 100% kompatybilny z różnymi przeglądarkami, ponieważ różne przeglądarki mogą przesyłać dla nich różne wartości, <button>gdy są używane w formularzu.

— Powerslave,

35

To świetna odpowiedź, ale nie jest osobliwością . Domyślna wartość typeatrybutu w <button>znaczniku to submit. Kiedy zmienia się type=buttonThe <button>podano żadnych zachowanie domyślne. Zobacz typeatrybut tutaj: developer.mozilla.org/en-US/docs/Web/HTML/Element/button

— Michael Benjamin

1

Więc jaki jest pomysł <button type='submit'>To dla mnie zbyt trudne, haha. W każdym razie twoja odpowiedź działa świetnie!

— divHelper11

2

Domyślne (a więc niejawne) zachowanie elementu niespecyficznego dla formy ma wywołać potencjalnie destrukcyjną funkcjonalność specyficzną dla formy. Dlaczego nie jest to osobliwa decyzja dotycząca projektu specyfikacji HTML?

— HonoredMule

36

return false;na końcu programu obsługi onclick wykona zadanie. Jednak lepiej jest po prostu dodać type="button"do <button>- w ten sposób zachowuje się poprawnie, nawet bez JavaScript.

— ThiefMaster
źródło

1

Przyciski, które nie przesyłają formularzy, są przydatne tylko z włączoną obsługą JavaScript ... Zgadzam się, że typ = "przycisk" jest jednak czystszy.

— ThiefMaster

2

return false;nie działa we wszystkich scenariuszach, podczas gdy type="Button"działa. Nawet z włączoną obsługą JavaScript.

— brejoc

15

Dave Markle ma rację. Ze strony internetowej W3School :

Zawsze określaj atrybut typu dla przycisku. Domyślnym typem przeglądarki Internet Explorer jest „przycisk”, podczas gdy w innych przeglądarkach (oraz w specyfikacji W3C) jest to „prześlij”.

Innymi słowy, używana przeglądarka jest zgodna ze specyfikacją W3C.

— Gert Grenander
źródło

15

Domyślnie przyciski HTML przesyłają formularz.

Wynika to z faktu, że nawet przyciski znajdujące się poza formularzem działają jako osoby przesyłające (patrz strona internetowa W3Schools: http://www.w3schools.com/tags/att_button_form.asp )

Innymi słowy, typem przycisku jest domyślnie „prześlij”

<button type="submit">Button Text</button>

Dlatego łatwym sposobem na obejście tego jest użycie typu przycisku .

<button type="button">Button Text</button>

Inne opcje obejmują powrocie false na koniec onclick lub jakiegokolwiek innego programu obsługi dla po kliknięciu przycisku lub przy użyciu znacznika <input> zamiast

Aby dowiedzieć się więcej, sprawdź informacje dotyczące przycisków Mozilla Developer Network: https://developer.mozilla.org/en/docs/Web/HTML/Element/button

— GJZ
źródło

3

Zaleca się, aby nie używać <Button>tagu. <Input type='Button' onclick='return false;'>Zamiast tego użyj tagu. (Użycie „return false” rzeczywiście nie powinno wysłać formularza).

Niektóre materiały referencyjne

— Tim
źródło

2

Wystarczy użyć <input type="button" />i wystarczy return false;- nie trzeba robić obu.

— Tom

Nie zgadzam się, że zaleca się nie używać tagu przycisku. Jeśli go nie użyjesz, stracisz niektóre funkcje ułatwień dostępu, które automatycznie uzyskasz dzięki tagowi przycisku. Powiedziałbym, że tag przycisku jest faktycznie zalecany dla elementów, które działają jak przyciski.

— CookieMonster

zgodnie z uwagą w materiale referencyjnym, który połączyłeś: „Chociaż elementy <input> przycisku typu są nadal w pełni poprawnym kodem HTML, nowszy element <button> jest obecnie ulubionym sposobem tworzenia przycisków.” Więc jest dokładnie odwrotnie, jak powiedziałeś.

— jedzej

1

Ze względu na dostępność nie mogłem go ściągnąć wieloma type=submitprzyciskami. Jedynym sposobem pracy natywnej z formwieloma przyciskami, ale TYLKO można przesłać formularz po naciśnięciu Enterklawisza, jest upewnienie się, że tylko jeden z nich jest dostępny, type=submitpodczas gdy inne są innego typu, np type=button. W ten sposób możesz skorzystać z lepszego doświadczenia użytkownika w obsłudze formularza w przeglądarce pod względem obsługi klawiatury.

— motss
źródło

0

Inną opcją, która działała dla mnie, było dodanie onsubmit = "return false;" do znacznika formularza.

<form onsubmit="return false;">

Semantycznie prawdopodobnie nie jest to tak dobre rozwiązanie, jak powyższe metody zmiany typu przycisku, ale wydaje się być opcją, jeśli chcesz tylko elementu formularza, który nie zostanie przesłany.

— kk64738
źródło