Как выделить несколько похожих форм и элементов div в скрипте jQuery Form - PullRequest
Новая
       0

Как выделить несколько похожих форм и элементов div в скрипте jQuery Form

0 голосов
/ 08 ноября 2011

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

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

<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'); 
        } 
    }); 
});

Вот формы и деления: 

<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 создаются с помощью цикла, поэтому нет проблем с числовым изменением их идентификаторов ... Мне просто нужен скрипт, чтобы различать их. Теперь я могу обновить только первый div по ответу сервера.

Ответы [ 4 ]

1 голос
/ 08 ноября 2011

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

...
success: function() { 
            $(this).prev('div').html('banana dance');
        }
0 голосов
/ 08 ноября 2011

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

$(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');
0 голосов
/ 08 ноября 2011

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

<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');

0 голосов
/ 08 ноября 2011

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

т. 

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