Несколько форм на сайте как к ним обращаться из js?

Question

[mod133]

На сайте 3 формы, при заполнении которых пользователь должен получать разные сообщения об отправке когда будет submit, реализовано вместо Alert через MagnificPopup. Но получает сообщение одно и то же сообщение, так как обращается ко всем формам на сайте. Подскажите способ реализации...

lines (18 sloc)  358 Bytes
$(document).ready(function() {

	//E-mail Ajax Send
	$("form").submit(function() { //Change
		var th = $(this);
		$.ajax({
			type: "POST",
			url: "mail.php", //Change
			data: th.serialize()
		}).done(function() {
			alert("Thank you!");
			setTimeout(function() {
				// Done Functions
				th.trigger("reset");
			}, 1000);
		});
		return false;
	});

});

Comments

[Павел]

Но получает сообщение одно и то же сообщение

можно поконкретнее?

Answer 1

[Павел Корнилов]

$("form") -> $("form#f1") etc...

Comments

[mod133]

Не работает (( Нужно подобное решение, в форме я так понимаю это id?

[Илья Герасимов]

mod133, потому что первый submit подвешан на все формы и соответственно выстреливает при сабмите по любой форме, уникализируйте это событие. Например добавив к каждой форме разные идентификаторы и вешайте .submit по идентификаторам, а не по имени элемента.

[Павел Корнилов]

mod133, да, нужно разделить формы, присвоив им идентификаторы. По ним потом и обращаться.

[mod133]

KorniloFF, странность в том, что не выходит

[Павел Корнилов]

mod133, должно выйти. Или упрощённый пример давайте.

[mod133]

Все заработало так как вы и говорили:

$("form#form1").submit(function() { //Change
		var th = $(this);
		$.ajax({
			type: "POST",
			url: "mail.php", //Change
			data: th.serialize()
		}).done(function() {

			$.magnificPopup.open({ 
				items: {
				src: '<div class="js-popup">Спасибо! <br /> Мы ва перезвоним в течении 15 минут</div>', // can be a HTML string, jQuery object, or CSS selector
				type: 'inline'
			  }
			});

Спасибо большое!

Answer 2

[zoozag]

var th = $(this);
Вот у вас в функции выбирается форма текущая.
От нее и пляшите.

И сообщение лучше показывать не на done, а на success

Comments

[Павел Корнилов]

И сообщение лучше показывать не на done, а на success

Нет.

Answer 3

[s-jet]

Submit должен отрабатывать уже в контексте определенной формы

var formSender = {
	$form : {},
	init : function() {
		$('form').each(function() {
			var $form = $(this);
			$form.on('submit', function() {
				formSender.sendIfValid($form);
			});
			
		});
	},
        sendIfValid : function($form) {
           ......
        }
};
$(document).ready(function() {
	formSender.init();
});