一个页面上的两种形式

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。