Formu göndermemek için HTML düğmesi

370

Bir formum var. Bu formun dışında bir düğmem var. Bunun gibi basit bir düğme:

<button>My Button</button>

Yine de, tıkladığımda formu gönderir. İşte kod:

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

Bu düğmenin tek yapması gereken bazı JavaScript'tir. Ancak yukarıdaki koddaki gibi görünse bile formu gönderir. Etiket düğmesini span olarak değiştirdiğimde, mükemmel çalışıyor. Ama ne yazık ki, bir düğme olması gerekiyor. Bu düğmenin formu göndermesini engellemenin bir yolu var mı? Örneğin;

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

javascript html

— arik
kaynak

3

Bu sorun modern tarayıcılarda yeniden oluşturulamaz ve sorun başlangıçta bir yanlış anlamadan kaynaklanmış olabilir. İçin varsayılan iken buttonIS type=submit, ne zaman sunulacak hiçbir formu bulunmamaktadır buttoneleman dışında herhangi bir şeklidir. Gerçek bir gösterim (örnek bir belge, bir tarayıcının tanımlanması ve bir formun gönderildiğini gösteren gözlemlerin açıklaması) verilemediği sürece, bu soru tekrarlanamayan olarak kapatılmalıdır. Kullanmak type=buttoniyi bir uygulamadır, ancak bu sorunu gerçeğe dönüştürmez.

— Jukka K. Korpela

894

Bu HTML en sinir bozucu küçük tuhaflık olduğunu düşünüyorum ... Göndermek için bu düğme türü "düğme" olması gerekir.

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

Güncelleme 5-Şubat-2019: HTML Living Standard (ve ayrıca HTML 5 spesifikasyonu ) uyarınca :

Eksik değer varsayılan ve geçersiz değer varsayılan Düğme durumunu Gönder bulunmaktadır.

— Dave Markle
kaynak

9

@Powerslave olmamak için herhangi bir sebepto use <button>

— Sandip Pingle

4

@SandipPingle Gerçekten karmaşık bir stile ihtiyaç duymadıkça kullanmak için hiçbir neden yoktur. Ayrıca, IE6 ve IE7 (neyse ki aşamalı olarak kaldırılıyor) <button>bazı durumlarda yanlış işlemektedir . Ayrıca, <button>farklı tarayıcıların <button>bir formda kullanıldığında aynı değer için farklı değerler gönderebilmesi nedeniyle tarayıcılar arasında% 100 uyumlu değildir .

— Powerslave

35

Bu harika bir cevap, ama bir tuhaflık değil . Varsayılan değeri typebir öznitelik <button>etiketi olan submit. Olarak değiştirildiğinde type=button, <button>varsayılan bir davranış verilmez. typeBuradaki özelliğe bakın : developer.mozilla.org/en-US/docs/Web/HTML/Element/button

— Michael Benjamin

1

Peki <button type='submit'>bu benim için çok zor, haha. Neyse cevabınız harika çalışıyor!

— divHelper11

2

Forma özgü olmayan bir elemanın varsayılan (ve dolayısıyla örtük) davranışı, potansiyel olarak yıkıcı forma özgü işlevselliği tetiklemektir. Bu , HTML spesifikasyonunun vermesi gereken tuhaf bir tasarım kararı değil mi?

— HonoredMule

36

return false;onclick işleyicisinin sonunda işi yapacak. Ancak, sadece eklemek daha uygun olduğunu type="button"için <button>- hatta herhangi JavaScript olmadan düzgün davranır bu şekilde.

— ThiefMaster
kaynak

1

Form göndermeyen düğmeler yine de JavaScript etkin durumdayken yararlıdır ... type = "button" işlevinin daha temiz olduğunu kabul ediyorum.

— ThiefMaster

2

return false;tüm senaryolarda type="Button"çalışmazken. Etkinleştirilmiş JavaScript ile bile.

— brejoc

15

Dave Markle doğru. Gönderen W3School web :

Her zaman düğme için type niteliğini belirtin. Internet Explorer için varsayılan tür "düğme" iken, diğer tarayıcılarda (ve W3C belirtiminde) "gönder" dir.

Başka bir deyişle, kullandığınız tarayıcı W3C'nin özelliklerini takip ediyor.

— Gert Grenander
kaynak

15

Varsayılan olarak, html düğmeleri bir form gönderir.

Bunun nedeni, formun dışında bulunan düğmelerin bile gönderici görevi görmesidir (W3Schools web sitesine bakın: http://www.w3schools.com/tags/att_button_form.asp )

Başka bir deyişle, düğme türü varsayılan olarak "gönder" dir

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

Bu nedenle, bunun üstesinden gelmenin kolay bir yolu düğme türünü kullanmaktır .

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

Diğer seçenekler arasında , düğmenin veya başka bir işleyicinin sonunda düğmenin tıklatıldığı zaman false döndürülmesi veya bunun yerine bir <input> etiketi kullanılması sayılabilir.

Daha fazla bilgi edinmek için Mozilla Geliştirici Ağı'nın düğmeler hakkındaki bilgilerine göz atın: https://developer.mozilla.org/en/docs/Web/HTML/Element/button

— GJZ
kaynak

3

<Button>Etiketi kullanmamanız önerilir . Kullanım <Input type='Button' onclick='return false;'>etiketi yerine. ("Return false" kullanılması formu gerçekten göndermemelidir.)

Bazı referans materyalleri

— Tim
kaynak

2

Kullanmak için yeterlidir <input type="button" />ve yeterlidir return false;- her ikisini de yapmaya gerek yoktur.

— Tom

Düğme etiketini kullanmamanın tavsiye edilmediğini kabul etmiyorum. Kullanmazsanız, düğme etiketi ile otomatik olarak alacağınız bazı erişilebilirlik özelliklerini kaybedersiniz. Düğme etiketi aslında düğmeler gibi davranan öğeler için önerilir diyebilirim.

— CookieMonster

bağladığınız referans materyaldeki nota göre: "Tür düğmesinin <input> öğeleri hala mükemmel şekilde geçerli HTML olsa da, yeni <düğmesi> öğesi artık düğme oluşturmanın tercih edilen yoludur." Yani tam olarak belirttiğinizin tam tersi.

— jedzej

1

Erişilebilirlik nedeniyle, birden fazla type=submitdüğmeyle çekemedim . formBirden çok düğmeyle yerel olarak çalışmanın tek yolu, ancak SADECE bir Entertuşa type=submitbasarken formu gönderebilir, bunlardan sadece birinin diğerinin başka türdeyken olmasını sağlamaktır type=button. Bu şekilde, klavye desteği açısından tarayıcıdaki bir formla uğraşırken daha iyi kullanıcı deneyiminden yararlanabilirsiniz.

— Motss
kaynak

0

Benim için çalışan başka bir seçenek onsubmit = "return false;" form etiketi.

<form onsubmit="return false;">

Anlamsal olarak muhtemelen düğme türünü değiştirmek için yukarıdaki yöntemler kadar iyi bir çözüm değildir, ancak sadece gönderilmeyecek bir form öğesi istiyorsanız bir seçenek gibi görünüyor.

— kk64738
kaynak