1つのページに2つのフォームがあります

Question

私は自分のデータベースに電子メールアドレスを送信するフォームを持っています。私がそれをすると、htmlのhirer形式の情報を入力するように強制されます。私が持っているコードは以下の通りです：

$('#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が働くだろう、とあなたは2つのだけのフォームを持っている場合、あなたは確かにそれを行うことができます。

ジェネリック版を作成したい場合は、それをクラスで行うことができます。 #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; 
}); 

この一般的な形式は、次の2つのフォームの1ジャバスクリプトを提供します。