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。

一页上有两个表格

1 个答案: