Блог

У меня на странице есть несколько похожих форм, и я использую плагин jQuery form. После отправки любой из форм я хочу обновить div над конкретной формой, из которой данные были отправлены в ответе со страницы php / asp.
Но я не знаю, как различать формы в скрипте jQuery, чтобы получать ответ на определенный div.

Вот оригинальный скрипт, в котором нет возможности различать формы и divs:

 <script type="text/javascript" src="jquery.form.js"></script> 
    <script type="text/javascript"> 
$(document).ready(function() { 
    $('#htmlForm').ajaxForm({ 
        target: '#htmlExampleTarget', 
        success: function() { 
            $('#htmlExampleTarget').fadeIn('slow'); 
        } 
    }); 
});    
  

Вот формы и divs:

 <form id='htmlForm' action='process.asp' method='post'>
<input TYPE='hidden' NAME='ID' VALUE='1'>
<input type='submit' value='Go'></form>

<div id='htmlExampleTarget'></div>


<form id='htmlForm' action='process.asp' method='post'>
<input TYPE='hidden' NAME='ID' VALUE='2'>
<input type='submit' value='Go'></form>

<div id='htmlExampleTarget'></div>
  

и т.д.

Формы и разделы создаются с помощью цикла, нет проблем с изменением их идентификаторов численно… Мне просто нужен скрипт, чтобы различать их. Теперь я могу обновить только первый div по ответу с сервера.

вы знаете, что каждый объект должен иметь уникальный идентификатор, который не соответствует действительному HTML-коду, совместимому с w3, в любом случае, как насчет

 ...
success: function() { 
            $(this).prev('div').html('banana dance');
        } 
  

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

ie.

 <form id='htmlForm_1' class='htmlForm' action='process.asp' method='post'>
  

Я бы сделал следующее,

 <div class="wrap_form">
   <div class="above"></div>
   <form>
   </form>
</div>

<div class="wrap_form">
   <div class="above"></div>
   <form>
   </form>
</div>

$('form').submit(function (){  
    var form $(this);
    $.ajax({
     ... options go here ...,
     success:function (r) {
           $(form).parents('.wrap_form').find('.above').html('blablabla');
      }
    })
});
  

///но, глядя на ваш подход

используйте $('form').prev('div');

Совершенно неправильно иметь один и тот же идентификатор для форм. Используйте разные идентификаторы для каждой формы, если вы хотите сделать это правильно, и тогда ваш код должен быть

 $(document).ready(function() {
    $('#htmlForm_1').ajaxForm({
        target: '#htmlExampleTarget_1',
        success: function() {
            $('#htmlExampleTarget_1').fadeIn('slow');
        }
    });
});
  

и т.д.

За то, что вы спросили в комментариях:

Вы могли бы использовать поле ввода name=»id» при отправке, чтобы получить цель таким образом

     var targetNum = 0; //outside the functions


            targetNum = jQuery(this).children('input[name="ID"]').val();
 $('#htmlExampleTarget' targetNum).fadeIn('slow');