JQuery, Ajax и PHP представляют дилемму нескольких форм

Question

Это очень простая форма, которую я нашел в Интернете (так как я начинающий jQuery).

<!-- this is my jquery -->

<script>
    $(document).ready(function(){
$("form#submit_wall").submit(function() {

var message_wall = $('#message_wall').attr('value');
var id = $('#id').attr('value');
$.ajax({
type: "POST",
url: "index.php?leht=pildid",
data:"message_wall="+ message_wall + "&id="+ id,
cache: false,

success: function(){
$("ul#wall").prepend(""+message_wall+"", ""+id+"");
$("ul#wall li:first").fadeIn();

alert("Thank you for your comment!");
}
});
return false;
});
});
</script>

<!-- this is my HTML+PHP -->
some PHP ...
      while($row_pilt = mysql_fetch_assoc($select_pilt)){

       print 

<form id="submit_wall">
<label for="message_wall">Share your message on the Wall</label>
<input type="text" id="message_wall" />
<input type="hidden" id="id" value="'.(int)$row_pilt['id'].'">
<button type="submit">Post to wall</button>
</form>

и ниже мой PHP-скрипт, который пишет в mySQL.

Это довольно простой сценарий.Тем не менее, это становится немного сложнее, когда я отправляю это.Так как на моей странице более одной формы (в соответствии с WHILE PHP LOOP), поэтому при отправке отправляется только ПЕРВАЯ форма.Кроме того, любые другие последующие формы, которые я отправляю - данные копируются из первой формы.Есть ли функции jQuery, которые очищают данные?- или есть лучшее решение.

Спасибо, Ник

Answer 1

Это потому, что вы присваиваете каждой форме один и тот же идентификатор и, следовательно, отправляете первый найденный элемент с этим идентификатором, то есть первую форму.Вам нужно назначить уникальный идентификатор каждой форме, а затем дать каждой форме функцию отправки AJAX, которая отправляет данные, специфичные для формы.Вы можете использовать функцию $ .each () jQuery для циклического обхода всех форм и $ (this) .attr ('id') внутри функции submit для получения идентификатора формы.

UPDATE: как показаносогласно комментарию к этому ответу, вам на самом деле не нужна функция each (), потому что jQuery все равно применяет ее к каждому элементу формы.

Вот пример сценария:

$(document).ready(function(){
    $("form").submit(function() {
        var message_wall = $(this).children('input[type="text"]').attr('value');
        var id = $(this).children('input[type="hidden"]').attr('value');
        $.ajax({
            type: "POST",
            url: "index.php?leht=pildid",
            data:"message_wall="+ message_wall + "&id="+ id,
            cache: false,
            success: function(){
                $("ul#wall").prepend(""+message_wall+"", ""+id+"");
                $("ul#wall li:first").fadeIn();
                alert("Thank you for your comment!");
            }
        });
       return false;
   });
});

Answer 2

Поскольку мы не видим всех ваших form с, я не совсем уверен, но, учитывая ваш вопрос, я собираюсь предположить, что все другие формы имеют одинаковые id (form#submit_wall), что недопустимо и id должен быть уникальным в документе.

Учитывая, что вы собираетесь изменить id других форм (Я бы предложил использовать class имя, вероятно, 'submit_wall', но все зависит от вас), jQuery тоже нужно изменить.From:

$("form#submit_wall").submit(function() {

To:

$("form.submit_wall").submit(function() { // using the class-name instead of the id.

Теперь, конечно, вы столкнетесь с теми же проблемами с дубликатами id s.

Так что я быпредлагаем снова изменить id на class и изменить:

var message_wall = $('#message_wall').attr('value');
var id = $('#id').attr('value');

на:

var message_wall = $(this).find('.#message_wall').attr('value');
var id = $(this).find('.id').attr('value');

Учитывая беспорядок, который вы разместили выше, я нахожуТрудно поверить, что это все, что тебе нужно.Определенно, стоит опубликовать полную страницу (или демонстрацию на JS Fiddle или JS Bin ), чтобы полностью воспроизводил ваш код.