Как передать «указатель» на форму, в которой был вызван onsubmit?

Question

[Вячеслав Лебедев]

<form onsubmit="return ajaxForm(this);">
          <span class="ajaxContent">&nbsp;</span>
          Введите имя:<br/>
          <input name="ajax[name]" type="text" size="20">
          <input name="ajaxFilePhp" value="test.php" type="hidden">
          <input type="submit" value="Отправить">
        </form>

Как в js, обрабатывать именно эту форму?
У меня в html несколько таких форм с onsubmit="return ajaxForm(this);" а там я обрабатываю всякое.
И мне нужно, чтобы последующие модификации, касались только этой формы, а не всех, у кого стоит class="ajaxContent".

А вот js

function ajaxForm(thisForm) {
  var data = $(form).serializeArray(); // Сериализация всех полей формы
  
  /* Отыскиваем путь до файла обработчика и записываем в ajaxFilePhp */
  for (var x in data) {
    if (data[x].name === 'ajaxFilePhp') {
      var ajaxFilePhp = data[x].value;
    }
  }
  
  $.ajax({
    type: 'POST',
    url: ajaxFilePhp, // Путь до обработчика php
    data: data, // Массив ajax[name'ов]
    success: function(html) {
      /* Вставляется внутри, где была вызвана форма */
      $('.ajaxContent').html(html); // Ответ от обработчика
    }
  });
  return false;
}

Answer 1

[Влад Шариков]

Именно ваш код не работает (не видит функцию ajaxForm — пример), предложу немного другие варианты.

1. Присвоить всем формам ID и, затем, указать все эти ID в селекторе в JS:

$("#form1, #form2").submit(function () {
    console.log($(this)); // <-- в $(this) содержится указатель на форму
    return false;
});

Пример тут

Если не хочется писать кучу ID в jQuery (хотя по-моему ничего в этом нет, а так и надо сделать, как в 1 методе), то...

2. Присвоить форме класс (это не подразумевает, что нужно в css делать стиль под него и т.п.), но не id, так как ID должен быть уникальным:

$(".handleMe").each(function () {
    $(this).submit(function () { // <-- в $(this) содержится указатель на форму
        console.log($(this)); // <-- в $(this) содержится указатель на форму
        return false;
    });  
});

Пример здесь

P.S.: Пример для работы с span с классом ajaxContent именно той формы, которую мы отправили:

$("#form1, #form2").submit(function () {
    console.log($(this)); // <-- в $(this) содержится указатель на форму
    $("#"+$(this).attr('id')+" .ajaxContent").html('bro');
    return false;
});

Добавилась строка

$("#"+$(this).attr('id')+" .ajaxContent").html('bro');

. С помощью $(this).attr('id') получим id текущей формы (которую отправили). С помощью полученного id формируем селектор, который даст нам span текущей формы. В него и пишем что-то:

$("#"+$(this).attr('id')+" .ajaxContent").html('bro');

Сам пример лежит тут.

Comments

[Вячеслав Лебедев]

Копирую вопрос, если знаете как помочь, поделитесь пожалуйста :)

--> И мне нужно, чтобы последующие модификации, касались только этой формы, а не всех, у кого стоит class="ajaxContent".

-->  
Вот тут выводится ответ от ajax. Понимаете в чем проблема?
Как сделать так, чтобы вывод касался только того span'а, который находится внутри этой формы.

[subalex]

@slavikse $('.ajaxContent', thisForm).html(html);

[Влад Шариков]

Как сработает метод subalex не знаю. От себя добавлю это:

$("#"+$(this).attr('id')+" .ajaxContent").html('bro');

— мы формируем селектор из ID текущей формы + .ajaxContent, в итоге получается, например: $("#form1 .ajaxContent"), что означает получить элемент, у которого есть класс .ajaxContent и его предок имеет #form1. Понятно? Пример и код: jsfiddle.net/xV3zW/33

[Вячеслав Лебедев]

Добавил это в js, но ничего не сработало :(

function ajaxForm(thisForm) {
var data = $(thisForm).serializeArray(); // Сериализация всех полей формы

/* Отыскиваем путь до файла обработчика и записываем в ajaxFilePhp */
for (var x in data) {
if (data[x].name === 'ajaxFilePhp') {
var ajaxFilePhp = data[x].value;
}
}

$.ajax({
type: 'POST',
url: ajaxFilePhp, // Путь до обработчика php
data: data, // Массив ajax[name'ов]
success: function(html) {
/* Вставляется внутри, где была вызвана форма */
$('.ajaxContent', thisForm).html(html); // Ответ от обработчика
}
});
return false;
}

[Вячеслав Лебедев]

Все заработало! Класс был не указан нужный, эксперементировал забыл вернуть как было.
Спасибо! :)

[Влад Шариков]

@slavikse Используйте теги code, для форматирования кода. То, что вы скинули как-то не похоже на мой код ниразу. Вам мой ответ помог?

[Вячеслав Лебедев]

Да, помог, спасибо огромное! :)

[Влад Шариков]

Дак тут надо жимкать вроде решено? Или здесь нет такого как на stackoverflow.com?

Answer 2

[subalex]

Не совсем понятен Ваш вопрос. "Указатель" и так передается - он в thisForm

Comments

[Влад Шариков]

@subalex А у меня почему-то не сработал вариант, который предлагает создатель вопроса, хотя должен работать и указатель в thisForm должен быть — это да.

[subalex]

thisForm - это не jQuery обьект, а обычный JS обьект указывающий на элемент DOM.
$(thisForm) - будет jQuery объект

[Влад Шариков]

Я понимаю, но разговор не о том. У меня вообще jsFiddle ругался на то, что нет такой функции ajaxForm, я поэтому дальше даже не смотрел.

[Вячеслав Лебедев]

будьте внимательнее, эта функция написана мной

[subalex]

она не будет работать в таком виде. переменная ajaxFilePhp обьявляется внутри цикла еще и внутри if-а, за пределами if-а она будет undefined. также не понятно что такое переменная form - вместо нее нужно использовать thisForm

Answer 3

[Аркадий Бутерманов]

$("#myForm").on('submit', function (event) {
    console.log(event.target); // или $(event.target)
    return false;
});

Подробнее про event.target: api.jquery.com/event.target

Comments

[Влад Шариков]

Не заработает. Нужно поправить: `$("#myForm").on('submit', function (event) {`

[Аркадий Бутерманов]

@vladsharikov да, опечатался. Спасибо, поправил.