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

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

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

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

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

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

Давай getData()вернем ложь. Это исправит это.

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

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

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

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

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

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

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

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

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

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>

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

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

Если вашей кнопкой по умолчанию является «кнопка», убедитесь, что вы полностью задали атрибут 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

});

Метод JavaScript, чтобы отключить саму кнопку

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

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

Использование Jquery будет примерно таким

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

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

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

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

Обновить:

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

onsubmit="functionToRun(); return false;"

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

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

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

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

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

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

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

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

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

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

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

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