запобігти оновленню сторінки при натисканні кнопки всередині форми


148

У мене є проблема під час використання кнопок всередині форми. Я хочу, щоб ця кнопка функціонувала. Це так, але з небажаним результатом оновить сторінку.

Мій простий код іде так

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

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

Що робити, щоб запобігти оновленню сторінки?


вам потрібно вказати параметри, якщо ви просто використовуєте window.location = window.location.href; це оновить всю сторінку, і вона скине всі ваші попередні запити. будь ласка, перевірте це: stackoverflow.com/questions/133925/…
Лінгвіні


@bunkdeath: Відмовити відповідь слід приймати.
Джад Чахін

@JadChahine вибачте, я не зрозумів, що не прийняв відповідь, дякую, що вказав на це. Я був початківцем і не знав, що робив чи не робив тоді. Але я не буду приймати відповідь, яку ви згадали, скоріше прийму ту, яка мені допомогла в той час :)
bunkdeath

Відповіді:


67

Нехай getData()повертається помилковим. Це виправить.

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

1
Справді. onclickФункція повинна повертати брехня, а НЕ getData.
Квентін

1
Це я нагадав, але добре, я змінив відповідь, щоб вона була більш зрозумілою.
JNDPNT

5
вам не потрібно змінювати функцію - ви можете просто використовувати onclick = "getData (); повернути false;"

2
type="button"це справді улов.
deepcell

338

Додати type="button"до кнопки.

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

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


8
ідеальна відповідь, дана тут
timberlake

2
За винятком цього заважає перевірити форму HTML5 (наприклад, для введення type = "email").
2540625

2
Ви також можете додати return false;в onclick:onclick="getData(); return false;"
JBaczuk

1
Це найкращий варіант. Хоча "return false" може працювати в рядку, не існує такого варіанту, про який я знаю, коли додають слухачів подій. Визначення типу = "кнопка" дійсно економить день.
Назавжди Нооб

1
Це фактично "офіційне" вирішення подібного роду проблем. Повернення помилкового MIGHT також працює, але кнопка типу ніколи не вийде з ладу.
student0495

18

Все, що вам потрібно зробити - це поставити тег типу і зробити кнопку типу.

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

Це вирішує питання


2
Чи можете ви детально пояснити та пояснити, чому?
mjk

поведінка кнопки за замовчуванням має тип подання, коли всередині форми, змінивши її на тип кнопки, можна уникнути публікації
Ганеш Кодіганті

16

Проблема полягає в тому, що вона запускає подання форми. Якщо ви зробите getDataфункцію, return falseто вона повинна зупинити подання форми.

Крім того, ви також можете використовувати preventDefaultметод об'єкта події:

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

Подія натискання, яка буде передана.
JNDPNT

За винятком того, що (без подальших змін) об'єкт події не буде передано.
Квентін

<button name = "data" onclick = "getData ($ event)"> Клацніть </button>
RoboMex


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

замість тегу кнопок використовуйте тег введення. Подобається це,

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

але це не створило кнопку станом наbutton type='button'
Pardeep Jain

3

Якщо ваша кнопка за замовчуванням "кнопка", переконайтеся, що ви explicity встановили атрибут типу, інакше 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

});

2

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

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

Після того, як усі поля форми виконають ваші критерії, ви можете знову включити кнопку

Використання Jquery буде приблизно таким

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

0

З якої - небудь причини в Firefox , навіть якщо у мене є return false;і myform.preventDefault();в функції, він оновлює сторінку після запуску функції. І я не знаю, чи це хороша практика, але це працює для мене, я вставляю javascript:this.preventDefault();в атрибут action.

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

Я не думаю, що це елегантний спосіб зробити це, але в моєму випадку у мене не було іншого вибору.

Оновлення:

Якщо ви отримали помилку ... після обробки ajax, видаліть дію атрибута та в onsubmitатрибуті виконайте свою функцію з подальшим помилковим поверненням:

onsubmit="functionToRun(); return false;"

Я не знаю, чому все це неприємності з Firefox, але сподіваюся, це працює.


0

Функція повернення працює не у всіх випадках. Я спробував це:

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

Це не працювало для мене.

Я намагався повернути помилкову функцію, і вона працювала на мене.

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

0

Я зіткнувся з тією ж проблемою. Проблема полягає у onclickфункції. З функцією не повинно виникнути жодних проблем getData. Це спрацювало, зробивши onclickфункцію повернення помилковою.

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

0

Це найкраще рішення:

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

Примітка: Мій код дуже простий.


-2

Ви можете використовувати 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>

Ця відповідь надто складна, не кажучи вже про те, щоб вимагати зовнішньої бібліотеки, щоб запобігти видачі ОП, де можна використовувати інші, простіші методи.
Зак
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.