Отправка формы jquery: 80% Работа с формами · jQuery для начинающих

Использование Объектов FormData — Интерфейсы веб API

Объект FormData позволяет создать набор пар ключ/значение и передать их, используя XMLHttpRequest. Объект FormData предназначен для передачи данных форм, однако может быть использован для передачи пар ключ/значение независимо от форм. Данные передаются в том же формате, как и данные, передаваемые методом submit() формы, с установленной кодировкой enctype="multipart/form-data".

Вы можете самостоятельно создать пустой объект FormData, наполнив его затем данными, используя его метод {{domxref("FormData.append","append()")}}:

var formData = new FormData();

formData.append("username", "Groucho");
formData.append("accountnum", 123456); 


formData.append("userfile", fileInputElement.files[0]);


var content = '<a><b>hey!</b></a>'; 
var blob = new Blob([content], { type: "text/xml"});

formData. append("webmasterfile", blob);

var request = new XMLHttpRequest();
request.open("POST", "http://foo.com/submitform.php");
request.send(formData);

Примечание:  Поля «userfile» и «webmasterfile» оба содержат файлы. Число, переданное полю «accountnum» немедленно преобразуется в строку. Преобразование осуществляется методом FormData.append() (Значение поля может быть Blob, File, или строкой: если значение не является ни Blob, ни File, то оно автоматически преобразуется в строку).

Данный пример показывает создание экземпляра FormData, содержащего поля «username», «accountnum», «userfile» и «webmasterfile». Экземпляр FormData затем отправляется при помощи метода send() объекта XMLHttpRequest. Поле «webmasterfile» является экземпляром класса Blob. Объект класса Blob является файло-подобным объектом, содержащим «сырые» данные. Определение данных как Blob не является обязательным в нативном javascript. Интерфейс File базируется на Blob, наследуя его функциональность и расширяя его для поддержки файлов в ОС пользователя. Для создания объектов класса Blob используйте Blob() constructor.

Для создания объекта FormDatа, содержащего данные существующей формы (<form>) передайте форму в качестве аргумента при создании объекта FormData:

Примечание: FormData будет использовать только те поля ввода, которые используют атрибут name.

var formData = new FormData(someFormElement);

Например:

var formElement = document.querySelector("form");
var request = new XMLHttpRequest();
request.open("POST", "submitform.php");
request.send(new FormData(formElement));

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

var formElement = document. querySelector("form");
var formData = new FormData(formElement);
var request = new XMLHttpRequest();
request.open("POST", "submitform.php");
formData.append("serialnumber", serialNumber++);
request.send(formData);

Такой приём позволяет включать в форму дополнительную информацию, которая, например, не нуждается в демонстрации пользователю.

Вы так же можете отправлять файлы при помощи FormData. Просто включите <input> с типом file в форму.

<form enctype="multipart/form-data" method="post" name="fileinfo">
  <label>Your email address:</label>
  <input type="email" autocomplete="on" autofocus name="userid" placeholder="email" required size="32" maxlength="64" /><br />
  <label>Custom file label:</label>
  <input type="text" name="filelabel" size="12" maxlength="32" /><br />
  <label>File to stash:</label>
  <input type="file" name="file" required />
  <input type="submit" value="Stash the file!" />
</form>
<div></div>

Затем вы сможете отправить выбранный файл следующим образом:

var form = document. forms.namedItem("fileinfo");
form.addEventListener('submit', function(ev) {

  var oOutput = document.querySelector("div"),
      oData = new FormData(form);

  oData.append("CustomField", "This is some extra data");

  var oReq = new XMLHttpRequest();
  oReq.open("POST", "stash.php", true);
  oReq.onload = function(oEvent) {
    if (oReq.status == 200) {
      oOutput.innerHTML = "Uploaded!";
    } else {
      oOutput.innerHTML = "Error " + oReq.status + " occurred when trying to upload your file.<br \/>";
    }
  };

  oReq.send(oData);
  ev.preventDefault();
}, false);

Примечание: Если для формы указан атрибут method, то будет использован именно этот метод для отправки данных на сервер, а не метод, указанный в вызове open()

Вы так же можете добавить File или Blob непосредственно к объекту FormData:

data.append("myfile", myBlob, "filename. txt");

Метод append() принимает 3й опциональный параметр — название файла, которое добавляется в заголовок Content-Disposition при отправке на сервер. Если название файла не указано (или данный параметр не поддерживается) используется имя «blob».

Вы так же можете использовать FormData с jQuery:

var fd = new FormData(document.querySelector("form"));
fd.append("CustomField", "This is some extra data");
$.ajax({
  url: "stash.php",
  type: "POST",
  data: fd,
  processData: false,  
  contentType: false   
});

Как отправить форму без перезагрузки страницы (AJAX)

Что такое AJAX

Ajax — это технология, позволяющая выполнять обработку действий пользователя без перезагрузки страницы. Иными словами, для примера, когда вы слушаете музыку в социальных сетях, вы можете переходить по страницам, но при этом музыка у вас не прерывается.

Технология Ajax стала неотъемлемой частью WEB 2. 0 и в настоящий момент, успешные веб-сайты стремятся создать удобство для пользователей. Более того, технология Ajax позволяет увеличить скорость работы вашего сайта, за счет того, что пользователю для обновления некоторых элементов вашего сайта не нужно перезагружать всю страницу.

Реализация отправки формы без перезагрузки страницы

Наш демонстрационный проект будет состоять из трех файлов:

index.php — это главная страница с формой
ajax.js — это javascript файл с логикой ajax обработки формы
action_ajax_form.php — это серверная часть нашего проекта, обрабатывает данные полученные из формы и возвращает результат в формате JSON

Создадим первый файл нашего AJAX проекта под названием index.php с таким содержимым:

Мы подключили библиотеку Jquery и наш javascript файл отвечающий за взаимодействие с кнопкой отправки форми, с файлом action_ajax_form. php. 

Обратите внимание, что метод отправки формы у нас POST, задан и action=»». Также после формы мы добавили div c id=result_form. Именно в этот div мы будем выводить результат обработки формы.

Также нам нужно создать второй файл — ajax.js

В файле ajax.js есть два метода: $(«#btn»).click и sendAjaxForm. Первый метод — это слушатель событий кнопки. То есть, когда мы нажимаем на кнопку Отправить, слушатель срабатывает и вызывает второй метод sendAjaxForm. 

В метод sendAjaxForm(result_form, ajax_form, url) передаются поля: result_form — это div в который будут рендерится данные, ajax_form — это id формы отправки сообщения и url — это местоположение файла action_ajax_form.php который отвечает за серверную часть (обработка формы).

И третий файл под названием action_ajax_form.php

action_ajax_form.php — обработчик формы на стороне сервера. Для примера, мы делаем проверку: Если существуют переменные в POST запросе name и phonenumber, тогда мы формируем массив $result для JSON ответа от сервера. Затем, массив $result мы переводим в JSON объект, чтобы клиент ajax.js смог корректно получить данные в формате JSON. 

Выводы

Как вы видите, реализовать AJAX отправку данных формы, без перезагрузки страницы очень просто. Скачать исходный код AJAX формы, вы можете по ссылке. Файлы загрузите на ваш локальный сервер или хостинг, распакуйте и сложите все файлы в один каталог сервера.

Если есть вопросы, относительно этой статьи, оставляйте свои комментарии и мы попробуем помочь разобраться, если что-то не заработает.

Читайте также

Все материалы с сайта wh-db.com и ru.wh-db.com защищены авторским правом. Копирование, публикация, продажа и распространение материала строго запрещены.

jQuery | события формы

Функция focus() выполняется, когда фокус на элементе.

Функция blur() выполняется, когда фокус ушел с элемента.

  index.html  

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <style>
  * {
   margin: 0;
   padding: 0;
  }
 
  input {
   margin: 20px;
  }
 </style>
</head>
<body>
 <div>
  <input type="text" />
  <br />
  <input type="text" />
  <br />
  <input type="text" />
 </div>
 
 <script>
  $(document).ready(function () {
   /*фокус на элементе*/
   $('input').focus(function () {
    $(this).css({'border': '2px solid #F00'});
   });
 
   /*фокус ушел с элемента*/
   $('input').blur(function () {
    $(this).css({ 'border': '1px solid #808080' });
   });
  });
 </script>
</body>
</html>
 

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax. googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <style>
  * {
   margin: 0;
   padding: 0;
  }
 
  input {
   margin: 20px;
  }
 </style>
</head>
<body>
 <div>
  <input type="text" />
  <br />
  <input type="text" />
  <br />
  <input type="text" />
 </div>
 
 <script>
  $(document).ready(function () {
   /*фокус на элементе*/
   $('input').focus(function () {
    $(this).css({'border': '2px solid #F00'});
   });
 
   /*фокус ушел с элемента*/
   $('input').blur(function () {
    $(this).css({ 'border': '1px solid #808080' });
   });
  });
 </script>
</body>
</html>
 

    Функция выделяет весь текст в элементе input с типом text или area.
   
  index.html  
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax. googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <style>
  * {
   margin: 0;
   padding: 0;
  }
 
  input, button {
   margin: 20px;
  }
 
  button {
   cursor: pointer;
  }
 </style>
</head>
<body>
 <div>
  <button>Select all text</button>
  <br />
  <input type="text" />
 </div>
 
 <script>
  $(document).ready(function () {
   $('button').click(function () {
    $('input').select();
   });
  });
 </script>
</body>
</html>
 
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <style>
  * {
   margin: 0;
   padding: 0;
  }
 
  input, button {
   margin: 20px;
  }
 
  button {
   cursor: pointer;
  }
 </style>
</head>
<body>
 <div>
  <button>Select all text</button>
  <br />
  <input type="text" />
 </div>
 
 <script>
  $(document). ready(function () {
   $('button').click(function () {
    $('input').select();
   });
  });
 </script>
</body>
</html>
 

    Функция устанавливает обработчик события при изменении элемента формы СРАЗУ.
   
  index.html  
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <style>
  * {
   margin: 0;
   padding: 0;
  }
 
  #main {
   margin: 20px;
  }
 </style>
</head>
<body>
 <div>
  <input type="text" />
  &nbsp;&nbsp;&nbsp;
  <span></span>
 </div>
 <script>
  $(document).ready(function () {
   $('input').on('input', function () {
    $('span').text($(this).val());
   });
  });
 </script>
</body>
</html>
 
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax. googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <style>
  * {
   margin: 0;
   padding: 0;
  }
 
  #main {
   margin: 20px;
  }
 </style>
</head>
<body>
 <div>
  <input type="text" />
  &nbsp;&nbsp;&nbsp;
  <span></span>
 </div>
 <script>
  $(document).ready(function () {
   $('input').on('input', function () {
    $('span').text($(this).val());
   });
  });
 </script>
</body>
</html>
 

    Функция устанавливает обработчик события при отправке формы на сервер.
   
  index.html  
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <style>
  * {
   margin: 0;
   padding: 0;
  }
 
  form {
   margin: 20px;
   border: 2px solid #00F;
   padding: 20px;
  }
 
  . a {
   color: #F00;
   display: none;
  }
 
  #submit1 {
   width: 65px;
   cursor: pointer;
  }
 
  #message {
   height: 100px;
   width: 300px;
   position: absolute;
   top: 50%;
   left: 50%;
   margin-top: -50px;
   margin-left: -150px;
   text-align: center;
   line-height: 100px;
   font-size: 26px;
  }
 </style>
</head>
<body>
 <form method="post">
  <label>Username</label>
  &nbsp;&nbsp;
  <input type="text" autofocus="autofocus" />
  &nbsp;&nbsp;
  <span>Поле не заполнено</span>
  <br />
  <br />
  <label>Password&nbsp;</label>
  &nbsp;&nbsp;
  <input type="password" />
  &nbsp;&nbsp;
  <span>Поле не заполнено</span>
  <br />
  <br />
  <input type="submit" value="OK" />
 </form>
 <div hidden="hidden">Ошибка!</div>
 <script>
  $(document).ready(function () {
   /*поле Username теряет фокус*/
   $('#username'). blur(function () {
    if($('#username').val() == '') {
     $('#error1').css({ 'display': 'inline-block' });
     $('#message').css({ 'border': '1px solid #F00' }).show();
     return false;
    }
    else {
     $('#error1').hide();
     $('#message').hide();
    }
   });
 
   /*поле Password теряет фокус*/
   $('#password').blur(function () {
    if($('#password').val() == '') {
     $('#error2').css({ 'display': 'inline-block' });
     $('#message').css({ 'border': '1px solid #F00' }).show();
     return false;
    }
    else {
     $('#error2').hide();
     $('#message').hide();
    }
   });
 
   /*кнопка OK была нажата*/
   $('form').submit(function () {
    if($('#username').val() == '') {
     $('#error1').css({ 'display': 'inline-block' });
     $('#message').css({ 'border': '1px solid #F00' }).show();
     return false;
    }
    else if($('#password').val() == '') {
     $('#error2').css({ 'display': 'inline-block' });
     $('#message').css({ 'border': '1px solid #F00' }).show();
     return false;
    }
    else {
     alert("Форма успешно отправлена!");
    }
   });
  });
 </script>
</body>
</html>
 
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax. googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <style>
  * {
   margin: 0;
   padding: 0;
  }
 
  form {
   margin: 20px;
   border: 2px solid #00F;
   padding: 20px;
  }
 
  .a {
   color: #F00;
   display: none;
  }
 
  #submit1 {
   width: 65px;
   cursor: pointer;
  }
 
  #message {
   height: 100px;
   width: 300px;
   position: absolute;
   top: 50%;
   left: 50%;
   margin-top: -50px;
   margin-left: -150px;
   text-align: center;
   line-height: 100px;
   font-size: 26px;
  }
 </style>
</head>
<body>
 <form method="post">
  <label>Username</label>
  &nbsp;&nbsp;
  <input type="text" autofocus="autofocus" />
  &nbsp;&nbsp;
  <span>Поле не заполнено</span>
  <br />
  <br />
  <label>Password&nbsp;</label>
  &nbsp;&nbsp;
  <input type="password" />
  &nbsp;&nbsp;
  <span>Поле не заполнено</span>
  <br />
  <br />
  <input type="submit" value="OK" />
 </form>
 <div hidden="hidden">Ошибка!</div>
 <script>
  $(document). ready(function () {
   /*поле Username теряет фокус*/
   $('#username').blur(function () {
    if($('#username').val() == '') {
     $('#error1').css({ 'display': 'inline-block' });
     $('#message').css({ 'border': '1px solid #F00' }).show();
     return false;
    }
    else {
     $('#error1').hide();
     $('#message').hide();
    }
   });
 
   /*поле Password теряет фокус*/
   $('#password').blur(function () {
    if($('#password').val() == '') {
     $('#error2').css({ 'display': 'inline-block' });
     $('#message').css({ 'border': '1px solid #F00' }).show();
     return false;
    }
    else {
     $('#error2').hide();
     $('#message').hide();
    }
   });
 
   /*кнопка OK была нажата*/
   $('form').submit(function () {
    if($('#username').val() == '') {
     $('#error1').css({ 'display': 'inline-block' });
     $('#message').css({ 'border': '1px solid #F00' }).show();
     return false;
    }
    else if($('#password').val() == '') {
     $('#error2').css({ 'display': 'inline-block' });
     $('#message'). css({ 'border': '1px solid #F00' }).show();
     return false;
    }
    else {
     alert("Форма успешно отправлена!");
    }
   });
  });
 </script>
</body>
</html>
 
Урок 26. Создание AJAX формы отправки сообщений MODX
Для создания AJAX формы нам понадобится:


Алгоритм работы:



пользователь заполняет поля и нажимает «Отправить»


форма обращается по адресу к ресурсу, где лежит сниппет sendMail


этот сниппет принимает Ajax запрос и отправляет письмо на адрес указанный в системной настройке emailsender


Создание формы отправки сообщения


Напишем код формы с необходимыми полями (можно создать отдельный чанк, если собираетесь вызывать форму на нескольких страницах):


В моём случае эти поля:



Имя


Email


Телефон


Сообщение


Напротив полей, обязательных для заполнения, выставим атрибут required=»required», чтобы форма не отправлялась, пока не будут заполнены данные поля. 


Создание скрипта обработки формы


Создадим javascript, который будет обрабатывать форму и отправлять AJAX запрос для отправки сообщения на почту:


Этот код вставляем в head сайта после вызова библиотеки jQuery. Код закомментирован, дополнительно объясню, что 117 — это ИД ресурса, где содержиться наш обработчик AJAX вызова. 



Создание обработчика AJAX запроса


Итак, давайте создадим сниппет, который будет обратывать AJAX вызов, назовём его sendMail. Код сниппета:


Сделаем вызов сниппета [[sendMail]] поместим этот вызов в поле «Содержимое» новосозданного ресурса, далее заменим в javascript коде 117 на ИД нашего ресурса. После этого меняем шаблон созданного ресурса на пустой _blank, сохраняем и наш обработчик готов.





    Внимание! Данный метод отправки сообщения можно использовать с дополнением FormIt. Также в следствие непонятных для меня причин возникали ошибки при AJAX ответе на работу сниппета, при этом сообщение успешно доставлялось на почту админа. 









Полный код шаблона, который используется в демо, можно просмотреть по этой ссылке





Источники, которые помогли мне в создании урока и дополнительные материалы для изучения:





	Форма в Демо не отправляет сообщения А лишь демонстрирует работу скриптов.



 Демо AJAX формы















Проект: Бесконечная прокрутка и отправка форм при помощи AJAX || CodenameCRUD
Мы еще не связывали фронтенд с бэкендом, и в этом проекте вы создадите форму, отправляющую данные на существующий в сети Интернет API, а именно Open Movie Database (OMDB))(созданный после IMDB). Для начала прочтите документацию на OMDB, чтобы получить представление о том, как отправить на сайт данные.
Ваше задание

Примечание: Отправка данных на OMDB недоступна, мы пытаемся найти решение. Поэтому пока переходите на Часть II, где рассматривается получение существующих данных.

Создайте форму, отправляющую новый фильм в базу данных сайта.  Вы должны проверить, что название и прочие необходимые поля не пустые.

Создайте репозиторий на Github для проекта. Если возникли сложности, посмотрите инструкции на этой странице.
Создайте пустой документ HTML.
Подумайте о том, как создать форму, и как она будет отправлять данные на API OMDB. Какие объекты и функции будут необходимы? Лучше сейчас подумать несколько лишних минут, чем потом переделывать программу, теряя часы впустую. Нарисуйте схему на бумаге перед тем, как вообще садиться за компьютер.
Создайте элементы формы, их стилизация не обязательна.
Создайте логику валидации.
Проверьте, что форма действительно отправляет фильм в базу.
Создайте статус «загрузка…», который отображается во время выполнения AJAX запроса и исчезает по его окончании.

Часть II: Бесконечная прокрутка

Теперь запросим несколько фильмов и отобразим их. Используя jQuery, удалите форму с вашей страницы и создайте другой запрос AJAX, который получает 10 фильмов из базы и отображает их на странице. 
Создайте бесконечный скролл, который загружает еще 10 фильмов и добавляет их к списку, чтобы вы их увидели при прокрутке страницы вниз. Статус  «загрузка…» должен появляться, пока ваша программа ждет очередные 10 фильмов из базы.
Потестируйте работу программы. Что нарушает работу прокрутки?
Отправьте код на Github.

Решения студентов
Дополнительные ресурсы
Этот раздел содержит полезные ссылки на дополнительные материалы. Это не обязательно, так что расценивайте их как нечто полезное, если вы хотите поглубже погрузиться в тему
Поделиться уроком:
Несколько форм на одной странице с отправкой без перезагрузки
Вы можете скачать готовые файлы, в которые дополнительно включена проверка введенных данных в форму (валидация), поделившись статьей в Twitter. 

Представьте, что у вас на странице сайта есть несколько форм связи с различным предназначением. Лучший способ объяснить эту потребность, это создание сайта, в котором необходимо разместить форму заказа звонка, форму запроса цены, форму запроса каталога и еще какие-либо необходимые вам формы. 
За пересылку письма с введенными в форму данными отвечает PHP обработчик. Для передачи данных в обработчик используется кнопка с типом submit. В случае использования нескольких форм связи с одним php обработчиком Вы должны передать в него данные именно той формы, в которой была нажата кнопка «Отправить». Это можно сделать через if/else, с учетом разных имен атрибутов, наплодив одинаковых кусков кода, можно создать кучу обработчиков с разными именами, но одинаковым кодом, а можно использовать скрипт jQuery с помощью которого данные в обработчик будут отправляться из той формы где было произведено нажатие на кнопку «Отправить». 
Далее мы покажем, как реализовать на одной странице несколько форм связи, отправляющих данные без перезагрузки страницы в один обработчик.
Несколько форм связи с одним обработчиком
К примеру, возьмем три формы.
Присвойте каждой форме свой уникальный id.  У нас это form1, form2 и form3. Кроме того, для стилизации формы примените классы css, для отображения подсказки включите атрибуты placeholder, а для формирования темы письма добавьте скрытый input.
Таким образом, теперь формы имеют различные идентификаторы id и мы можем написать скрипт, который будет отправлять данные в обработчик ориентируясь на id формы.
Отправка формы без перезагрузки страницы
Обычно при отправке данных из формы происходит перенаправление на страницу подтверждения. В случае использования нескольких форм на странице, это будет мешать и отвлекать клиента от вашего предложения и заполнения какого-либо другого запроса. 
Используя AJAX, отправку формы без перезагрузки страницы сделать очень легко. 
                    Форма связи в процессе заполнения
После нажатия кнопки «Отправить» вместо полей ввода формы у вас появится сообщение об отправке. 
Форма связи после нажатия кнопки «Отправить»
update: При необходимости восстановления формы после отправки данных, вы можете использовать следующее решение (вставьте выделенный код в указанное место и оберните все input в форме в div с id, например inputs):
Метод .load() загружает данные и вставляет в указанный элемент.
«#parent» — id формы, в которую необходимо вставить удаленные данные.



В приведенном примере скрипта с отправкой данных форм без перезагрузки страницы, оберните в div все input. Назначьте ему id, например inputs. Этот div с вложенными полями input удаляется скриптом, на его месте появляется сообщение об отправке. Получается, что в коде остается тег form с id, этот id необходимо указать в #parent, это станет контейнером для загрузки скриптом данных формы (удаленные input). 
«http://site.ru» — адрес вашей страницы с формой, откуда скрипт загрузит удаленные input. Например, если ваша форма будет находиться по адресу http://site.ru/contacts.html, вставляете этот адрес.
«#child» — id блока, который содержит input. В данном случае div #inputs.

3000 — время в мс через которое восстановится код формы.
Демо
PHP обработчик
Большинство форм для передачи данных используют метод POST, это позволяет «спрятать» данные формы и не загромождать URL в адресной строке.
Данный обработчик содержит проверку метода передачи данных.
Создавая формы на страницах своего сайта, не забывайте о внедрении проверки введенных данных и методах защиты от спама.
Возникли вопросы? Давайте обсудим их в комментариях. 
Демо 
 GitHub — jquery-form / form: плагин jQuery Form 
 Обзор 
 Плагин jQuery Form позволяет легко и ненавязчиво обновлять HTML-формы для использования AJAX. Основные методы, ajaxForm и ajaxSubmit, собирают информацию из элемента формы, чтобы определить, как управлять процессом отправки. Оба эти метода поддерживают множество опций, которые позволяют вам полностью контролировать способ отправки данных. 
 Никакой специальной разметки не требуется, только нормальная форма. Нет ничего проще, чем отправить форму с помощью AJAX! 
 Сообщество 
 Хотите внести свой вклад в jQuery Form? Потрясающие! См. ДОПОЛНИТЕЛЬНАЯ ИНФОРМАЦИЯ.
 Кодекс поведения 
 Обратите внимание, что этот проект выпущен с Кодексом поведения для участников, чтобы гарантировать, что этот проект является гостеприимным местом для  всех, кому  может внести свой вклад. Участвуя в этом проекте, вы соглашаетесь соблюдать его условия. 
 Требуются запросы на извлечение 
 Улучшения, необходимые для полной совместимости с jQuery 3 
 jQuery 3 удаляет множество функций, которые уже давно устарели.  Некоторые из них все еще используются jQuery Form.
 Запросы на извлечение и помощь в обновлении формы jQuery для совместимости с jQuery 3 приветствуются. 
 Дополнительную информацию см. В выпуске № 544. 
 Совместимость 

 Требуется jQuery 1.7.2 или новее. 
 Совместим с jQuery 2. 
 Частично совместим с jQuery 3. 
  Не  совместим с jQuery 3 Slim. (выпуск # 544) 

 Загрузить 
 CDN 
  

 API 
 jqXHR 
 Объект jqXHR хранится в элементе  data  -cache с ключом  jqxhr  после каждого  ajaxSubmit 

вызов. Доступ к нему можно получить так: 
 var form = $ ('# myForm'). AjaxSubmit ({/ * параметры * /});
var xhr = form.data ('jqxhr');

xhr.done (function () {
...
}); 
 ajaxForm (опции) 
 Подготавливает форму для отправки через AJAX, добавляя все необходимые прослушиватели событий. Это , а не  отправить форму. Используйте  ajaxForm  в функции  ready  вашего документа, чтобы подготовить существующие формы для отправки AJAX, или с опцией  делегирования  для обработки форм, еще не добавленных в DOM.
 Используйте ajaxForm, если хотите, чтобы плагин управлял всей привязкой событий за вас. 
 // готовим все формы для отправки через ajax
$ ('форма'). ajaxForm ({
    цель: '#myResultsDiv'
}); 
 ajaxSubmit (параметры) 
 Немедленно отправляет форму через AJAX. В наиболее распространенном варианте использования это вызывается в ответ на то, что пользователь нажимает кнопку отправки в форме.

Используйте ajaxSubmit, если хотите привязать к форме собственный обработчик отправки. 
 // привязать обработчик отправки к форме
$ ('форма').on ('отправить', функция (е) {
    e.preventDefault (); // запретить нативную отправку
    $ (this) .ajaxSubmit ({
        цель: '#myResultsDiv'
    })
}); 

 Опции 
  Примечание:  Можно использовать все стандартные параметры $ .ajax. 
 перед Серийно 
 Функция обратного вызова вызывается перед сериализацией формы. Предоставляет возможность манипулировать формой до получения ее значений. Возвращение  false  из обратного вызова предотвратит отправку формы.Обратный вызов вызывается с двумя аргументами: обернутым объектом формы jQuery и объектом параметров. 
 beforeSerialize: function ($ form, options) {
    // возвращаем false, чтобы отменить отправку
} 
 передОтправить 
 Функция обратного вызова вызывается перед отправкой формы. Возвращение  false  из обратного вызова предотвратит отправку формы.  Обратный вызов вызывается с тремя аргументами: данные формы в формате массива, обернутый объект формы jQuery и объект параметров.
 beforeSubmit: function (arr, $ form, options) {
    // массив данных формы - это массив объектов со свойствами имени и значения
    // [{имя: 'имя пользователя', значение: 'jresig'}, {имя: 'пароль', значение: 'секрет'}]
    // возвращаем false, чтобы отменить отправку
} 
 beforeFormUnbind 
 Функция обратного вызова вызывается перед отменой и повторной привязкой событий формы. Предоставляет возможность манипулировать формой перед повторным подключением событий. Обратный вызов вызывается с двумя аргументами: обернутым объектом формы jQuery и объектом параметров.
 beforeFormUnbind: function ($ form, options) {
    // ваш код обратного вызова
} 
 фильтрация 
 Функция обратного вызова вызывается перед обработкой полей. Это дает возможность фильтровать элементы. 
 filtering: function (el, index) {
    if (! $ (el) . hasClass ('игнорировать')) {
        return el;
    }
} 
 прозрачный Форма 
 Логический флаг, указывающий, следует ли очищать форму в случае успешной отправки 
 данные 
 Объект, содержащий дополнительные данные, которые следует отправить вместе с формой.
  данные: {ключ1: 'значение1', ключ2: 'значение2'}
  
 dataType 
 Ожидаемый тип данных ответа. Одно из значений: null, xml, script или json. Параметр dataType позволяет указать, как должен обрабатываться ответ сервера. Это напрямую соответствует методу jQuery dataType. Поддерживаются следующие значения: 

 'xml': ответ сервера обрабатывается как XML, и методу обратного вызова 'success', если он указан, будет передано значение responseXML 
 'json': ответ сервера будет оценен и передан в обратный вызов 'success', если он указан 
 'сценарий': ответ сервера оценивается в глобальном контексте 

 Делегация 
 true, чтобы включить поддержку делегирования событий

  требуется jQuery v1. 7+  
 // готовим все существующие и будущие формы для отправки через ajax
$ ('форма'). ajaxForm ({
    делегирование: правда
}); 
 ошибка 
  Устарело.  
 Функция обратного вызова, вызываемая при ошибке. 
 forceSync 
 Применимо только при явном использовании опции iframe или при загрузке файлов в браузерах, не поддерживающих XHR2.

Установите значение  true , чтобы убрать небольшую задержку перед отправкой формы при загрузке файлов. Задержка используется, чтобы позволить браузеру отображать обновления DOM перед отправкой собственной формы.Это повышает удобство использования при отображении уведомлений для пользователя, таких как «Пожалуйста, подождите ...» 
 iframe 
 Логический флаг, указывающий, должна ли форма всегда   нацеливаться на ответ сервера на iframe вместо использования XHR, когда это возможно. 
 iframeSrc 
 Строковое значение, которое следует использовать для атрибута src iframe при использовании iframe.  
 iframeTarget 
 Определяет элемент iframe, который будет использоваться в качестве цели ответа для загрузки файлов.По умолчанию плагин создает временный элемент iframe для захвата ответа при загрузке файлов. Эта опция позволяет вам использовать существующий iframe, если хотите. При использовании этой опции плагин не будет пытаться обработать ответ от сервера. 
 метод 
 Метод HTTP, используемый для запроса (например, «POST», «GET», «PUT»). 
 replaceTarget 
 Опционально используется вместе с целевой опцией. Установите значение true, если цель должна быть заменена, или false, если необходимо заменить только целевое содержимое.
 сбросить форму 
 Логический флаг, указывающий, следует ли сбрасывать форму в случае успешной отправки 
 семантический 
 Логический флаг, указывающий, должны ли данные передаваться в строгом семантическом порядке (медленнее). Обратите внимание, что сериализация нормальной формы выполняется в семантическом порядке, за исключением элементов ввода  type = "image" .  Вы должны устанавливать для семантического параметра значение true только в том случае, если ваш сервер имеет строгие семантические требования и ваша форма содержит элемент ввода  type = "image" .
 успех 
  Устарело.  
 Функция обратного вызова, вызываемая после отправки формы. Если предоставляется функция обратного вызова «успеха», она вызывается после того, как ответ был возвращен с сервера. Ему передаются следующие стандартные аргументы jQuery: 

  данные , отформатированные в соответствии с параметром dataType или функцией обратного вызова dataFilter, если указано 
  textStatus , строка 
  jqXHR , объект 
  $ form  jQuery объект, содержащий элемент формы 

 цель 
 Обозначает элемент (ы) на странице, который должен быть обновлен ответом сервера.Это значение может быть указано как строка выбора jQuery, объект jQuery или элемент DOM.  
 тип 
 Метод HTTP, используемый для запроса (например, «POST», «GET», «PUT»). 
 Псевдоним для метода   option. Переопределено методом   значение, если присутствуют оба. 
 uploadProgress 
 Функция обратного вызова, вызываемая с информацией о ходе загрузки (если поддерживается браузером). Обратному вызову передаются следующие аргументы: 

 событие; событие браузера 
 позиция (целое число) 
 всего (целое) 
 percentComplete (целое число) 

 URL 
 URL, на который будут отправлены данные формы.

 Служебные методы 
 Форма 

 
 Сериализует форму в строку запроса. Этот метод вернет строку в формате:  name1 = value1 & name2 = value2  
 var queryString = $ ('# myFormId'). FormSerialize (); 
 fieldSerialize 
 Сериализует элементы поля в строку запроса. Это удобно, когда вам нужно сериализовать только часть формы.  Этот метод вернет строку в формате:  name1 = value1 & name2 = value2  
 var queryString = $ ('# myFormId.specialFields '). fieldSerialize (); 
 fieldValue 
 Возвращает значение (я) элемента (ов) в согласованном наборе в массиве. Этот метод всегда возвращает массив. Если действительное значение не может быть определено, массив будет пустым, в противном случае он будет содержать одно или несколько значений. 
 сбросить форму 
 Сбрасывает форму в исходное состояние, вызывая собственный метод DOM элемента формы. 
 прозрачный Форма 
 Очищает элементы формы. Этот метод очищает все поля ввода текста, ввода пароля и элементы textarea, очищает выделение в любых элементах select и снимает отметки со всех вводов радио и флажков.Он очищает значения скрытых полей , а не . 
 clearFields 
 Удаляет выбранные элементы поля. Это удобно, когда нужно очистить только часть формы. 

 Загрузка файла 
 Плагин формы поддерживает использование объектов XMLHttpRequest Level 2 и FormData в браузерах, которые поддерживают эти функции.  На сегодняшний день (март 2012 г.) это включает Chrome, Safari и Firefox. В этих браузерах (а также в будущих Opera и IE10) загрузка файлов будет происходить без проблем через объект XHR, и по мере загрузки будут доступны обновления хода выполнения.Для старых браузеров используется резервная технология, которая включает фреймы. Подробнее 

 Авторы 
 Этот проект перенесен с github.com/malsup/form, любезно предоставлен Майком Алсупом. 
 Подробнее см. УЧАСТНИКИ. 
 Лицензия 
 Этот проект имеет двойную лицензию LGPLv2.1 (или новее) или лицензию MIT: 

 Дополнительная документация и примеры для версии 3.51 - по адресу: http://malsup.com/jquery/form/ 
 jQuery Mobile Docs - образец формы для отправки 
 Отправка формы Ajax 
 В jQuery Mobile отправка форм автоматически обрабатывается с использованием Ajax, когда это возможно, создавая плавный переход между формой и страницей результатов.Чтобы гарантировать правильность отправки формы, обязательно укажите свойства  action  и  method  в элементе формы.  Если не указано иное, метод по умолчанию будет  get , а действие   по умолчанию будет использовать относительный путь текущей страницы (можно найти через  $ .mobile.path.get () ) 
Формы 
 также принимают атрибуты для переходов точно так же, как якоря, например  data-transition = "pop"  и  data-direction = "reverse" .Чтобы отправить форму без Ajax, вы можете либо отключить обработку формы Ajax глобально, либо для каждой формы с помощью атрибута  data-ajax = "false" . Атрибут  target  (как в  target = "_ blank" ) также соблюдается в формах и по умолчанию будет обрабатывать эту цель браузером при отправке формы. Обратите внимание, что в отличие от якорей, атрибут  rel  не разрешен в формах. 
 Пример формы Ajax по умолчанию 
 Демонстрирует автоматическую обработку Ajax отправки форм.Форма ниже настроена для отправки запроса  GET  на  forms-sample-response. php . При отправке jQuery Mobile гарантирует, что указанный URL-адрес может быть получен через Ajax, и обрабатывает его соответствующим образом. Имейте в виду, что так же, как и обычная отправка формы HTTP, jQuery Mobile позволяет добавлять страницы результатов  GET  в закладки путем обновления хэша URL-адреса, когда ответ возвращается успешно. Также, как и обычная отправка форм, запросы  POST  не содержат параметров запроса в хэше, поэтому их нельзя пометить закладками.

Способ доставки:

Стандарт: 7 дней Срочность: 3 дня Экспресс: на следующий день Ночевка 
Представлять на рассмотрение
 Пример формы без Ajax 
 Чтобы предотвратить автоматическую обработку отправки форм с помощью Ajax, добавьте к элементу формы атрибут  data-ajax = "false" . Вы также можете полностью отключить обработку форм Ajax с помощью параметра глобальной конфигурации  ajaxEnabled . 
 Форма ниже идентична приведенной выше, за исключением добавления атрибута  data-ajax = "false" . При нажатии кнопки отправки происходит полное обновление страницы. 

Способ доставки:

Стандарт: 7 дней Срочность: 3 дня Экспресс: на следующий день Ночевка 
Представлять на рассмотрение
 Самостоятельная отправка форм 
 Вы можете отправлять формы по тому же URL-адресу, который вы просматриваете в данный момент, установив атрибут  action  формы для этого URL-адреса, как показано на этой странице. 
 Когда запрос  POST  отправляется на страницу, которая уже находится в DOM (что обычно происходит при отправке формы по тому же URL-адресу, который в настоящее время просматривается), URL-адрес ответа будет идентичен этой существующей странице, как  POST  запросы не добавляют параметры строки запроса к URL-адресу.В этой ситуации jQuery Mobile заменит страницу, отправившую форму, на страницу, возвращенную в теле ответа. 
 Как настроить базовую проверку формы jQuery за две минуты 
  В этом руководстве показано, как настроить базовую проверку формы с помощью jQuery, что демонстрируется регистрационной формой.   
 Мы собираемся использовать плагин проверки jQuery для проверки нашей формы. Основной принцип этого плагина - указать правила проверки и сообщения об ошибках для HTML-элементов в JavaScript.
 Вот живая демонстрация того, что мы собираемся построить: 

  См. Статью Pen 
 jQuery Form Validation by SitePoint (@SitePoint) 
 на CodePen.
 
 Шаг 1. Включите jQuery 
 Во-первых, нам нужно включить библиотеку jQuery. Плагин проверки jQuery был протестирован до версии jQuery 3.1.1, но демонстрация в этой статье отлично работает с версией 3.4.1, которая является последней. 
 Вы можете использовать любой из следующих вариантов загрузки: 

 Загрузите его из jquery.com 
 Загрузите его с помощью Bower:  $ bower install jquery  
 Загрузите его с помощью npm или Yarn:  $ npm install jquery  или  yarn add jquery  
 Используйте CDN:  https://ajax. googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js  

 Создайте новый HTML-файл с именем  index.html  и включите jQuery перед закрывающим тегом   : 
 

  
 Если вы хотите использовать Bower или npm, но не знакомы с ними, возможно, вас заинтересуют эти две статьи: 
 Шаг 2. Включите подключаемый модуль проверки jQuery 
 Выбирайте между: 

 Загрузите его из репозитория github плагина 
 Загрузите его с помощью Bower:  $ bower install jquery-validation  
 Загрузите его с помощью npm:  npm i jquery-validation  
 NuGet:  Установочный пакет jQuery.Проверка  
 Используйте CDN:  https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js  

 Включить плагин после jQuery: 
 

  
 Шаг 3. Создайте HTML-форму 
 Для регистрации мы хотим собрать следующую информацию о пользователе: 

 имя 
 фамилия 
 электронная почта 
 пароль 

 Итак, давайте создадим нашу форму, содержащую следующие поля ввода: 
  

  
 Регистрация 
  


     Имя 
    

     Фамилия 
    

     Электронная почта 
    

     Пароль 
    

     Зарегистрироваться 

  

  
 При интеграции этого в реальное приложение не забудьте заполнить атрибут  action , чтобы убедиться, что форма отправлена ​​в правильное место назначения.  
 Шаг 4: Создайте стили для формы 
 Создайте новый файл  css / styles.css  и включите его в раздел    вашего HTML-файла: 
  
  
 Скопируйте следующие стили во вновь созданный файл: 
  @import url ("https://fonts.googleapis.com/css?family=Open+Sans");


* {
  маржа: 0;
  отступ: 0;
}

тело {
  семейство шрифтов: "Open Sans";
  размер шрифта: 14 пикселей;
}

.container {
  ширина: 500 пикселей;
  маржа: 25 пикселей авто;
}

форма {
  отступ: 20 пикселей;
  фон: # 2c3e50;
  цвет: #fff;
  -moz-border-radius: 4 пикселя;
  -webkit-border-radius: 4 пикселя;
  радиус границы: 4 пикселя;
}
метка формы,
ввод формы,
кнопка формы {
  граница: 0;
  нижнее поле: 3 пикселя;
  дисплей: блок;
  ширина: 100%;
}
form input {
  высота: 25 пикселей;
  высота строки: 25 пикселей;
  фон: #fff;
  цвет: # 000;
  отступ: 0 6 пикселей;
  -moz-box-sizing: рамка-рамка;
  -webkit-box-sizing: border-box;
  размер коробки: рамка-рамка;
}
кнопка формы {
  высота: 30 пикселей;
  высота строки: 30 пикселей;
  фон: # e67e22;
  цвет: #fff;
  маржа сверху: 10 пикселей;
  курсор: указатель;
}
форма . ошибка {
  цвет: # ff0000;
}
  
 Обратите внимание на стили для  .error , которые будут использоваться для сообщений об ошибках проверки. 
 Шаг 5. Создайте правила проверки 
 Наконец, нам нужно инициализировать плагин проверки формы. Создайте новый файл  js / form-validation.js  и укажите его после тега  
  

 Скопируйте следующий код во вновь созданный файл: 
 
$ (function () {
  
  
  $ ("форма [имя = 'регистрация']").проверить ({
    
    правила: {
      
      
      
      имя: "обязательно",
      фамилия: "обязательно",
      электронное письмо: {
        требуется: true,
        
        
        электронная почта: правда
      },
      пароль: {
        требуется: true,
        миндлина: 5
      }
    },
    
    Сообщения: {
      firstname: "Пожалуйста, введите ваше имя",
      фамилия: "Пожалуйста, введите свою фамилию",
      пароль: {
        обязательно: «Пожалуйста, укажите пароль»,
        minlength: "Ваш пароль должен содержать не менее 5 символов"
      },
      электронная почта: «Пожалуйста, введите действующий адрес электронной почты»
    },
    
    
    submitHandler: function (form) {
      форма. Разместить();
    }
  });
});
  
 Заключение 
 Вот и все, готово! Теперь вы знаете, как настроить проверку формы с помощью jQuery. Помните, что это не заменяет проверку на стороне сервера. Злоумышленник по-прежнему может манипулировать правилами проверки или обходить их (например, с помощью инструментов разработчика браузера). 
 Отправить форму в React без jQuery AJAX 
  1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21 год
22
23
24
25
26 год
27
28 год
29
30
31 год
32
33
34
35 год
36
37
38
39
40
41 год
42
43 год
44 год
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81 год
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
   импортировать React, {компонент} из "реагировать";
импортировать ReactDOM из "react-dom";

импорт "./styles.css ";

class SignInForm расширяет Component {
  конструктор (реквизит) {
    супер (реквизит);
    this.state = {
      значения: {
        электронное письмо: "",
        пароль: ""
      },
      isSubmitting: ложь,
      isError: false
    };
  }

  submitForm = async e => {
    e. preventDefault ();
    console.log (this.state);
    this.setState ({isSubmitting: true});

    const res = await fetch ("https://61m46.sse.codesandbox.io/login", {
      метод: "POST",
      тело: JSON.stringify (this.state.values),
      заголовки: {
        "Content-Type": "application / json"
      }
    });
    это.setState ({isSubmitting: false});
    const data = ожидание res.json ();
    ! data.hasOwnProperty ("ошибка")
      ? this.setState ({сообщение: data.success})
      : this.setState ({сообщение: data.error, isError: true});

    setTimeout (
      () =>
        this.setState ({
          isError: ложь,
          сообщение: "",
          значения: {электронная почта: "", пароль: ""}
        }),
      1600
    );
  };

  handleInputChange = e =>
    this.setState ({
      значения: {... this.state.values, [e.target.имя]: e.target.value}
    });

  оказывать() {
    возвращаться (
      

        

          

             Адрес электронной почты 
            <ввод
              type = "электронная почта"
              name = "электронная почта"
             
              значение = {this. state.values.email}
              onChange = {this.handleInputChange}
              title = "Электронная почта"
              требуется
            />
          
          

             Пароль 
            <ввод
              type = "пароль"
              name = "пароль"
             
              value = {this.state.values.password}
              onChange = {this.handleInputChange}
              title = "пароль"
              требуется
            />
          
           Войти 
        
        

          {this.state.isSubmitting? "Отправка ...": this.state.message}
        
      
    );
  }
}

function App () {
  возвращаться (
    

      
 Войдите в свою учетную запись 
      
    
  );
}

const rootElement = документ.getElementById ("корень");
ReactDOM. render (<Приложение />, rootElement);  
 jsx 
 jQuery получить данные формы при отправке - JSFiddle 
 Редактор макета 
          Классический
          Столбцы
          Нижние результаты
          Правильные результаты
          Вкладки (столбцы)
          Вкладки (строки)
 Консоль 
            Консоль в редакторе  (бета) 
            Очистить консоль при запуске
 Общие 
            Номера строк
            Обернуть линии
            Отступ с табуляцией
            Подсказка по коду (автозаполнение)  (бета) 
          Размер отступа:

            2 пробела 3 пробела 4 пробела 
          Ключевая карта:

            По умолчанию: Sublime TextEMACS 
          Размер шрифта:

            По умолчаниюBigBiggerJabba 
 Поведение 
              Код автозапуска
              Только код автозапуска, который проверяет
              Код автосохранения (натыкается на версию)
            Автоматически закрывать HTML-теги
            Автоматически закрывающие скобки
            Проверка действующего кода
            Выделите совпадающие теги
 Заглушки 
            Показывать панель шаблонов реже
 Событие отправки формы JQuery не работает должным образом в Firefox 
 Привет! 

Я работаю над проектом функционального прототипа для одного из моих классов по информатике и совсем недавно начал изучать и использовать MDBootstrap JQuery во время работы над ним. 
  Ожидаемое поведение  
 На домашней странице моего проекта есть форма входа, которая при отправке запускает событие отправки Jquery, которое сравнивает значения входных данных формы со значениями в файле json, чтобы определить, следует ли устанавливать переменные sessionStorage для этого пользователя, если он существует, который затем используются, чтобы определить, должны ли определенные области div показываться пользователю при загрузке домашней страницы. 

Если заданная комбинация пользователя и пароля не существует в файле, он устанавливает другую переменную sessionStorage, которая делает так, чтобы сообщение об этом факте показывалось пользователю при перезагрузке страницы после отправки.
  Фактическое поведение  
 Ожидаемое поведение отлично работает в Chrome, Edge и Internet Explorer, но по какой-то причине Firefox, кажется, фиксирует срабатывание события отправки, но ничего не происходит, так как страница, похоже, перезагружается из-за отправки, но код внутри Событие отправки jquery, похоже, не работает, как в других браузерах.  

Что может быть причиной этого? 

Это проблема с Firefox, или я делаю что-то еще, что Firefox не поддерживает? 
  Ресурсы (скриншоты, фрагменты кода и т. Д.)  
 Пример в Chrome: 
 -> Я запускаю свой код через локальный хост PHPStorm Server или открываю его в браузере через локальный хост своего XAMPP Server. 
 -> Я заполняю поля ввода формы входа именем пользователя «ServicosAcademicos10» и соответствующим паролем «IPBejaSA10». 

 -> Я нажимаю Enter в полях ввода или нажимаю кнопку Sign In под полями ввода, чтобы отправить форму, затем запускается событие отправки, и страница, наконец, перезагружается, теперь отображаются соответствующие элементы в соответствии с набором sessionStorage, как и должно быть, пока пользователь в конечном итоге не нажмет кнопку выхода в правом верхнем углу, и он не вернется на страницу, как показано на изображении выше.

 Теперь в Firefox я не могу пройти мимо действий первого изображения, так как код внутри события отправки JQuery не работает, и я не могу понять, почему.  

Надеюсь, кто-нибудь здесь сможет помочь мне разобраться в том, что происходит ... 
 Вы можете загрузить код моего проекта по этой ссылке на Google Диске, чтобы поэкспериментировать с ним. 

Файлы, относящиеся к вопросу, должны быть такими: 

 index.html 
 стиль.CSS 
 saca.js 
 users.json 


 Простое предотвращение отправки двойной формы с помощью jQuery - The Pug Automatic 
 Простое предотвращение отправки двойной формы с помощью jQuery - The Pug Automatic 
 Написано 23 июля 2008 г. Помечено как JavaScript, jQuery. 
 Если нетерпеливый пользователь нажимает «Отправить» несколько раз, форма может быть отправлена ​​несколько раз, что вызовет проблемы. 
 Недавно я столкнулся с одной такой проблемой.
 Я видел решения, которые отображают диалоговое окно предупреждения с сообщением типа «Уже отправлено. Закройте это диалоговое окно и подождите».  Я не думаю, что это очень хороший интерфейс. Лучше молча отбрасывать лишние сабмиты. 
 Другие решения делают кнопку «Отправить» недействительной и меняют ее текст на что-то вроде «Отправка…». Это имеет некоторые проблемы. Формы можно отправлять, не нажимая кнопку отправки, например с помощью клавиши Enter, поэтому отключение кнопки не обязательно предотвращает многократную отправку.Кроме того, иногда вы не используете обычную кнопку отправки, а вместо этого используете кнопку отправки изображения или что-то необычное с использованием JavaScript, которое менее просто отключить. 
 Это мое простое решение с использованием jQuery: 
  jQuery.fn.preventDoubleSubmit = function () {
 jQuery (this) .submit (function () {
 if (this.beenSubmitted) 
 return false; 
 else 
 this.beenSubmitted = true; 
}); 
};  
 Используйте как 
  jQuery ('# my_form').preventDoubleSubmit ();  
 Код просто сохраняет в самом объекте формы, был ли он отправлен ранее.

No related posts.