2016-12-09 10 views
3

jQueryの$.post()でデータを送信するフォームがあります。電子メールとパスワードの入力方法の検索

{state: true, message: 'Some Message'} 

しかし、私はフォームフィールドを送信することはできません。エンコードされたときに、このようになりますと、正常に動作します

header('Content-type: javascript/json'); 
echo json_encode(['state' => true, 'message' => 'Some Message']); 
exit; 

:PHPファイルは、この形式でレスポンスを返します。私は関数を使ってみましたが、コンソールにundefinedを返します。ここで

は私のコードです:

$(document).ready(function() { 
 

 
    var Member = { 
 

 
    login_form: $('#login'), 
 
    create_form: $('#register'), 
 
    response: false, 
 
    response_message: '', 
 

 
    login: function() { 
 
     var email = this.login_form.find('input[type=email]').val(); 
 
     var password = this.create_form.find('input[type=password]').val(); 
 
     this.request('/members/login', { 
 
     email: email, 
 
     password: password 
 
     }); 
 
    }, 
 
    create: function() { 
 
     var email = this.create_form.find('input[type=email]').val(); 
 
     var password = this.create_form.find('input[type=password]').val(); 
 
     this.request('/members/create', { 
 
     email: email, 
 
     password: password 
 
     }); 
 
    }, 
 
    request: function(uri, params) { 
 
     $.post(uri, params) 
 
     .done(function(r) { 
 
      Member.response = r.state; 
 
      if (!r.state) { 
 
      Member.response_message = r.message; 
 
      } 
 
     }); 
 
    }, 
 
    getEmail: function() { 
 
    \t return this.create_form.find('input[type=email]').val(); 
 
    }, 
 
    getPassword: function() { 
 
    \t return this.create_form.find('input[type=password]').val(); 
 
    } 
 

 
    }; 
 
    
 
    $('#submit').click(function() { 
 
    \t Member.login(); 
 
    console.log('[L_CTRL] Response : ' + Member.response_message); 
 
    console.log('[L_CTRL] Email : ' + Member.getEmail()); 
 
    console.log('[L_CTRL] Password : ' + Member.getPassword()); 
 
    }); 
 

 
});
input { 
 
    margin: 5px; 
 
    background: none; 
 
    padding: 5px; 
 
    border: 1px solid #000; 
 
    width: 80%; 
 
} 
 

 
button { 
 
    padding: 5px; 
 
    border: 1px solid #000; 
 
    background: none; 
 
    cursor: pointer; 
 
} 
 

 
button:hover { 
 
    background: #000; 
 
    color: #fff; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<h1> 
 
Login 
 
</h1> 
 
<form id='login'> 
 
<input type='email' placeholder='Enter your email address...'> 
 
<input type='password' placeholder='Enter your unique password...'> 
 
<button type='button' id='submit'> 
 
Go 
 
</button> 
 
</form>

誰でも入力フィールドのval()にアクセスするには正しい方向に私を指すもらえますか?ありがとうございました。

アップデート:私はつまり、直接それはそのIDを使用して検索したくない:

$('#email').val(); 

ID年代を形成するためのフォームから変更することができますので。あなたが前にそれを受け取る応答にアクセスしようとしている

+0

PHPの出力はJSONオブジェクトです。 HTMLではありません。状態とメッセージの値を取得することはできます。 – SaidbakR

+0

私はあなたのフォームをラベルと入力名とIDで正しく作成することをお勧めします。そうでないと、意味のないフォームが作成されてしまいます。ほとんどの場合、一部のユーザーはアクセスできないでしょう – JezEmery

+0

1つのページに複数のログインフォームがあるので、私はクラスを使うことができますが、 'nearest()'のような使い慣れたメソッドを使う必要があることを知っていますので、 'find()'を簡単に見つけました。 '。login-form')@JezEmery – KDOT

答えて

2

変更:あなたが今登録フォームを選択しているので

getEmail: function() { 
     console.log(); 
     return this.login_form.find('input[type=email]').val(); 
    }, 
    getPassword: function() { 
     return this.login_form.find('input[type=password]').val(); 
    } 
+0

唯一の間違ったことは、両方の機能で "login_form"の代わりに "create_form"を使用していることです – rushil

+0

ああ、私はそれを気付かないほど長くここに座ったとは信じられません。ありがとうございました! – KDOT

+0

私は答えとして受け入れる – KDOT

2

、あなたは、成功コールバック内の値を取得しようとする必要があります

.done(function(r) { 
    Member.response = r.state; 
    if (!r.state) { 
    Member.response_message = $.parseJSON(r.message); 

    console.log('[L_CTRL] Response : ' + Member.response_message); 
    console.log('[L_CTRL] Email : ' + Member.getEmail()); 
    console.log('[L_CTRL] Password : ' + Member.getPassword()); 
    } 
}); 

How do I return the response from an asynchronous call?に見てください。

注:あなたが$.parseJSON()を使用して、応答を解析するためにきました:

Member.response_message = $.parseJSON(r.message); 

は、この情報がお役に立てば幸いです。次のように、この二つの機能

+0

当時メッセージを返信していなかったので、私はまだそれを見ていませんでした。 – KDOT

3

は、login_formcreate_formを交換し、いないログインフォーム:

getEmail: function() { 
    return this.login_form.find('input[type=email]').val(); 
    }, 
    getPassword: function() { 
    return this.login_form.find('input[type=password]').val(); 
    } 

全コード:

var Member = { 
 

 
    login_form: $('#login'), 
 
    create_form: $('#register'), 
 
    response: false, 
 
    response_message: '', 
 

 
    login: function() { 
 
     var email = this.login_form.find('input[type=email]').val(); 
 
     var password = this.create_form.find('input[type=password]').val(); 
 
     this.request('/members/login', { 
 
     email: email, 
 
     password: password 
 
     }); 
 
    }, 
 
    create: function() { 
 
     var email = this.create_form.find('input[type=email]').val(); 
 
     var password = this.create_form.find('input[type=password]').val(); 
 
     this.request('/members/create', { 
 
     email: email, 
 
     password: password 
 
     }); 
 
    }, 
 
    request: function(uri, params) { 
 
     $.post(uri, params) 
 
     .done(function(r) { 
 
      Member.response = r.state; 
 
      if (!r.state) { 
 
      Member.response_message = r.message; 
 
      } 
 
     }); 
 
    }, 
 
    getEmail: function() { 
 
    \t return this.login_form.find('input[type=email]').val(); 
 
    }, 
 
    getPassword: function() { 
 
    \t return this.login_form.find('input[type=password]').val(); 
 
    } 
 

 
    }; 
 
    
 
    $('#submit').click(function() { 
 
    \t Member.login(); 
 
    console.log('[L_CTRL] Response : ' + Member.response_message); 
 
    console.log('[L_CTRL] Email : ' + Member.getEmail()); 
 
    console.log('[L_CTRL] Password : ' + Member.getPassword()); 
 
    });
input { 
 
    margin: 5px; 
 
    background: none; 
 
    padding: 5px; 
 
    border: 1px solid #000; 
 
    width: 80%; 
 
} 
 

 
button { 
 
    padding: 5px; 
 
    border: 1px solid #000; 
 
    background: none; 
 
    cursor: pointer; 
 
} 
 

 
button:hover { 
 
    background: #000; 
 
    color: #fff; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h1> 
 
Login 
 
</h1> 
 
<form id='login'> 
 
<input type='email' placeholder='Enter your email address...'> 
 
<input type='password' placeholder='Enter your unique password...'> 
 
<button type='button' id='submit'> 
 
Go 
 
</button> 
 
</form>

関連する問題