Düğmelerin form göndermesini önleme

917

Sonraki sayfada, Firefox ile kaldır düğmesi formu gönderir, ancak ekle düğmesi gönderilmez. Kaldır düğmesinin formu göndermesini nasıl önleyebilirim?

<html>

<head>
    <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
        function addItem() {
            var v = $('form :hidden:last').attr('name');
            var n = /(.*)input/.exec(v);

            var newPrefix;
            if (n[1].length == 0) {
                newPrefix = '1';
            } else {
                newPrefix = parseInt(n[1]) + 1;
            }

            var oldElem = $('form tr:last');
            var newElem = oldElem.clone(true);
            var lastHidden = $('form :hidden:last');

            lastHidden.val(newPrefix);

            var pat = '=\"' + n[1] + 'input';

            newElem.html(newElem.html().replace(new RegExp(pat, 'g'), '=\"' + newPrefix + 'input'));
            newElem.appendTo('table');
            $('form :hidden:last').val('');
        }

        function removeItem() {
            var rows = $('form tr');
            if (rows.length > 2) {
                rows[rows.length - 1].html('');
                $('form :hidden:last').val('');
            } else {
                alert('Cannot remove any more rows');
            }
        }
    </script>
</head>

<body>
    <form autocomplete="off" method="post" action="">
        <p>Title:<input type="text" /></p>
        <button onclick="addItem(); return false;">Add Item</button>
        <button onclick="removeItem(); return false;">Remove Last Item</button>
        <table>
            <th>Name</th>

            <tr>
                <td><input type="text" id="input1" name="input1" /></td>
                <td><input type="hidden" id="input2" name="input2" /></td>
            </tr>
        </table>
        <input id="submit" type="submit" name="submit" value="Submit">
    </form>
</body>

</html>
javascript  html  forms  button  submit 
— Khanpo
kaynak
hangi cevabı önerirsiniz lütfen?
— sanepete

Yanıtlar:

1797

Bir HTML5 düğme öğesi kullanıyorsunuz. Nedeni, burada görüldüğü gibi W3 spesifikasyonunda belirtildiği gibi bu düğmenin varsayılan bir gönderme davranışına sahip olduğunu unutmayın: W3C HTML5 Düğmesi

Bu nedenle, türünü açıkça belirtmeniz gerekir:

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

varsayılan gönderme türünü geçersiz kılmak için. Sadece bunun neden olduğunu belirtmek istiyorum =)

=)

— Metafaniel
kaynak
17
Ayrıca, türlerinden biri düğme olan bir type özniteliğine sahip bir HTML öğesinin f # $ 'n varsayılan bir gönderme türüne sahip olmaması gerektiğini belirtmek isterim . Sadece sade aptalca ve spesifikasyonda büyük bir hata. Formlarda her zaman düğmeler kullanıyorum ve bir uç durum olsa bile (ki bu değil), varsayılan türün gönderilmesi hala mantıklı olurdu.
— dudewad
3
🤯 Bir hafta içinde bir düğmeyi kullanarak bir modal açtığımda bu haftanın çoğunu Electron uygulamamın "yenilendiğini" rahatsız ettim. Bir kez olur ve sonra uygulama beklediğim gibi davrandı. Neler olduğuna dair hiçbir fikrim yoktu. Bu oydu! Gönderme varsayılan türü ile hiçbir sorunum yok. Bana biraz beş yıl sürdüğü göz önüne alındığında biraz anlaşılmış gibi görünüyor.
— freethebees
4
Referansınız sayesinde, form için bir type = reset olduğunu öğrendim. Müthiş!
— Duong Nguyen
602

Düğmelerinizdeki türü ayarlayın:

<button type="button" onclick="addItem(); return false;">Add Item</button>
<button type="button" onclick="removeItem(); return false;">Remove Last Item</button>

... bu olay işleyicide bir istisna meydana geldiğinde bir gönderme eylemini tetiklemelerini önler. Ardından, removeItem()özel durum tetiklemeyecek şekilde işlevinizi düzeltin :

function removeItem() {
  var rows = $('form tr');
  if ( rows.length > 2 ) {
    // change: work on filtered jQuery object
    rows.filter(":last").html('');
    $('form :hidden:last').val('');
  } else {
    alert('Cannot remove any more rows');
  }
}

Değişikliğe dikkat edin: orijinal kodunuz jQuery kümesinden bir HTML öğesi ayıkladı ve ardından bir jQuery yöntemini çağırmaya çalıştı - bu bir istisna attı ve düğmenin varsayılan davranışıyla sonuçlandı.

FWIW, bununla başa çıkmanın başka bir yolu daha var ... Olay işleyicilerinizi jQuery kullanarak bağlayın ve varsayılan davranışı önceden iptal etmek için jQuery'nin olay nesnesindeki preventDefault () yöntemini kullanın :

$(function() // execute once the DOM has loaded
{

  // wire up Add Item button click event
  $("#AddItem").click(function(event)
  {
    event.preventDefault(); // cancel default behavior

    //... rest of add logic
  });

  // wire up Remove Last Item button click event
  $("RemoveLastItem").click(function(event)
  {
    event.preventDefault(); // cancel default behavior

    //... rest of remove last logic
  });

});

...

<button type="button" id="AddItem" name="AddItem">Add Item</button>
<button type="button" id="RemoveLastItem" name="RemoveLastItem">Remove Last Item</button>

Bu teknik, tüm mantığınızı tek bir yerde tutar, hata ayıklamayı kolaylaştırır ... aynı zamanda typedüğmeleri geri değiştirerek submitve olay sunucusu tarafını işleyerek bir geri dönüş uygulamanızı sağlar - bu göze batmayan olarak bilinir JavaScript .

— Shog9
kaynak
4
type = "button" benim için her zaman Firefox'ta çalışmaz. Js yeterince karmaşıksa ve Firefox formu yine de gönderecek bir hata varsa. Cinnet!
— Matthew Lock
1
@MatthewLock: Çok zor - koddaki bir hata sadece bu kod bloğunu kapatır ve eylem her zamanki gibi devam eder. Yöntemin ilk satırları olarak ePreventDefault () ve / veya e.stopPropgation () jQuery olay yöntemlerini çağırmayı deneyin. Daha fazla bilgi için stackoverflow.com/questions/2017755/…
— brichins
8
type = button ne olursa olsun formu asla göndermemelidir
— Matthew Lock
1
return falseçok önemlidir. bazen bile gönderme düğmesi için kullanın ( onclick）
— Jamie
7
Bence html burada garip. Varsayılan olarak type = "button" olmalıdır, gönderilmemelidir. Bu gönderimi varsayılan olarak görmek her zaman beklenmedik bir durum. Bu bir istisna.
— httpete
31

Bir süre önce çok benzer bir şeye ihtiyacım vardı ... ve anladım.

Bu yüzden buraya koyduğum, herhangi bir doğrulama yapmadan JavaScript tarafından gönderilebilecek bir formun olması için hilelerimi nasıl yapacağım ve yalnızca kullanıcı bir düğmeye bastığında (genellikle bir gönderme düğmesi) doğrulama işlemini gerçekleştiriyorum.

Örnek için, sadece iki alan ve bir gönderme düğmesi ile minimal bir form kullanacağım.

Ne istediğini hatırla: JavaScript'ten herhangi bir kontrol yapmadan gönderilebilmelidir. Ancak, kullanıcı böyle bir düğmeye basarsa, doğrulama yapılmalıdır ve form yalnızca doğrulamayı geçerse gönderilmelidir.

Normalde hepsi bunun yakınındaki bir şeyden başlayacaktır (önemli olmayan tüm ekstra şeyleri kaldırdım):

<form method="post" id="theFormID" name="theFormID" action="">
   <input type="text" id="Field1" name="Field1" />
   <input type="text" id="Field2" name="Field2" />
   <input type="submit" value="Send" onclick="JavaScript:return Validator();" />
</form>

Form etiketinin nasıl olmadığını görün onsubmit="..."(bunun olmaması için bir koşul olduğunu unutmayın).

Sorun, formun her zaman gönderilmesidir, ister onclickiade trueister olursa olsun false.

Şunu değiştirirsem type="submit"için type="button", bu işin görünüyor ama değil. Asla formu göndermez, ancak bu kolayca yapılabilir.

Sonunda bunu kullandım:

<form method="post" id="theFormID" name="theFormID" action="">
   <input type="text" id="Field1" name="Field1" />
   <input type="text" id="Field2" name="Field2" />
   <input type="button" value="Send" onclick="JavaScript:return Validator();" />
</form>

Ve function Validatornerede return True;, ben de buna benzer bir şey, bir JavaScript gönderme cümle eklemek:

function Validator(){
   //  ...bla bla bla... the checks
   if(                              ){
      document.getElementById('theFormID').submit();
      return(true);
   }else{
      return(false);
   }
}

id=""Sadece JavaScript içindir getElementById, name=""o POST verilerine görünmesini sadece içindir.

Bu şekilde ihtiyacım olduğu gibi çalışıyor.

Bunu sadece onsubmitformda herhangi bir işleve ihtiyaç duymayan insanlar için koyuyorum , ancak kullanıcı tarafından bir düğmeye basıldığında bazı doğrulamalar yapıyorum.

Form etiketinde neden yeniden gönderim yapmaya ihtiyacım yok? Kolay, diğer JavaScript bölümlerinde bir gönderme yapmak gerekir ama herhangi bir doğrulama olmasını istemiyorum.

Nedeni: Kullanıcı gönderme gerçekleştirir ve istiyorum doğrulama yapılması gerekir, ancak JavaScript ise bazen bu tür doğrulama önlemek önlemek sırasında gönderme yapmak gerekir.

Garip gelebilir, ancak örneğin düşünürken değil: bir Oturum Açma ... bazı kısıtlamalar ile ... PHP oturumlarının kullanılmasına izin verilmemesi gibi ve her iki çerez de izin verilmez!

Bu nedenle, herhangi bir bağlantının bu form gönderisine dönüştürülmesi gerekir, böylece giriş verileri kaybolmaz. Henüz giriş yapılmadığında da çalışmalıdır. Bu nedenle bağlantılarda doğrulama yapılmamalıdır. Ancak kullanıcı hem alan hem de kullanıcı alanı girmediyse kullanıcıya bir mesaj sunmak istiyorum. Eğer biri eksikse, form gönderilmemelidir! sorun var.

Soruna bakın: bir alan boşken form gönderilmemelidir, ancak kullanıcı bir düğmeye basmışsa, JavaScript kodu ise gönderilebilmelidir.

Ben üzerinde çalışmaya yaparsanız onsubmitform etiketi üzerinde, bunun kullanıcı veya başka bir JavaScript olup olmadığını bilmek gerekir. Hiçbir parametre iletilemediğinden, doğrudan mümkün değildir, bu nedenle bazı insanlar doğrulama yapılmasının gerekip gerekmediğini söylemek için bir değişken ekler. Doğrulama fonksiyonunda ilk şey, değişken değer, vb. Kontrol etmektir ... Çok karmaşık ve kod gerçekten ne istediğini söylemiyor.

Dolayısıyla çözüm form etiketinde gönderim yapmak değildir. Insead, düğmeye gerçekten ihtiyaç duyulan yere koydu.

Diğer tarafta, neden onubmit kod koymak çünkü kavramsal olarak onubmit doğrulama istemiyorum. Gerçekten düğme doğrulaması istiyorum.

Sadece kod daha açık değil, aynı zamanda olması gereken yer. Şunu unutmayın: - JavaScript'in formu doğrulamasını istemiyorum (her zaman sunucu tarafından PHP tarafından yapılmalıdır) - Kullanıcıya tüm alanların boş olmaması gerektiğini bildiren bir mesaj göstermek istiyorum, bu JavaScript (istemci yan)

Öyleyse neden bazı insanlar bir sadakat doğrulamasıyla yapılmalı? Hayır, kavramsal olarak müşteri tarafında bir geçerlilik doğrulaması yapmıyorum. Ben sadece bir düğmeye basıldığında bir şey yapıyorum, neden sadece uygulanmasına izin vermiyorsun?

Bu kod ve stil hile mükemmel yapar. Ben sadece koymak formu göndermek için gereken herhangi bir JavaScript:

document.getElementById('theFormID').action='./GoToThisPage.php'; // Where to go
document.getElementById('theFormID').submit(); // Send POST data and go there

Ve bu, ihtiyacım olmadığında doğrulamayı atlıyor. Sadece formu gönderir ve farklı bir sayfa vb. Yükler.

Ancak kullanıcı gönder düğmesini tıklarsa (aka type="button"değil type="submit"), formun gönderilmesine izin verilmeden önce doğrulama yapılır ve geçerli değilse gönderilmez.

Umarım bu başkalarına uzun ve karmaşık kod denememelerine yardımcı olur. Gerekmiyorsa kullanmayın onsubmitve kullanın onclick. Ama sadece değiştirmeyi unutmayın type="submit"etmek type="button"ve yapılacak lütfen unutma submit()JavaScript ile.

— z666zz666z
kaynak
28

Bunun yerine kullanabileceğim halde Shog9'a katılıyorum:

<input type = "button" onClick="addItem(); return false;" value="Add Item" />

W3schools'a göre , <button>etiketin farklı tarayıcılarda farklı davranışı var.

— poundifdef
kaynak
18

HTML formunuzda id="form_id"

<form id="form_id">
<!--your HTML code-->
</form>

Sonucu görmek için bu jQuery snippet'ini kodunuza ekleyin,

$("#form_id").submit(function(){
  return false;
});
— Prateek Joshi
kaynak
18

Sadece jQuery kullanarak düğmelerinizin referansını alabilir ve aşağıdaki gibi yayılmasını önleyebilirsiniz:

 $(document).ready(function () {
    $('#BUTTON_ID').click(function(e) {

            e.preventDefault();
            e.stopPropagation();
            e.stopImmediatePropagation();

            return false;
    });});
— Ata Iravani
kaynak
2
e.preventDefault(); e.stopPropagation();işler için yeterlidir. e.stopImmediatePropagation()bu Chrome'da tanımsız yöntem hatası veriyor.
— Subroto
14

$("form").submit(function () { return false; }); düğmenin gönderilmesini engelleyecek veya düğme türünü yalnızca düğme <input type="button"/>yerine "düğme" olarak değiştirebilirsiniz . <input type="submit"/>Bu seçenek yalnızca bu düğme bu formdaki tek düğme değilse çalışır.

— Shiala
kaynak
2
Bu jQuery içindir, Javascript içinde eşdeğerdir: myform.onsubmit = function () {return false} ... ayrıca, gönder düğmesini kaldırsanız bile, form başka bir form alanından enter tuşuna basılarak da gönderilebilir.
— Synexis
10

Bu, söylendiği gibi bir html5 hatasıdır, düğmeyi yine de bir gönderme olarak kullanabilirsiniz (hem javascript hem de javascript olmayan kullanıcıları kapsamak istiyorsanız):

     <button type="submit" onclick="return false"> Register </button>

Bu şekilde gönderimi iptal edersiniz, ancak jquery veya javascript işlevlerinde ne yaparsanız yapın ve javascript'i olmayan kullanıcılar için gönderirsiniz.

— sagits
kaynak
8

Eminim FF'de 

removeItem

işlevi bir JavaScript hatasıyla karşılaşırsa, bu IE'de gerçekleşmez

Javascript hatası göründüğünde "return false" kodu çalışmaz, bu da sayfayı geri göndermeye dönüştürür

— Alin Vasile
kaynak
8

Return false, varsayılan davranışı önler. ancak return false ek tıklama etkinliklerinin köpürmesini bozar. Bu, bu işlev çağrıldıktan sonra başka tıklama bağlamaları varsa, bunların dikkate alınmadığı anlamına gelir.

 <button id="btnSubmit" type="button">PostData</button>
 <Script> $("#btnSubmit").click(function(){
   // do stuff
   return false;
}); </Script>

Veya basitçe böyle koyabilirsiniz

 <button type="submit" onclick="return false"> PostData</button>
— Sunil Dhappadhule
kaynak
7

e.preventDefault();Sayfanızın form göndermesini engellemeniz için yönteminizi eklemeniz yeterlidir.

function myFunc(e){
       e.preventDefault();
}

MDN Web Dokümanlarına Göre

Olay arabiriminin preventDefault () yöntemi, kullanıcı aracısına, olay açıkça işlenmezse, varsayılan eyleminin normalde olduğu gibi dikkate alınmaması gerektiğini bildirir. Olay, dinleyicilerinden biri çağrmadıkça stopPropagation ()veya stopImmediatePropagation ()her ikisi de yayılımı sonlandırmadıkça, her zamanki gibi yayılmaya devam eder .

— Mselmi Ali
kaynak
6

Düğmenizi normal şekilde ayarlayın ve event.preventDefault gibi kullanın. 

   <button onclick="myFunc(e)"> Remove </button>  
   ...
   ...

   In function...

   function myFunc(e){
       e.preventDefault();
   }
— Vishal
kaynak
4 
return false;

İşlev sonunda veya işlev çağrısından sonra false değerini döndürebilirsiniz.

En son olan şey olduğu sürece form gönderilmez.

— mucizeler
kaynak
2

İşte basit bir yaklaşım:

$('.mybutton').click(function(){

    /* Perform some button action ... */
    alert("I don't like it when you press my button!");

    /* Then, the most important part ... */
    return false;

});
— axiom82
kaynak
1

Aşağıdaki örnek kod, düğme tıklatmasının form göndermesini nasıl önleyeceğinizi gösterir.

Örnek kodumu deneyebilirsiniz:

 <form autocomplete="off" method="post" action="">
   <p>Title:
     <input type="text" />
   </p>
   <input type="button" onclick="addItem()" value="Add Item">
   <input type="button" onclick="removeItem()" value="Remove Last Item">
   <table>
     <th>Name</th>

     <tr>
       <td>
         <input type="text" id="input1" name="input1" />
       </td>
       <td>
         <input type="hidden" id="input2" name="input2" />
       </td>
     </tr>
   </table>
   <input id="submit" type="submit" name="submit" value="Submit">
 </form>
<script language="javascript">
function addItem() {
return false;
}

function removeItem() {
return false;
}
</script>
— KNVB
kaynak
0

RemoveItem işlevi aslında bir hata içerir, bu da form düğmesini varsayılan davranışı yapar (formu gönderme). Javascript hata konsolu genellikle bu durumda bir işaretçi verecektir.

Javascript bölümündeki removeItem işlevine bakın:

Çizgi:

rows[rows.length-1].html('');

çalışmıyor. Bunun yerine şunu deneyin:

rows.eq(rows.length-1).html('');
— ylebre
kaynak
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.