размещать мульти формы с Ajax и php на одной странице

Question

У меня есть простой скрипт ajax, который без проблем отправляет данные в php файл index.php

    <script type="text/javascript">
      $(function() {
        $('#submit').click(function() {
        $('#container').append('<img src="img/loading.gif" alt="Currently Loading" id="loading" />');

            var name = $('#name').val();
            var email = $('#email').val();
            var comments = $('#comments').val();

            $.ajax({
                url: 'submit_to_db.php',
                type: 'POST',
                data: 'name=' + name + '&email=' + email + '&comments=' + comments,

                success: function(result) {
                    $('#response').remove();
                    $('#container').append('<p id="response">' + result + '</p>');
                    $('#loading').fadeOut(500, function() {
                        $(this).remove();
                    });

                }
            });

            return false;
        });

      });
    </script>

с на той же странице у меня есть другая форма, которую нужно было отправить, поэтому я не знаю, как это сделать, не вступая в конфликт с этой функцией, которую я уже использую? Кстати, он не будет обрабатываться в том же php-файле, который будет использовать другой файл

Answer 1

Не понимаю, в чем смысл. Какие у вас проблемы с отправкой более одной формы? Вы ссылаетесь на элементы по идентификатору.

Обратите внимание, что вы действительно должны изменить свой код для перехвата $('#form-id').submit(), а не события $('#submit').click, потому что форму можно отправить также с помощью клавиши ввода или с помощью обратных вызовов javascript, а не только с помощью кнопки отправки.

В вашем коде, в чем проблема при выполнении чего-то подобного

$(function() {
        $('#other-form-id').submit(function() {
            $.ajax({
                url: 'other-php-script.php',
                type: 'POST',
                data: 'name=' + name + '&email=' + email + '&comments=' + comments,

                success: function(result) {
                    // your success handling
                }
            });
            return false;
        });
      });

Это сработает, поскольку Dom ID уникален по всему документу.

Кстати, я настоятельно советую вам использовать этот замечательный плагин для управления формой ajax, чтобы сохранить ваш код js чище и проще. С этим ваш код может быть переписан как:

$(document).ready(function() { 
        // bind 'myForm' and provide a simple callback function 
        $('#myForm').ajaxForm(function() { 
            $('#response').remove();
            $('#container').append('<p id="response">' + result + '</p>');
            $('#loading').fadeOut(500, function() {
                $(this).remove();
            });                
        }); 
    });