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

У меня проблема при использовании кнопок внутри формы. Я хочу, чтобы эта кнопка вызывала функцию. Это так, но с нежелательным результатом, что он обновляет страницу.

мой простой код выглядит так

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

при нажатии кнопки функция вызывается с обновленной страницей, которая сбрасывает весь мой предыдущий запрос, который влияет на текущую страницу, которая была результатом предыдущего запроса.

что я должен сделать, чтобы предотвратить обновление страницы?

107
html javascript

11 ответов

пусть getData() возвращает false. Это все исправит.

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

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

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

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

255

HTML-код

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

jQuery

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

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

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

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

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

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

это решает проблему

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

вместо использования тега кнопки, использовать тег input. Вот так,

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

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

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

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

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

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

я столкнулся с той же проблемой. Проблема заключается в

1

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

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

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

обновление:

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

onsubmit="functionToRun(); return false;"

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

0

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

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

это не работает для меня.

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

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

вы можете использовать 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>
-1