Форма отправки javascript не работает

0

Как в соответствии с рекомендацией по превентивной форме перенаправить OR refresh на submit? , У меня есть моя форма, которая

<form id="editingForm">
  Line height (between 10 and 60): 
  <input type="number" id="LineHeightEntry" name="LineHeightEntry" min="10" max="60" value="30">
  <input type="submit" id="submitLineChange" value="Submit">
</form>

В файле с именем test.html. Javascript - это

$('#editingForm').submit(function(){
  alert("abc");
  return false;
});

Цель состоит в том, чтобы вызвать функцию, а затем javascript может сделать что-то на странице, но страница не перезагружается или не перенаправляется в другое место. Однако вместо этого я получаю сообщение: я установил LineHeightEntry на 40 и нажал submit. Затем он перенаправляется на test.html? LineHeightEntry = 40. Почему это так?

edit - Файл находится по адресу http://probuling.net/sandbox/test.html.

  • 1
    Вы программно устанавливаете атрибут action в своей form ... как я его не вижу
  • 0
    нужно также установить атрибут метода для формы ...
Показать ещё 3 комментария
Теги:
forms

4 ответа

1
Лучший ответ

Вот рабочий пример:

<html>
<head>
<script src="jquery-1.9.1.min.js"></script>
</head>
    <form id="editingForm" action="toto">
      Line height (between 10 and 60): 
      <input type="number" id="LineHeightEntry" name="LineHeightEntry" min="10" max="60" value="30">
  <input type="submit" id="submitLineChange" value="Submit">
</form>
<script>
$('#editingForm').submit(function(event)
{
  alert("abc");
event.preventDefault(); // if you want to disable the action
  return false;

});
</script>
</html>
Поделиться
  • 0
    Это также перенаправляет на мой сервер probuling.net/sandbox/test2.html
  • 0
    сделано, все еще перенаправление.
Показать ещё 10 комментариев
0

Добавьте атрибут действия в форму или просто обновите страницу при отправке.

<form id="editingForm" action="/another/url">

Я бы посоветовал узнать, как использовать обычную форму submit, прежде чем пытаться использовать Javascript. Любой вход с атрибутом имени будет добавлен к URL-адресу, поскольку у вас нет действия, а метод по умолчанию - GET.

Поделиться
  • 0
    Это не проблема. По умолчанию страница будет отправлена обратно на себя.
  • 0
    Я знаю, как использовать нормальную форму отправки. Я хочу, чтобы он не обновлял страницу и не загружал любую другую страницу. В основном поля ввода позволяют пользователю изменять CSS некоторых элементов на странице, а текстовая область позволяет пользователю также изменять содержимое этих элементов. Поэтому, когда форма отправлена, я хочу, чтобы она просто запускала функции javascript, которые выполняют всю работу. У меня все это работает в том смысле, что я привязал его к нажатию кнопки, и с этим он прекрасно работает. Однако я не могу заставить его работать с формой, поэтому это то, что меня интересует.
Показать ещё 1 комментарий
0

попробуйте сделать это без jQuery. Кроме того, попробуйте использовать event.preventDefault

document.querySelector('#editingForm').onsubmit = function(event) {
  alert('abc');
  event.preventDefault();
  return false;
};
Поделиться
  • 0
    это тоже не работает. Я помещаю URL файла в ОП. probuling.net/sandbox/test.html
  • 0
    Я только что попробовал вашу тестовую страницу, и она работает, как и ожидалось для меня (на Chrome). Какой браузер вы используете? Вы отключили JavaScript?
0

удалить строку return false;

Это предотвратит событие по умолчанию. Подробнее: http://fuelyourcoding.com/jquery-events-stop-misusing-return-false/

Поделиться
  • 0
    Хорошее предложение, но не совсем ответ.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню