Всем привет. Задача следующая.
Имеется страница с некоторым числом поп-апов (с одинаковым классом), содержащих разные формы.
Внутри каждой формы есть пустой
<div id="result"></div>
который будет получать и выводить ответ сервера после отправки формы. Сами формы, по сути, идентичные, только разные поля.
Как правильно сделать выборку, чтоб при сабмите ответ выводился именно в #result, находящийся в форме, которую отправил юзер, а не в первом попавшемся на странице?
скрипт сабмита:
$('.formAjax').submit(function(event) {
/* отключение стандартной отправки формы */
event.preventDefault();
/* собираем данные с элементов страницы: */
var $form = $( this ),
h1_form = $('h1').text(),
h2_form = $('h2').text(),
link = $form.find( 'input[name="url"]' ).val(),
ajax = $form.find( 'input[name="ajax"]' ).val(),
name = $form.find( 'input[name="name"]' ).val(),
phone = $form.find( 'input[name="phone"]' ).val(),
diapazon = $form.find( 'select[name="diapazon"]>option' ).val(),
url = $form.attr( 'action' );
/* отправляем данные методом POST */
var posting = $.post( url, { h1: h1_form, h2: h2_form, url: link, ajax: ajax, name: name, phone: phone, diapazon: diapazon } );
/*после отправки формы*/
posting.done(function( data ) {
/*выводим результат запроса*/
// alert( data );
// alert('Вы записались на прием, мы скоро свяжемся с вами');
// $('form').html(result);
// $( "#result" ).empty().append( data );
$( "#result" ).text(data);
console.log ('ok');
/*очищаем поля формы*/
$(':input','form')
.not(':button, :submit, :reset, :hidden')
.val('')
.removeAttr('checked')
.removeAttr('selected');
});
});
пример формы
<form action="/algo/addappointment.php" class="formAjax">
<input type="text" placeholder="Ваше имя*" name="name" required class="form__input form__input_popup"/>
<input type="text" placeholder="Телефон*" name="phone" required class="form__input form__input_popup"/>
<input type="hidden" name="url" required value="<?=$APPLICATION->GetCurDir()?>"/>
<input type="hidden" name="h1" required id="h1_form" value=""/>
<input type="hidden" name="ajax" required value="y"/>
<select name="diapazon" class="form__input form__input_popup">
<option value="9-12">С 9 до 12</option>
<option value="12-15">С 12 до 15</option>
<option value="15-18">С 15 до 18</option>
<option value="18=21">С 18 до 21</option>
</select>
<input type="submit" value="Записаться" class="button button_big"/>
<div id="result"></div>
</form>