zapobiega odświeżaniu strony po kliknięciu przycisku wewnątrz formularza

Mam problem podczas używania przycisków w formularzu. Chcę, żeby ten przycisk wywoływał funkcję. Tak, ale z niepożądanym skutkiem odświeża stronę.

Mój prosty kod wygląda tak

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

Po kliknięciu przycisku funkcja zostaje wywołana z odświeżeniem strony, co powoduje zresetowanie wszystkich moich poprzednich żądań, które mają wpływ na bieżącą stronę, będącą wynikiem poprzedniego żądania.

Co powinienem zrobić, aby zapobiec odświeżeniu strony?

Niech getData()zwróci fałsz. To naprawi to.

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

Dodaj type="button"do przycisku.

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

Domyślna wartość typeprzycisku to submit, która samodzielnie publikuje formularz w Twoim przypadku i sprawia, że ​​wygląda jak odświeżenie.

Wszystko, co musisz zrobić, to umieścić znacznik typu i zrobić przycisk typu.

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

To rozwiązuje problem

Problem w tym, że uruchamia przesłanie formularza. Jeśli wykonasz tę getDatafunkcję return false, powinna ona zatrzymać przesyłanie formularza.

Alternatywnie możesz również użyć preventDefaultmetody obiektu zdarzenia:

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>

zamiast tagu przycisku, użyj tagu wejściowego. Lubię to,

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

Jeśli twój przycisk jest domyślnym „przyciskiem”, upewnij się, że wyraźnie ustawiłeś atrybut type, w przeciwnym razie WebForm potraktuje go jako domyślny.

jeśli używasz js, zrób to w ten sposób

<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

});

Metoda javascript służąca do wyłączania samego przycisku

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

Gdy wszystkie pola formularza spełnią Twoje kryteria, możesz ponownie włączyć przycisk

Używanie Jquery będzie wyglądać mniej więcej tak

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

Z jakiegokolwiek powodu w Firefoksie, mimo że mam return false;i myform.preventDefault();w funkcji, odświeża stronę po uruchomieniu funkcji. I nie wiem, czy to dobra praktyka, ale u mnie działa, wstawiam javascript:this.preventDefault();atrybut działania.

Jak powiedziałem, próbowałem wszystkie inne sugestie i one działać poprawnie we wszystkich przeglądarkach, ale Firefox, jeśli masz ten sam problem, spróbuj dodanie zapobiec zdarzenie w atrybucie akcji albo javascript:return false;albo javascript:this.preventDefault();. Nie próbuj zjavascript:void(0); który złamie twój kod. Nie pytaj mnie dlaczego :-).

Nie sądzę, żeby to był elegancki sposób, ale w moim przypadku nie miałem innego wyjścia.

Aktualizacja:

Jeśli otrzymałeś błąd ... po przetworzeniu Ajax, usuń akcję atrybutu iw onsubmitatrybucie wykonaj swoją funkcję, po której nastąpi fałszywy zwrot:

onsubmit="functionToRun(); return false;"

Nie wiem, dlaczego tak się dzieje z Firefoksem, ale mam nadzieję, że to zadziała.

Funkcja Return nie działa we wszystkich przypadkach. Próbowałem tego:

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

To mi nie pomogło.

Próbowałem zwrócić false wewnątrz funkcji i zadziałało.

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

Miałem ten sam problem. Problem dotyczy onclickfunkcji. Nie powinno być żadnych problemów z funkcją getData. Zadziałało, powodując, że onclickfunkcja zwróciła fałsz.

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

To jest najlepsze rozwiązanie:

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

Uwaga: mój kod jest bardzo prosty.

Możesz użyć Ajax i jquery, aby rozwiązać ten problem:

<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>