Как сделать общий js обработчик формы для нескольких форм?

Question

[Алексей Скляров]

Существует обычная форма:

<form class="promo-form" id="top-banner-form2" onsubmit="sendContact();">
                <div id="mail-status"></div>
                <input type="text" name="clientName" placeholder="Ваше имя" />
                <input type="text" name="clientPhone" placeholder="Ваш телефон" />
                <input type="submit" value="submit">
              </form>

Есть JS скрипт, который ее обрабатывает:

function sendContact() {
    var valid;
    valid = validateContact();
    alert($('#top-banner-form').serialize());
    if(valid) {
     jQuery.ajax({
    url: "/contact.php",
    data:$('#top-banner-form').serialize(),
    type: "POST",
    success:function(data){
      $("#mail-status").html(data);
      $("#mail-status").css('green');
    },
    error:function (){
      $("#mail-status").html(data);
      $("#mail-status").css('red');
    }
    });
     }
}

Все это работает для формы с id="top-banner-form". Я повесил обработчик на форму при submit, но не могу понять как можно сделать так, чтобы скрипт выполнялся конкретно для той формы, с которой он был вызван (на сайте стоит две таких формы в разных местах)?

Answer 1

[Stalker_RED]

<form ... onsubmit="sendContact(this);">

function sendContact(form) {
    alert($(form).serialize());
   ...
}

Comments

[Алексей Скляров]

Не подскажите, как для: success:function(data){ сделать селект по .mail-status для текущей формы? jQuery(this).find(".mail-status").css('red'); не работает

[Алексей Скляров]

Вместо this забыл переписать на form, но все же, не работает

[Stalker_RED]

Алексей Скляров: У вас же id="mail-status" а не класс.

[Алексей Скляров]

Stalker_RED: Да, я знаю, но формы две, поэтому два id нельзя использовать, mail-status - блок, в которое выводится сообщение. Т.е он существует для каждой формы, но скрипт возвращает в оба таких блока, а нужно только в тот, который находится внутри той формы, которую мы используем

[Stalker_RED]

Алексей Скляров: А что такое .css('red') ?
Попробуйте jQuery(form).find(".mail-status").css('border', 'dashed 1px red');