Как сделать обработку формы через ajax?

Question

[Ярослав Иванов]

Добрый день!

У меня есть index.php который через include подключает register.php

Код register.php (c 104 по 175 строку)

if($error<2) {
  echo "
<br>
  <form name='register' action='index.php?page=register' method='post' onsubmit='return checkForm(this);'>

    <fieldset>
          <legend><b>Данные об аккаунте:</b></legend>				
    <table cellspacing=0 border=0 cellpadding=0 width=100%>
<tr>
  <td align=left>
<b><i>Аккаунт</i></b><br>(Введите имя аккаунта, длиной от 4 до 14 латинских букв и цифр): 
  </td>
  <td align=right>
<input type=text maxlength=14 name=account value=''>
</td>
  </tr>

  <tr>
  <td align=left>
<b><i>Пароль</i></b><br>(Пароль должен состоять не менее чем из 8 латинских букв и цифр): 
  </td>
  <td align=right>
<input type=password maxlength=16 name=password value=''>
</td>
  </tr>
  
  <tr>
  <td align=left>
<b><i>Повторите пароль</i></b>: 
  </td>
  <td align=right>
<input type=password maxlength=16 name=password2 value=''>
</td>
  </tr>

  <tr>
  <td align=left>
<b><i>E-mail</i></b> (Введите действующий e-mail адрес. Помните, что при восстановлении забытого пароля именно на этот e-mail придет новый пароль. Поддерживайте в работоспособности ваш e-mail): 
  </td>
  <td align=right>
<input type=text maxlength=50 name=email value=''>
</td>
  </tr>
    </table>
  </fieldset>
<br>
          
  <fieldset>
          <legend><b>Защита от автоматических регистраций:</b></legend>				
    <table cellspacing=0 border=0 cellpadding=0 width=100%>
<tr>
  <td align=left>
<b><i>Код на картинке</i></b><br>(Введите число, которое Вы видите на картинке. Если вы не видите картинку, включите в браузере отображение картинок.): 
  </td>
  <td align=right>
<img id='capchaimage' src='captha/index.php?PHPSESSID=' height='40' width='120'><br><br>
<input type=text name=keystring value=''>
</td>
  </tr>
</table> </fieldset>
<br><br>

    <div align=center>
      <BR>
      <input type=hidden name=register value='register'>
      <input type=submit name=submit value='Зарегистрировать'>


    </div>
  </form><br>
  ";
}

Как сделать чтобы форма обрабатывалась без перезагрузки страницы ? я попробовал 2-3 способа и пока без успешно. Либо никакой реакции либо страница все же перезагружается.

Answer 1

[Илья Шатохин]

$('form[name="register"]').submit(function(e){
	var $form = $(this);
	e.preventDefault();
	$.ajax({
		type: "POST",
		url: $form.attr("action"),
		data: $form.serialize(),
		success: function() {
			$form[0].reset();
		},
		error: function(jqXHR, textStatus, error) {
			console.log(error);
		}
	});
});

Comments

[Ярослав Иванов]

вообще никак нее реагирует форма, может есть смысл полный код дать?

[Илья Шатохин]

Ярослав Иванов: а вы код "onsubmit='return checkForm(this);'" уберите из своего темплейта.

[Ярослав Иванов]

То же самое. даже в консоль ничего не пишет. P.S. у меня работет это api.jquery.com/event.preventdefault
можно ли туда впихнуть форму мою ?

[Илья Шатохин]

Ярослав Иванов: а что он должен писать в консоль? У вас атрибуты у формы не изменились, кстати?

[Илья Шатохин]

Ярослав Иванов: не понял причем здесь event.preventdefault. Вы где-то до моего кода обрабатываете им?

[Ярослав Иванов]

Илья Шатохин: При нажатии на кнопку ? они как были так и остались. Убрал onsubmit как вы написали.

[Илья Шатохин]

Ярослав Иванов: Уберите обработчик с кнопки, вы же прерываете событие сабмита формы. Оставьте только мой код.

[Ярослав Иванов]

я оставил только ваш код. Форма отрабатывает. Но как и без кода страница перезагржужается. ( на кнопке висело onclick='event.preventDefault();' - убрал)

[Ярослав Иванов]

Мой косяк. Теперь оставил лишь Ваш код. в консоли пишет $form.reset is not a function

[Ярослав Иванов]

Код прописан в register.php. Может его в index.php перенести или роли не играет ? или надо переменную как-то объявить ? form.reset ? или jQuery обновить ?

[Илья Шатохин]

Ярослав Иванов: c reset мой косяк, поправил в ответе.

[Ярослав Иванов]

Илья Шатохин: Эх, все никак не хочет реагировать. Что ему не хватает ? или что может мешать ?

[Илья Шатохин]

Ярослав Иванов: а как должна среагировать то? Сейчас больше не перезапускается?

[Ярослав Иванов]

Илья Шатохин: Не перезагружается но и ошибки не выдает если пустые поля. Не регистрирует аккаунт. То есть форма не отрабатывает

[Ярослав Иванов]

Илья Шатохин: но по идеи другой код же не нужен чтобы его показывать. Мы же только с формой работаем.?

[Илья Шатохин]

Ярослав Иванов: ничего не понимаю. А ошибки откуда должны браться? А валидировать пустые поля кто должен? Я вам написал код ручного сабмита, дальше можете его модифицировать.

[Ярослав Иванов]

Илья Шатохин: Валидатор есть. Вот полный код страницы pastebin.com/a3qxN9eh

[Илья Шатохин]

Ярослав Иванов: Валидатор на сервере, значить ошибку надо возвращать в ответе ajax запроса и обрабатывать в браузере. Не надо пихать ошибки в темплейт.

[Ярослав Иванов]

Теперь я понял. но как сделать дальше ? ajax к сожалению я не знаю. Гуглить?

[Ярослав Иванов]

Или хотя бы как получить данные с форм ? узнать работает ли обработчик.

[Ярослав Иванов]

Илья Шатохин: Он забирает данные. теперь-то я все понял. Осталось их принять в mssql и вывести сообщение что все ок. Спасибо за наставление :)

[Илья Шатохин]

Ярослав Иванов: не за что, я в ответе добавил обработку ошибок в ответе ajax, чтобы вам было понятней.

Answer 2

[Артём Щурин]

В обработчике отправки формы вызываем
event.preventDefault()
что отменит дествие по умолчание(синхронную отправку)
и отправляем событие ajax'ом

Comments

[Ярослав Иванов]

в input добавить onclick='event.preventDefault()' так?

[Ярослав Иванов]

Можешь описать примерно что как работает?) у меня еще на сайте jQuery прикручен для другого. Страницы листает . Я подключил твой скрипт и теперь листание сломалось. регистрация тоже не работает.:)

[Ярослав Иванов]

скрипт вставил в register.php. Сейчас вставил в коренвой файл index. при нажание на зарегистрироваться в консоли пишет Uncaught SyntaxError: missing ) after argument list и ссылается на