2012-02-15 10 views
0

jQueryのAJAXでフォームを送信しています。jQuery、AJAX - 間違った機能をトリガーする

$('#newUser').submit(function() { 
var dataString = $(this).serialize(); 

$.ajax({ 
    type: "POST", 
    url: "/includes/classes/handler.php?do=addLogin", 
    data: dataString, 
    success: function(returnedData){ 

     if(returnedData){ 
      $('.errorMessage').fadeIn().html(returnedData); 
     } else { 
      $('.sideBarNewUserWrap').fadeOut(); 
     } 

    } 
}); 
return false; 
}); 
// 

をして、私はこのような別の1持っています:私はこのようないくつかのフォームの使用してAJAXを抱えている

$('#addLookup').submit(function() { 
var dataString = $(this).serialize(); 

$.ajax({ 
    type: "POST", 
    url: "/includes/classes/handler.php?do=addLookup", 
    data: dataString, 
    success: function(returnedData){ 

     if(returnedData){ 
      $('.errorMessage').fadeIn().html(returnedData); 
     } else { 
      window.location.href = ""; 
     } 

    } 
}); 
return false; 
}); 

をそして、いくつかの理由で、私は#をトリガーすることをwan'tについてnewUserは#addLookupをトリガーしています。 #addLookupを削除した場合、#newUserにはAJAX OR jQueryが実行されません(ブラウザは「submit」をクリックするとちょっとリフレッシュされます)。

フォームは次のようになります。

<form method='post' action='#' id='newUser'></form> 

または

<form method='post' action='#' id='addLookup'></form> 

をどのようにこれをすることができますか?私は2時間同じコードを見てきましたが、何が間違っているのか分かりません。 2つのフォームが同じページ上にある場合

更新

#addLookupにのみトリガされます。 #newUserがページに単独で立っている場合、AJAXは適切な機能を起動します。

問題はSから入ってきたフルHTML

<form method='post' action='#' id='addLookup'> 

    <div id='tilfojOpslagClose'><img src='/includes/images/design/btn/closeWindow-btn.png'></div> 

    <div class='successMessage'></div> 
    <div class='errorMessage'></div> 


    <div id='tilfojOpslagHeader'> 
     <input type='text' name='lookupHeader' id='lookupHeader' value='Skriv en overskrift'> 
    </div> 

    <div id='tilfojOpslagExpand'> 

     <div style='float:left;'> 
      <label>Præsentations tekst (bliver vist på forsiden)</label> 
       <textarea name='lookupSubHeader' id='lookupSubHeader' maxlength='100'></textarea> 
     </div> 
      <span id='lookupSubHeaderCharsLeftOutput'>Du mangler <strong>50</strong> tegn</span> 

     <div style='float:left;width:618px;margin:3px 0 0 0;'> 
      <textarea name='lookupContent' id='lookupContent' style='height:100px;'></textarea> 
     </div> 

     <div id='tilfojOpslagBottom'> 
      <div id='tilfojOpslagSubmit'><input type='submit' value='Opret mit opslag'></div> 
     </div> 
</form> 

そして#newUser

<form method='post' action='#' id='newUser'> 
     <fieldset> 
      <legend>Ny bruger</legend> 
       <label>Brugernavn</label> 
        <input type='text' name='username' id='username' placeholder='Brugernavn vil forekomme på siden, som et alias'> 
       <label>E-mail</label> 
       <label style='color:#f00;font-size:8px;'>Ja, du skal skrive en gyldig e-mail. Du modtager et aktiverings link.</label> 
        <input type='text' name='email' id='email' placeholder='E-mail - en del af dit login'> 
       <label>Adgangskode</label> 
        <input type='password' name='password' id='password' placeholder='Adgangskode - en del af dit login'> 
       <input type='hidden' name='salt' id='salt' value='<?=uniqid(mt_rand())?>'> 
       <input type='submit' value='Opret mig'> 

       <div class='errorMessage'></div> 
       <div class='successMessage'></div> 
     </fieldset> 
     </form> 

UPDATE

<?if($_SESSION['loggedIn']){?> 
    <form action='' method='' id='addLookup'> 
<?} else {?> 
    <input type='submit' value='something'> 
    </form> 
<?}?> 
+0

完全なHTMLコードを表示してください – gdoron

+0

ちょっと質問がありますが、フォームの投稿を開始していますか?投稿をトリガーするサブミット/ボタン/アンカー要素はどこにありますか? – FarligOpptreden

+2

私はそれらの2つのフォームが**ネストされていないことを願っています** ... – gdoron

答えて

1

用UBMITボタンの動作。フォーム内の特定の送信は、それを含むフォームのみを送信します。私は速くそれを示すjsFiddleを集めました。フォームに含まれていない送信ボタンをトリガーすると、フォームのどちらも送信されません。特定のフォーム内にある特定の送信ボタンをトリガーすると、そのフォームのみが送信されます。

のAlの代替を手動で送信ボタンにOnClickイベントハンドラを取り付けることにより、両方のフォームを投稿するかもしれない...

+0

私はあなたの答えを理解するから:特定のフォーム内の送信ボタンは、フォームIDの機能をトリガーします。そして、それは私がすでにそれを得た方法なので、なぜそれが機能していないのか分かりません。 – skolind

+0

それが入っているフォームを提出します。マークアップをもう一度読んでください – gdoron

+0

いいえ...あなたのコードは**間違った**です。彼のコードから[JSfiddle](http://jsfiddle.net/n8jXt/)を参照してください – gdoron

1

はまた、あなたがフォームの両方のための単一のハンドラを記述することができ提出イベントをキャンセルするpreventDefaultを使用してみてください。この

$('#newUser,#addLookup').submit(function(e){ 
    e.preventDefault(); 
    var dataString = $(this).serialize(); 
    var id = $(this).attr('id'); 

    $.ajax({ 
     type: "POST", 
     url: "/includes/classes/handler.php?do="+id, 
     data: dataString, 
     success: function(returnedData){ 
      if(returnedData){ 
       $('.errorMessage').fadeIn().html(returnedData); 
      }else{ 
       // include as per your need 
      } 
     } 
    }); 
}); 
-2

を試してみてください、私は正確にあなたの問題を取得していないが、あなたが(GEのGETになっている)URLに渡されるパラメータを指定してPOSTを行っているようです。だから紛争があるようだ。それはすべての問題の母親かもしれません。

type: "POST", 
url: "/includes/classes/handler.php?do=addLookup", 
+0

POSTリクエストでdatastringを使用することができます! – gdoron

関連する問題