как убрать обновление страницы после отправки формы
запретить обновление страницы при нажатии кнопки внутри формы
У меня проблема при использовании кнопок внутри формы. Я хочу, чтобы эта кнопка вызывала функцию. Это так, но с нежелательным результатом, что он обновляет страницу.
мой простой код выглядит так
при нажатии кнопки функция вызывается с обновленной страницей, которая сбрасывает весь мой предыдущий запрос, который влияет на текущую страницу, которая была результатом предыдущего запроса.
что я должен сделать, чтобы предотвратить обновление страницы?
11 ответов
пусть getData() возвращает false. Это все исправит.
добавить тип= «button»к кнопке.
HTML-код
jQuery
проблема в том, что он инициирует отправку формы. Если вы сделаете getData функции return false затем он должен остановить отправку формы.
кроме того, вы также можете использовать preventDefault метод объекта события:
все, что вам нужно сделать, это поставить тег типа и сделать кнопку типа.
это решает проблему
вместо использования тега кнопки, использовать тег input. Вот так,
метод javascript для отключения самой кнопки
Как только все поля формы удовлетворят вашим критериям, вы можете повторно включить кнопку
использование Jquery будет чем-то вроде этого
я столкнулся с той же проблемой. Проблема заключается в
Я не думаю, что это элегантный способ сделать это, но в моем случае у меня не было другого выбора.
если вы получили сообщение об ошибке. после обработки ajax удалите действие атрибута и в onsubmit атрибут, выполните свою функцию, а затем false return:
onsubmit=»functionToRun(); return false;»
Я не знаю, почему все эти проблемы с Firefox, но надеюсь, что это работает.
функция возврата не работает во всех случаях. Я попробовал:
это не работает для меня.
Я попытался вернуть false внутри функции, и это сработало для меня.
вы можете использовать ajax и jquery для решения этой проблемы:
Как сделать чтобы страница не обновлялась после отправки формы
Доброго времени суток дорогие Форумчане 
PHP знаю не очень хорошо, поэтому прошу вас выручить.
Написал простой скрипт изменения цены при изменении размера товара. Работает так 
писать весь код не стал)
Циклом из БД выводятся размеры в option. При изменении option Автоматически срабатывает submit. И по value из option в бд происходит поиск цены и соответсвенно она выводится. Код работает на ура, только одно но( При срабатывании submit страница прыгает вверх(происходит обновление), и чтобы посмотреть цену приходится спускаться обратно. Помогите пожалуйста чтобы при отправке формы страница оставалась на том месте где она была Попробовал сделать бы сам, но даже в голову не приходит как это реализовать:'( Надеюсь на вашу помощь. Заранее спасибо.
Как сделать запрос к php файлу, чтобы страница не обновлялась?
Всем привет. Подскажите пожалуйста, как обратиться к php файлу и вернуть значение на страницу без.
Как сделать, чтобы после заполнения текстбокса не обновлялась вся страница
Я новичок в ASP.NET Делаю сайт. В середине страницы сделал текстбокс и кнопку. По событию.
Как сделать так чтобы при нажатии на кнопку не обновлялась страница
Как сделать так чтобы при нажатии на кнопку не обновлялась страница?
Почему обновляется страница и как сделать так, чтобы она не обновлялась
Есть метод в контроле, в который передается или нет фаил. Когда я обращаюсь к этому методу и.
Отправляем форму без обновления страницы с помощью jQuery
Что мы строим
В этом примере у нас есть простая контактная форма с именем, адресом электронной почты и номером телефона. Форма отправляет все поля в php-скрипт без обновления страницы, используя собственные функции jQuery (это означает, вам не нужно загружать дополнительные плагины, чтобы заставить все это работать.
Если вы обнаружили эту статью без какого-либо предварительного знакомства с jQuery, отличным местом для начала станет статья Джеффри Пута о 15 ресурсах, чтобы начать работу с jQuery From Scratch.
Давайте посмотрим на нашу разметку html. Начнем с нашей базовой html-формы:
Вы могли заметить, что я включил div с id contact_form, который оборачивает всю форму.
Не забудьте добавить этот div к вашей собственной форме, поскольку нам позже понадобится этот оберточный div. Вы
возможно также заметили, что я оставил как действие, так и метод тега формы пустыми. Нам
на самом деле здесь не нужен ни один из них, потому что jQuery позаботится об этом позже.
Я добавил некоторые стили CSS и фоновое изображение из Photoshop, чтобы создать следующую форму:
Следующим шагом в этом процессе является добавление некоторого кода jQuery. Я собираюсь предположить, что вы загрузили jQuery, загрузили его на свой сервер и ссылаетесь на него на своей веб-странице.
Затем откройте еще один новый файл javascript, укажите его в своем html, как и любой обычный файл javascript,
и добавьте следующее:
Мы проверяем, сначала осталось ли поле имени пустым, и если да, тогда мы покажем метку с идентификатором name_error. Затем мы сосредоточим внимание на поле ввода имени, если пользователь
совсем не понимает, что делать дальше! (Я научился никогда не принимать слишком много от пользователей).
Затем мы проверяем, пустое ли это значение, и если это так, мы используем метод jQuery show (), чтобы показать метку с
id «name_error»:
Затем мы помещаем фокус формы обратно в поле ввода с идентификатором «name» и, наконец, возвращаем false:
Обязательно верните false в своем коде, иначе вся форма будет отправлена (что не является
целью этого урока)! Если возвращается false, это не позволяет пользователю продолжать
без заполнения необходимого поля(ей).
Вспомним ранее, мы установили переменную ‘name’ со значением поля ввода с id «name», например:
Мы можем снова использовать это значение «name», а также значения «email» и «phone» для создания нашей dataString:
Я прокомментировал предупреждение, которое иногда использую, чтобы быть уверенным, что я использую правильные значения, которые могут оказаться полезными в этом процессе. Если вы раскомментируете это предупреждение и протестируете свою форму, предполагая, что все дошло до сих пор, вы должны получить сообщение, подобное следующему:
Теперь мы добираемся до нашей главной функции ajax, звезды сегодняшнего шоу. Вот где все происходит, так что обратите сюда
свое пристальное внимание!
Есть более сложные вещи, которые вы можете сделать здесь, кроме отправки электронной почты и сообщения об успешном завершении. Например, вы можете отправить свои значения в базу данных, обработать их, а затем отобразить результаты обратно пользователю. Поэтому, если вы разместили опрос среди пользователей, вы можете обработать их голос, а затем вернуть результаты голосования, без необходимости обновления страницы.
Подведем итог тому, что произошло в нашем примере, чтобы убедиться, что мы все поняли. Мы взяли наши значения формы с помощью jQuery, а затем поместили их в строку следующим образом:
Затем мы использовали jQuery функцию ajax для обработки значений в dataString. После этого
процесс завершается успешно, мы выводим сообщение обратно пользователю и добавляем return false, чтобы наша страница не обновлялась:
Успешная часть скрипта была заполнена некоторым конкретным контентом, который может быть отображен обратно пользователю. Но что касается нашей функциональности ajax, это все, что нужно. Для получения дополнительных параметров и настроек обязательно ознакомьтесь с документацией jQuery по функции ajax. Примером здесь является одна из более простых реализаций, но даже в этом случае она очень эффективна, как вы можете видеть.
Давайте вкратце рассмотрим ту часть кода, которая отображает наше сообщение обратно пользователю, чтобы закончить этот учебник.
Во-первых, мы меняем все содержимое div_control_form (помните, я сказал, что нам понадобится этот div) со следующей строкой:
Затем добавим еще больше контента в div сообщения с помощью jQuery функции append(), и, прежде всего, мы добавим классный эффект, скрыв div с помощью jQuery функции hide(), а затем спрячем все это с помощью функции fadeIn():
Таким образом, пользователь получает следующие данные после отправки формы:
Поэтому, если у вас есть контактная форма на вашем веб-сайте, форма входа в систему или даже более продвинутые формы, которые обрабатывают значения через базу данных и возвращают результаты, вы можете сделать все это легко и эффективно, и, возможно, самое главное, вы повышаете качество работы с вашим сайтом, предоставляя интерактивность без необходимости ждать перезагрузки страницы.
Вывод
Единственное, что я сделал с runonload, на самом деле не имеет никакого отношения к обработке формы. Таким образом, вы можете полностью выполнить функцию ajax без каких-либо дополнительных плагинов. Я использовал runonload, чтобы сфокусировать поле ввода имени при загрузке страницы. Мой опыт заключался в том, что вызов runonload иногда может быть лучшей заменой для собственной функции готовности документа jQuery, и я обнаружил, что это действительно так. По какой-то причине функция focus() не будет работать при загрузке страницы с использованием функции готового документа jQuery, но она работает с runonload, и именно поэтому вы считаете ее частью этого примера. Поэтому, если вы знаете способ сделать это без использования runonload, я был бы рад услышать от вас об этом.
Как отправить форму в php, чтобы она не отправлялась повторно, после обновления страницы
Доброе время суток, уважаемые HABRовчане!
Сегодня тема пойдет об отправке формы на html-страничке, чтобы, при повторном обновлении, она не отправлялась заново в БД.
Не знаю, было ли такое где-то на просторах интернета, но, когда я попыталась найти, а мне было жутко это нужно, причем очень срочно, то я столкнулась с кучей проблем.
Во первых, почти все источники предлагают делать это таким образом:
Но, проблема в нем следующая, если вы, уже где то в начале страницы отправили заголовки, то на вас будут ругаться, мол, «заголовки отправлены, зачем ты хочешь, чтобы я это сделал еще один раз, угомонись!»
Но данные способы были неудобны, возможно, вам покажется, что это наоборот, самый лучший вариант и зачем изобретать велосипед?
Меня же, все способы, встретившиеся на просторах интернета, не устроили. И я решила сделать то, что будет удобно мне и не будет занимать большое количество переменных/времени/ресурсов.
Приступим.
Для начала, создадим простенькую форму.
Затем добавим в форму метод отправки, действие и имя: Действие будет происходить на другой странице, для удобства и дальнейшей функциональности.
Получается вот такой код:
Затем, мы создаем файлик redir.php и работаем над ним:
Все. Как видите это просто, быстро и удобно!
Отправка формы без перезагрузки страницы
Дата публикации: 2009-11-04
В этом уроке Вам будет показано, как сделать контактную форму, через которую Вы будите посылать электронное сообщение без обновления страницы с помощью jQuery. Давайте начнем.
Обязательно советую Вам скачать исходный код всего урока. Там будут и php скрипт, который реализует процесс доставки сообщения.
Одним словом, урок очень полезный!
В сегодняшнем примере мы имеем простую форму с возможностью ввода имени, адреса электронной почты и номера телефона. Как я уже и говорил, форма содержит и php скрипт и родной jQuery, в том смысле, что не нужно устанавливать и скачивать никаких дополнительных плагинов.
Шаг 1 – создаем непосредственно саму HTML форму
Давайте взглянем на наш html код. Мы начинаем с нашей основной html формы:
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Вы могли заметить, что я включил div id contact_ form, который охватывает весь код формы. Вы также могли заметить, что я оставил параметры action и method пустыми. Это я сделал специально, т.к. об этом позже позаботиться jQuery.
Еще одна важная вещь. Не забудьте включить значение id в каждое поле ввода (строка начинается с тега input). Эти id значения jQuery сценарий будет искать для обработки формы.
Я добавил некоторый css стили и фоновое изображение в Photoshop для получения данной формы:
Шаг 2 – начинаем добавлять jQuery
Следующим шагом мы начнем добавлять по частям jQuery код. Я буду считать, что В уже скачали jQuery.
Далее открываем новый файл JavaScript, ссылаемся на него в xtml документе также, как и на любой другой файл JavaScript. Добавляем следующий код:
Первая функция (function()) он начинает загружать события, как только html документ готов. Если Вы уже делали какие-либо работы с jQuery, то функция такая же, как и document.ready функция. По коду можно понять, что мы имеем функцию клика по кнопке, с именем класса «button». Таким образом мы тут достигли такого же самого эффекта, как и если бы мы в поле input нашей формы добавили функцию onClick кнопки «отправить».
Шаг 3 – написание формы проверки введенных данных
Проверка первого поля: если поле для имени было оставлено пользователем пустым, мы показываем сообщение, записанное в теге label с идентификатором name_error. Затем мы помещаем фокус на поле ввода имени, на случай если пользователь запутался с тем, что ему делать дальше. (Я думаю, не стоит сильно напрягаться, когда речь идет о форме пользователей)
Объясняю, как данная вещь работает. В переменную “name” мы записываем значение, которое было введено в поле с идентификатором “name” – это всего одна строчка на jQuary.