返信フォームが正しく機能していない

Question

私はAJAXを介して提出しようとしているログオンフォームを持っています。私は完全に機能している登録のための同様のフォームを持っています。しかし、偽の声明は発射されていません。

形で私のログは次のようになります。

<form name="loginForm" id="loginForm" action="userSystem/userSystem.php" method="post"> 
    <div class="loginTable"> 
     <div class="loginRow"> 
     <div class="loginCell"><label for="username">Username:</label></div> 
      <div class="loginCell"><input type="text" name=="username" id="loginFormUser"></div> 
     </div> 
     <div class="loginRow"> 
     <div class="loginCell"><label for="password">Password:</label></div> 
      <div class="loginCell"><input type="password" name="password" id="loginFormPass"></div> 
     </div> 
     <div class="loginRow"> 
     <div class="loginCell">&nbsp;</div> 
     <div class="loginCell"><input type="submit" name="submit" value="Log In" id="loginFormSubmit"></div> 
     </div> 
    </div> 
    </form> 
</section> 
<section id="loginBarRegForm"> 
    <h1>Step Two</h1> 
    <form name="regForm" id="regForm" action="usersystem/register.php" method="post"> 
    <div class="loginTable"> 
     <div class="loginRow"> 
     <div class="loginCell"><label for="r_username">Username:</label></div> 
     <div class="loginCell"><input type="text" name="r_username" id="r_username"></div> 
     <div class="loginCell"><span id="r_usernameFeedback"></span></div> 
     </div> 
     <div class="loginRow"> 
     <div class="loginCell"><label for="r_password">Password:</label></div> 
     <div class="loginCell"><input type="password" name="r_password" id="r_password"></div> 
     <div class="loginCell"><span id="r_passwordFeedback"></span></div> 
     </div> 
     <div class="loginRow"> 
     <div class="loginCell"><label for"r_vpassword">Verify Password</label></div> 
     <div class="loginCell"><input type="password" name="r_vpassword" id="r_vpassword"></div> 
     <div class="loginCell"><span id="r_vpasswordFeedback"></span></div> 
     </div> 
     <div class="loginRow"> 
     <div class="loginCell"><label for="email">Email:</label></div> 
     <div class="loginCell"><input type="text" name="r_email" id="r_email"></div> 
     <div class="loginCell"><span id="r_emailFeedback"></span></div> 
     </div> 
     <div class="loginRow"> 
     <div class="loginCell"></div> 
     <div class="loginCell"><input type="submit" name="r_submit" value="Register" id="r_submit"></div> 
     <div class="loginCell"></div> 
     </div> 
     </div> 
    </form> 

、送信ボタンがこれまでのところ、これが最もについてです

$("#loginFormSubmit").click(function() { 
    form_data = { 
    username: $("#loginFormUser").val(), 
    password: $("#loginFormPass").val(), 
    operation: "login", 
    is_ajax: 1 
    } 

    $.ajax({ 
    type: "POST", 
    url: "userSystem/userSystem.php", 
    data: form_data, 
    dataType: json, 
    success: function(data) { 
     if(data.success) { 
     $("#loginBarLoginForm").fadeOut("slow"); 
     $("#userDetailsUsername").html(data.username); 
     $("#userDetailsEmail").html(data.email); 
     $("#userDetails").fadeIn('slow'); 
     } else { 
     $("#loginbarLoginForm").fadeOut("slow"); 
     $("#loginBoxResponseDiv").html(data.message); 
     $("#loginBoxResponseFrame").fadeIn("slow"); 
     } 
    } 
    }); 
    return false; 
}); 

にクリックされたときに私が実行しようとしているのjavascript私が開発した徹底的なアプリケーションですが、falseを返す理由があるインスタンスではうまくいくが、別のインスタンスではうまくいきません。それらはデータを除いてほぼ同じ機能です。

はあなたが提供することができます任意の助けをありがとう:)

EDIT：更新されたコードを。

$("#loginFormSubmit").click(function() { 
    console.log("Click Event Firing"); 
    var form_data = { 
     username: $("#loginFormUser").val(), 
     password: $("#loginFormPass").val(), 
     operation: "login", 
     is_ajax: 1 
    }; 
    console.log("variables Assigned " + form_data['username'] + " " + form_data ['password']); 

    $.ajax({ 
     type: "POST", 
     url: "userSystem/userSystem.php", 
     data: form_data, 
     success: function(data) { 
      console.log("Ajax Working"); 
      if(data.success === true) { 
      $("#loginBarLoginForm").hide(); 
       $("#loginBoxResponseDiv").html("<p>You have been loged in " + data.username + "!"); 
       $("#loginBoxResponseFrame").fadeIn("slow"); 
      } else { 
       $("#loginBarRegForm").hide(); 
       $("#loginBoxResponseDiv").html(data.message); 
       $("#loginBoxResponseFrame").fadeIn("slow"); 
      } 
     } 
    }); 
}); 

コードはJSON応答を返すようになりましたが、成功のための関数は起動されていません。

Answer 1

私の解決策では、私はちょうど引用符が欠けていたことがわかりました。

dataType: json, 

で：私は交換するために必要な、私は解決策が所定の位置に来て、今、私のユーザーがページを更新せずにログインできるようになる、ということだたら

dataType: "json", 

。私はまだこのプロジェクトを進めるにはまだまだ長い道のりがありますが、私は正しい方向に向けるのを手伝ってくれてありがとうございます。また私は自分自身で答えを見つけることができたと感じています。しかし、私はSOのコミュニティから受け取った細かい助けとヒントのためにされていませんでしたか？皆さんは100万人に1人！

最終的な解決策はこのように見てしまった：

$("#loginFormSubmit").click(function() { 
    console.log("Click Event Firing"); 
    var form_data = { 
     username: $("#loginFormUser").val(), 
     password: $("#loginFormPass").val(), 
     operation: "login", 
     is_ajax: 1 
    }; 
    console.log("variables Assigned " + form_data['username'] + " " + form_data ['password']); 

    $.ajax({ 
     type: "POST", 
     url: "userSystem/userSystem.php", 
     dataType: "json", 
     data: form_data, 
     success: function(data) { 
      console.log("Ajax Working"); 
      console.log("data.success: " + data.success); 
      console.log("data.username: " + data.username); 
      if(data.success === true) { 
       console.log("data.success was true"); 
       $("#loginBarLoginForm").hide(); 
       $("#loginBoxResponseDiv").html("<p>You have been loged in " + data.username + "!"); 
       $("#loginBoxResponseFrame").fadeIn("slow"); 
       $("#notLoggedIn").fadeOut("slow"); 
       $("#currentlyLoggedIn").fadeIn("slow"); 
       $.cookie("username", data.username, {expires: 7, path: "/"}); 
       $.cookie("id", data.id, {expires: 7, path: "/"}); 
       $.cookie("email", data.email, {expires: 7, path: "/"}); 
       $.cookie("user_level", data.user_level, {expires: 7, path: "/"}); 
       $.cookie("active", data.active, {expires: 7, path: "/"}); 
       $.cookie("reg_date", data.reg_date, {expires: 7, path: "/"}); 
       $.cookie("last_login", data.last_login, {expires: 7, path: "/"}); 
       $("#cookieUsername").html($.cookie("username")); 
       $("#cookieID").html($.cookie("id")); 
       $("#cookieEmail").html($.cookie("email")); 
       $("#cookieUserLevel").html($.cookie("user_level")); 
       $("#cookieActive").html($.cookie("active")); 
       $("#cookieRegDate").html($.cookie("reg_date")); 
       $("#cookieLastLogin").html($.cookie("last_login")); 
      } else { 
       console.log("data.success was false"); 
       $("#loginBarRegForm").hide(); 
       $("#loginBoxResponseDiv").html(data.message); 
       $("#loginBoxResponseFrame").fadeIn("slow"); 
      } 
     } 
    }); 
}); 

Answer 2

return falseハンドラ内ではなく、ajaxの外側で、送信のデフォルト動作を防止します。必要に応じて

$("#loginForm").on('submit',function() { //attach handler to form 
    form_data = {...}      //form data 
    $.ajax({...});      //fire ajax 
    return false;       //prevent default action 
}); 

Answer 3

戻りfalseが働いているが、問題は、成功の方法がように、AJAX呼び出しで、サーバー側からの成功のメッセージがあるたびに、暗黙的にjQueryのによって呼び出されるコールバック、ということですあなたはそれから値を取得するためのハンドルを持っていないので、別のメソッドでロジックを定義し、メソッドコールをコールバックにする必要があります。コールバックとして操作するハンドルがありません。

$.ajax()呼び出しをfalseに戻す場合は、戻り値false文をsuccessメソッドの範囲外に削除できます。

Answer 4

ちょっとしたアイデアですが、入力のタイプを「送信」から「ボタン」に変更してください。

また、デバッグの目的でクリックイベントを動的に割り当てないでください。これにあなたのJSを変更します。

function NamedFunction() { 
    form_data = { 
    username: $("#loginFormUser").val(), 
    password: $("#loginFormPass").val(), 
    operation: "login", 
    is_ajax: 1 
    } 

    $.ajax({ 
    type: "POST", 
    url: "userSystem/userSystem.php", 
    data: form_data, 
    dataType: json, 
    success: function(data) { 
     if(data.success) { 
     $("#loginBarLoginForm").fadeOut("slow"); 
     $("#userDetailsUsername").html(data.username); 
     $("#userDetailsEmail").html(data.email); 
     $("#userDetails").fadeIn('slow'); 
     } else { 
     $("#loginbarLoginForm").fadeOut("slow"); 
     $("#loginBoxResponseDiv").html(data.message); 
     $("#loginBoxResponseFrame").fadeIn("slow"); 
     } 
    } 
    }); 
    return false; 
} 

その後、私はあなたがそのように保つ推薦しないんだけど、おそらくこれらの2回の変更で、あなたが本当に何を追跡することができます送信ボタン

onclick="NamedFunction(); return false;" 

にこれを追加ハプニング。