Предотвратить обновление страницы при нажатии кнопки внутри формы

Ответ 1

Пусть getData() вернет false. Это исправит это.

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

Ответ 2

Добавьте к кнопке тип = "button".

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

Значение по умолчанию для "type" для кнопки "submit", которое автоматически отправляет форму в вашем случае и делает ее похожим на обновление.

Ответ 3

Проблема в том, что это вызывает отправку формы. Если вы сделаете функцию getData return false, то она должна остановить отправку формы.

В качестве альтернативы вы также можете использовать метод preventDefault объекта события:

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

Ответ 4

Все, что вам нужно сделать, это поместить тег типа и сделать кнопку типа.

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

Ответ 5

HTML

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

JQuery

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

Ответ 6

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

вместо использования тега кнопки используйте тег ввода. Как это,

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

Ответ 7

Метод javascript для отключения самой кнопки

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

Как только все поля формы удовлетворяют вашим критериям, вы можете снова включить кнопку

Использование JQuery будет чем-то вроде этого

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

Ответ 8

Если ваша кнопка является кнопкой по умолчанию, убедитесь, что вы установили атрибут type, иначе WebForm будет рассматривать его как отправку по умолчанию.

если вы используете JS сделать так

<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

});

Ответ 9

По какой-либо причине в Firefox, хотя у меня есть return false; и myform.preventDefault(); в функции, она обновляет страницу после запуска функции. И я не знаю, является ли это хорошей практикой, но она работает для меня, я вставляю javascript:this.preventDefault(); в атрибут действия.

Как я уже сказал, я пробовал все другие предложения, и они отлично работают во всех браузерах, но Firefox, если у вас такая же проблема, попробуйте добавить событие предупреждения в атрибут действия либо javascript:return false;, либо javascript:this.preventDefault();. Не пытайтесь использовать javascript:void(0);, который нарушит ваш код. Не спрашивайте меня, почему: -).

Я не думаю, что это элегантный способ сделать это, но в моем случае у меня не было другого выбора.

Update:

Если вы получили сообщение об ошибке... после обработки ajax, затем удалите действие атрибута и в атрибуте onsubmit, выполните свою функцию, а затем ложное возвращение:

onsubmit="functionToRun(); return false;"

Я не знаю, почему все эти проблемы с Firefox, но надеюсь, что это сработает.

Ответ 10

Функция возврата не работает во всех случаях. Я пробовал это:

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

Это не помогло мне.

Я попытался вернуть false внутри функции, и это сработало для меня.

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

Ответ 11

Я столкнулся с той же проблемой. Проблема с функцией onclick. Не должно быть никаких проблем с функцией getData. Это сработало, заставив функцию onclick вернуть false.

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

Ответ 12

Это лучшее решение:

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

Примечание: мой код очень прост.

Ответ 13

Вы можете использовать ajax и jquery для решения этой проблемы:

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