Form Gönder En İyi Uygulama Çalıştır?

Question

Bir form gönderildiğinde bir JavaScript işlevi çalıştırmak istiyorum. Sorun, form gönderildiğinde, sayfanın yeniden yüklenmesi ve form değerlerinin URL'ye GET parametreleri olarak eklenmesidir. Mevcut sayfada kalmasını ve sadece JavaScript işlevini çalıştırmasını istiyorum.

Sayfanın yeniden yüklenmesi ve parametrelerin gönderilmesini önlemek için en iyi uygulamanın (veya ne yaptığınızın) neler olduğunu merak ediyordum.

Answer 1

Form gönderildiğinde, JavaScript kodunu yürütmek için onsubmit olayını kullanın. Daha sonra, form teslimini devre dışı bırakmak için false değerini döndürebilir veya geçirilen etkinliğin preventDefault yöntemini çağırabilirsiniz. Örneğin

:

<script> 
function doSomething() { 
    alert('Form submitted!'); 
    return false; 
} 
</script> 

<form onsubmit="return doSomething();" class="my-form"> 
    <input type="submit" value="Submit"> 
</form> 

Bu çalışır, ancak satır içi CSS kurallarının sürü yazmayın gerektiği gibi çöp değil JavaScript HTML en iyisidir. Birçok Javascript çerçevesi bu endişeleri ayırmayı kolaylaştırır. JQuery'de, JavaScript kodunu aşağıdaki gibi kullanarak bir etkinliğe bağlanırsınız:

<script> 
$('.my-form').on('submit', function() { 
    alert('Form submitted!'); 
    return false; 
}); 
</script> 

<form class="my-form"> 
    <input type="submit" value="Submit"> 
</form> 

Answer 2

Bir olay işleyicisini, formun gönderim olayına ekleyin. Varsayılan eylemi iptal ettiğinden emin olun.

Quirks Mode, a guide to event handlers sahiptir, ancak kodu basitleştirmek ve tarayıcılar arasındaki farkları ortadan kaldırmak için bir kütüphane kullanmanız daha iyi olacaktır. Tüm önemli olanlar (YUI ve jQuery gibi) olay işleme özelliklerini içerir ve büyük bir tiny event libraries koleksiyonu vardır. İşte

Eğer YUI 3'te yapacağını nasıl: JavaScript herhangi bir nedenle başarısız olursa

<script src="http://yui.yahooapis.com/3.4.1/build/yui/yui-min.js"></script> 
<script> 
    YUI().use('event', function (Y) { 
     Y.one('form').on('submit', function (e) { 
      // Whatever else you want to do goes here 
      e.preventDefault(); 
     }); 
    }); 
</script> 

emin the server will pick up the slack olun.

Answer 3

Bunun için biraz geç olduğunu biliyorum. Ancak, her zaman etkinlik dinleyicileri oluşturmanın en iyi yolunun doğrudan JavaScript’ten olduğunu düşündüm. Satır içi CSS stilleri uygulama gibi değil.

function validate(){ 
    //do stuff 
} 
function init(){ 
    document.getElementById('form').onsubmit = validate; 
} 
windows.onload = init; 

Bu şekilde, HTML'niz boyunca bir sürü etkinlik dinleyiciniz yok.