formun içindeki düğme tıklandığında sayfanın yenilenmesini önle

Formun içindeki düğmeleri kullanırken bir sorunum var. Bu düğmenin işlevi çağırmasını istiyorum. Bunu yapar, ancak istenmeyen sonuçlarla sayfayı yeniler.

Basit kodum şöyle

<form method="POST">
    <button name="data" onclick="getData()">Click</button>
</form>

Düğmeye tıklandığında işlev, sayfa yenilendiğinde çağrılır; bu, önceki isteğimin sonucu olan geçerli sayfayı etkileyen önceki isteğimi sıfırlar.

Sayfanın yenilenmesini önlemek için ne yapmalıyım?

Let getData()dönüş false. Bu sorunu düzeltir.

<form method="POST">
    <button name="data" onclick="return getData()">Click</button>
</form>

type="button"Düğmeye ekleyin .

<button name="data" type="button" onclick="getData()">Click</button>

typeBir düğmenin varsayılan değeri submit, formu kendi durumunuzda gönderen ve yenilemeye benzeyen değerdir .

Tek yapmanız gereken bir tür etiketi koymak ve tür düğmesine basmaktır.

<button id="btnId" type="button">Hide/Show</button>

Bu sorunu çözdü

Sorun form gönderme tetikler olmasıdır. getDataİşlevi yaparsanız return false, formun gönderilmesini durdurmalıdır.

Alternatif olarak, preventDefaultolay nesnesinin yöntemini de kullanabilirsiniz :

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

HTML

<form onsubmit="return false;" id="myForm">
</form>

jQuery

$('#myForm').submit(function() {
    doSomething();
});

<form method="POST">
    <button name="data" onclick="getData()">Click</button>
</form>

düğme etiketi kullanmak yerine giriş etiketini kullanın. Bunun gibi,

<form method="POST">
    <input type = "button" name="data" onclick="getData()" value="Click">
</form>

Düğmeniz varsayılan "düğme" ise, type özniteliğini ayarladığınızdan emin olun, aksi takdirde WebForm bunu varsayılan olarak gönderme olarak kabul eder.

js kullanıyorsanız böyle yapın

<form method="POST">
   <button name="data"  type="button" id="btnData" onclick="getData()">Click</button>
</form> 

**If you use jquery use like this**


<form method="POST">
   <button name="data"  type="button" id="btnData">Click</button>
</form>




$('#btnData').click(function(e){
   e.preventDefault();
   // Code goes here
getData(); // your onclick function call here

});

Düğmenin kendisini devre dışı bırakmak için bir javascript yöntemi

document.getElementById("ID NAME").disabled = true;

Tüm form alanları ölçütlerinizi karşıladıktan sonra düğmeyi yeniden etkinleştirebilirsiniz

Jquery kullanmak böyle bir şey olacak

$( "#ID NAME" ).prop( "disabled", true);

Firefox'ta herhangi bir nedenden dolayı return false;ve myform.preventDefault();işlevde olsam da , işlev çalıştıktan sonra sayfayı yeniler. Ve bunun iyi bir uygulama olup olmadığını bilmiyorum, ama benim için işe yarıyor javascript:this.preventDefault();, aksiyon özelliğini ekliyorum.

Dediğim gibi, ben tüm diğer öneri denedik ve hepsi tarayıcılarda cezası çalışır ancak aynı sorunu varsa Firefox, aksiyon özelliğinden olayı önlemek eklemeyi deneyin javascript:return false;veya javascript:this.preventDefault();. javascript:void(0);Hangi kodunuzu kıracak denemeyin . Bana nedenini sorma :-).

Bunun zarif bir yol olduğunu düşünmüyorum, ama benim durumumda başka seçeneğim yoktu.

Güncelleme:

Ajax işlendikten sonra bir hata aldıysanız, öznitelik eylemini kaldırın ve öznitelikte onsubmit, işlevinizi yürütün ve yanlış dönüşü izleyin:

onsubmit="functionToRun(); return false;"

Firefox ile tüm bu sorunların nedenini bilmiyorum, ama umarım bu işe yarar.

Geri dönüş fonksiyonu her durumda çalışmıyor. Bunu denedim:

<button id="Reset" class="Button-class" onclick="return Reset()">Show result</button>

Benim için işe yaramadı.

İşlevin içinde yanlış döndürmeye çalıştım ve bu benim için çalıştı.

function Reset()
{
    .
    .
    .
    return false;
}

Aynı sorunla karşı karşıyaydım. Sorun onclickfonksiyonu ile. İşlevle ilgili herhangi bir sorun olmamalıdır getData. onclickİşlevi yanlış döndürerek çalıştı .

<form method="POST">
    <button name="data" onclick="getData(); return false">Click</button>
</form>

Bu en iyi çözümdür:

<form  method="post"> 
    <button  type="button" name="data" onclick="getData()">Click Me</button>
</form>

Not: Kodum çok basit.

Bu sorunu çözmek için ajax ve jquery kullanabilirsiniz:

<script>
    function getData() {
        $.ajax({
            url : "/urlpattern",
            type : "post",
            success : function(data) {
                alert("success");
            } 
        });
    }
</script>
<form method="POST">
    <button name="data" type="button" onclick="getData()">Click</button>
</form>