форма без дії, і де enter не перезавантажує сторінку

94

Я шукаю найоптимальніший спосіб створити HTML-форму, яка не має кнопки подати. Це само по собі досить просто, але мені також потрібно зупинити форму від перезавантаження, коли виконуються подібні до подання речі (наприклад, натискання Enterв текстовому полі).

javascript html forms

— Метт Робертс
джерело

Ви хочете, щоб його ніколи не подавали?

— UpTheCreek,

Якщо у вас є просто <form> з одним <input>, що є текстовим полем, воно не повинно надсилатися при натисканні клавіші Enter, чи не так?

— Zack The Human

Я хочу, щоб він подався за якихось інших умов (насправді натискання певної кнопки). Проблема полягає в тому, що мені не вдалося отримати поведінку "введення в текстовому полі" при розміщенні / переході на ту саму URL-адресу, щоб це не сталося. Тож моя ретельно створена форма, де вам потрібно ввести X, Y і Z, щоб її надіслати, може бути помилково надіслана користувачем, натиснувши Enter.

— Метт Робертс

44

Додайте обробник onsubmit до форми (або за допомогою простого js, або jquery $ (). Submit (fn)), і поверніть false, якщо не виконані ваші конкретні умови.

Якщо ви ніколи не хочете, щоб форма надсилалася, - у такому випадку, чому б просто не залишити атрибут 'action' на елементі форми?

— K Prime
джерело

150

Форма без actionатрибута, відповідно до стандартів, не є формою - і насправді призведе до перезавантаження сторінки в деяких браузерах .. Я виявив, що це action="javascript:void(0);"працює добре.

— Dutchie432

Відповідь голландців працює чудово. Firefox просто освіжав сторінку.

— IAmGroot

1

@ Dutchie432 повинен перетворити це на відповідь, а не на коментар. Тоді він пробився б до вершини, де йому належить. Крім того, KPrime міг коригувати свою відповідь, оскільки пропуск дії для мене не спрацював ...

— sage

211

Ви хочете включити action="javascript:void(0);"у свою форму, щоб запобігти перезавантаженню сторінки та підтримувати стандарт HTML.

— Dutchie432
джерело

4

Щойно витратив 2 дні, намагаючись придушити дію за замовчуванням кнопки подати при натисканні клавіші enter, оскільки, хоча дія мала місце, сторінка перезавантажилася (Firefox). Додавши javascript void як дію на форму, це виправлено. Дякую за це.

— Tony Payne

дякую за цю додаткову відповідь. це все ще працює - але чи все-таки це рішення «сучасного рівня» у 2016 році?

— low_rents

1

@low_rents Я все ще використовую його весь час і особисто не знайшов кращого рішення.

— Dutchie432

1

Дякуємо за точне та чудове рішення для вирішення проблеми перезавантаження сторінки при натисканні клавіші Enter :) Найкраще рішення.

— Імран Рафік Швидше

9

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

onKeyPress="if (event.which == 13) return false;"

Наприклад:

<input id="txt" type="text" onKeyPress="if (event.which == 13) return false;"></input>

— GenericMeatUnit
джерело

1

Дякую тобі за це. Боюся, ясність Вашої відповіді зрозуміла мені правильність попередньої відповіді, тож Ви не отримаєте прийняту відповідь, але отримаєте мою подяку та прихильність!

— Метт Робертс

2

Дякую. Радий допомогти. Я ніколи не був одним із центрів уваги. ;)

— GenericMeatUnit

5

Коли ви натискаєте клавішу Enter у формі, природну поведінку форми потрібно додати, щоб зупинити цю поведінку, яка не є природною, вам слід запобігти її поданню (поведінка за замовчуванням) за допомогою jquery:

$("#yourFormId").on("submit",function(event){event.preventDefault()})

— jsDevia
джерело

4

ідея:

<form method="POST" action="javascript:void(0);" onSubmit="CheckPassword()">
    <input id="pwset" type="text" size="20" name='pwuser'><br><br>
    <button type="button" onclick="CheckPassword()">Next</button>
</form>

і

<script type="text/javascript">
    $("#pwset").focus();
    function CheckPassword()
    {
        inputtxt = $("#pwset").val();
        //and now your code
        $("#div1").load("next.php #div2");
        return false;
    }
</script>

— том дворянин
джерело

1

Два шляхи вирішення:

Значення дії форми - "javascript: void (0);".
додати прослуховувач події натискання клавіші для форми, щоб запобігти надсиланню.

— вексель
джерело

Прослуховування події натискання клавіші (наприклад, клавіша Enter) може спричинити вам проблеми з textareas, і, можливо, вибір автозавершення або випадаючих списків, а мобільний телефон може стати іншим джерелом проблем.

— luckydonald

0

Перша відповідь - найкраще рішення:

Додайте обробник onsubmit до форми (або за допомогою простого js, або jquery $ (). Submit (fn)), і поверніть false, якщо не виконані ваші конкретні умови.

Більш конкретно з jquery:

$('#your-form-id').submit(function(){return false;});

Якщо ви ніколи не хочете, щоб форма надсилалася, - у такому випадку, чому б просто не залишити атрибут 'action' на елементі форми?

Написання розширень Chrome - це приклад того, де у вас може бути форма для введення користувачем, але ви не хочете, щоб вона надсилалася. Якщо ви використовуєте action = "javascript: void (0);", код, ймовірно, буде працювати, але ви отримаєте цю проблему, коли з'явиться помилка про запуск вбудованого Javascript.

Якщо повністю залишити дію, форма перезавантажиться, що також небажано в деяких випадках під час написання розширення Chrome. Або якщо у вас була веб-сторінка з якимсь вбудованим калькулятором, де користувач міг би надати певні дані та натиснути "Обчислити" або щось подібне.

— skelliam
джерело