一個頁面上的兩種形式

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。