Помогите разобраться с jquery form

114

wolfston

28 апреля 2011, 07:45

1426

Вобщем проблема в следующем, имеется много однотипных форм, на них повешен обработчик jquery form submit, который при нажатии отправки обрабатывает ее, но при полученнии данных я не могу привязатся к той форме из котрой был запрос и соответственно вывести туда результат, выдает резальтат всегда только в первую.

Вот пример кода -


<script type='text/javascript' src='/ajax/jquery.js'></script>

<script type='text/javascript' src='/ajax/jquery.form.js'></script>

<script type="text/javascript">

jQuery(document).ready(function(){					   

  var options = { 

    beforeSubmit: showRequest, 

    success: showResponse, 

    timeout: 3000

  };

  

  // привязываем событие submit к форме

  jQuery('.pane #myForm').submit(function() { 

    jQuery(this).ajaxSubmit(options); 

    return false;

  }); 

});



// вызов перед передачей данных

function showRequest(formData, jqForm, options) { 

    var queryString = jQuery.param(formData); 

    alert('Вот что мы передаем: ' + queryString); 

    return true; 

} 

 

// вызов после получения ответа 

function showResponse(responseText, statusText)  {  

    alert('Статус ответа сервера: ' + statusText + 'Текст ответа сервера:' + responseText + 

        'Целевой элемент обновиться этим текстом.'); 

	jQuery('#output').attr('value', responseText); 

}



</script>

Если вместо метки #output ставлю this то он не находит вобще атрибут value, а так как формы однотипные, то эта метка присутствует во всех формах и при клике на любую он результат всегда отдает в верхнюю.

Как установить фокус на нужную форму, из которой был вызов?

226

Ragnarok

28 апреля 2011, 08:08

#1

#output случайно не идентификатор формы?

//TODO: перестать откладывать на потом

W

114

wolfston

28 апреля 2011, 08:14

#2

Сама форма -


<div class="pane"><form id="myForm" action="form.php" method="post">

	<p><textarea class="ta" name="Text" id="output" rows="20" cols="60">AJAX-ответ от сервера заменит этот текст.</textarea><br>

	<input type="text" name="regular" size="30"><input type="submit" value="Отправить"></form></p>

</div>

Вот примерно так выглядят однотипные формы, сама задумка в том что данные отправлять два раза, первый раз скрипт обрабатывает и возвращает назад результат, человек смотрит коректирует и уже сохраняет или нет.

226

Ragnarok

28 апреля 2011, 08:19

#3

у всех форм один id? тогда логично что обновляется только первая

W

114

wolfston

28 апреля 2011, 08:32

#4

Ну а как по другому, если id будет разный то как обойтись одним обработчиком форм?

Что если у меня 20 форм то мне надо 20 функций обрабоки назнчить?

jQuery('.pane #myForm').submit отправляет те данные которые находятся в той форме в которой я нажал отправить, а принять в ту форму данные как то можно?

47

gormarket

28 апреля 2011, 08:43

#5

Похоже Ваша проблема в том, что Вы используете на одной странице HTML-элементы с одинаковым id, что недопустимо.

У Вас несколько форм с id="myForm" и в каждой есть элемент с id="output".

Замените для myForm и output id на class

jQuery('.pane #myForm').submit(function() {

на

jQuery('.pane .myForm').submit(function() {

jQuery('#output').attr('value', responseText);

на

jQuery(this).find('.output').attr('value', responseText);

Не знаю, сработает ли последняя строка ( будет ли в данном контексте this ссылкой на форму ), но если не сработает, то можно вместо нее попробовать такую строку

jQuery(objForm).find('.output').attr('value', responseText);

но тогда объявить в начале переменную

var objForm;

jQuery(document).ready(function(){

....

и в

jQuery('.pane .myForm').submit(function() {

добавить строку

objForm=this;

Товары и цены в магазинах Вашего города: Городской рынок (http://gormarket.ru/)

29

ParserYa

28 апреля 2011, 08:56

#6

wolfston:
сама задумка в том что данные отправлять два раза, первый раз скрипт обрабатывает и возвращает назад результат, человек смотрит коректирует и уже сохраняет или нет.

Странное решение.. что мешает ставить флаг после первой отправки формы? Если флага не стоит, то скрипт "брабатывает и возвращает назад результат", если стоит то "сохраняет или нет"? Зачем дублировать формы?

Может не правильно понял просто вас, поэтому ответ на ваши вопрос из первого сообщения:

во-первых, вам правильно сказали Ragnarok и gormarket - ID - это уникальный идентификатор, для подобных элементов используется class.

Во-вторых, не понимаю зачем вы всю работу аякса развели на кучу функций?

Конечно у this не будет value в методе showResponse... и даже в сабмите не будет value. Value будет у тега textarea вложенного в форму, соответственно, если вы пишите обработчик на submit формы, то $(".ta", $(this)).val() - будет как раз нужный вам аттрибут.. Меняйте его.. =)

W

114

wolfston

28 апреля 2011, 08:58

#7

gormarket Большое спасибо, помогло.

Сохранить this в переменную в моменты вызова функции мне почемуто в голову не пришло, все работает.

VK приобрела 70% в структуре компании-разработчика red_mad_robot

Маркетинг для шоколадной фабрики. На 34% выше средний чек