Две формы на одной странице

Question

У меня есть форма, которая отправляет адрес электронной почты в мою базу данных, и она отлично работает, за исключением случаев, когда я хочу разместить более одного из них на странице.Когда я делаю это, то это заставляет меня вставлять информацию о том, что когда-либо формируется в html.У меня есть следующий код:

$('#signup').submit(function() {
    $('#response').html('Adding email address...');

    $.ajax({
        url: 'send.php',
        data: 'ajax=true&email=' + escape($('#email').val()),
        success: function(msg) {
            $('#signupResponse').html(msg);
        }
    });

    return false;
});

HTML:

<form id="signup" class="clear" action="" method="get">
    <label for="mce-EMAIL">Get the latest Poster Facts!</label>
    <input type="submit" value="Hit Me" class="signupButton" name="subscribe" id="mc-embedded-subscribe">
    <input type="text" name="email" class="signupEmail" alt="Enter Email Address" />
</form>  
<span id="signupResponse"></span>

Теперь для меня самый простой способ исправить это - поставить тот же точный код, но изменить#signup и #signupResponse для чего-то еще, но я думаю, что должен быть лучший способ.

Спасибо за помощь

Answer 1

Изменение #signup и #signupResponse будет работать, и если у вас есть только две формы, вы, безусловно, можете это сделать.

Если вы хотите создать универсальную версию, вы можете сделать это с помощью классов.Измените #signup на .ajaxForm (или что-то в этом роде).В зависимости от того, где находится #signupresponse, вы можете сделать что-то вроде .parent () или .children ('. Response'), чтобы сослаться на него.Вы также можете использовать $ (this) в функции для ссылки на выбранную форму, а не на все формы.

Так, например, если ваша структура

<div class="ajax-form">
    <form>
    ...
    <input type="text" name="email" class="email" />
    <input type="submit" value="Submit" />
    </form>
    <span class="response"></span>
    <span class="signup-response"></span>
</div>

Вы можете сделать:

$('.ajax-form form').submit(function() {
    $(this).parent().children('.response').html('Adding email address...');

    $.ajax({
        url: 'send.php',
        data: 'ajax=true&email=' + escape($(this).children('.email').val()),
        success: function(msg) {
            $(this).parent().children('.signup-response').html(msg);
        }
    });

    return false;
});

Этот универсальный формат дает вам один javascript для двух форм.