1つのformで複数のbuttonを処理する方法

１つのformで複数のbuttonを処理する方法を教えてください。

こちらの質問を参考に自分で組んでは見たのですが、うまく動いてくれません。

間違いなどありましたらご指摘お願いします。

###前提・実現したいこと
JavaScriptでログインをするシステムを作っています。
aのボタンを押したらaの処理を行い、
ｂのボタンを押したらｂの処理を行う
という機能を実装したいのですがうまく動きません。

###発生している問題・エラーメッセージ
ボタンを押しても処理が行われません。
エラーはmonacaデバッガーを使っていますが出ていません。
###ソースコード

###補足情報
仕様が実現できるようであればsubmitにこだわりません。
もちろんsubmitであればなおよいですが。
ご指導、ご鞭撻のほどよろしくお願いします。

numb.User.loginですが、これで間違いないと思われます。
http://mb.cloud.nifty.com/doc/current/sdkguide/javascript/user.html
参考はこちらです。

Lhankor_Mhy

2015/10/22 02:09

dcument は document の typo ですか？　また、ググってみたところ、ncmb.User は NCMB.User ではないかと思ったのですが、こちらは小文字で大丈夫ですか？

yunn

2015/10/22 06:28

私はニフティクラウドって初めて見るのでSDKガイドをちらっと見ただけでお聞きしますが、ニフティクラウドが利用可能な状態なんですよね？で、 var ncmb = new NCMB(apikey, clientkey); に当たる部分は記述されていませんが存在してるんですよね？

退会済みユーザー

2015/10/22 06:32

yunnさん＞すいません、そこは質問では削ってあります。最初のほうは <script language="javascript"> $(function(){ //mBaaSの初期化 var application_key = ""; var client_key = ""; var ncmb = new NCMB(application_key, client_key); となります

yunn

2015/10/22 06:47

了解です。なら、動きそうですね。 ariakiさんとのやりとりの『ログイン失敗』になるというコードが一番動作してるんじゃないかと思うので、loginのcatchでerrを見てみるのが一番早いかも？

行動規範の内容に同意します

回答4件

HTML
1<script language="javascript">
2            
3    //ログイン・新規登録への移動
4    $("#a").on("click", function(e){
5        e.preventDefault();
6        var username = $("#username").val();
7        var password = $("#password").val();
8       
9        //ログイン
10        ncmb.User.login(username, password)
11        .then(function(){
12            //ログイン成功
13            alert("ログイン成功");
14            alert("メールフォームに移動します。");
15            location.href = "./mail.html";
16        })
17        .catch(function(){
18            //ログイン失敗
19            alert("ログイン失敗");
20            
21        })
22    });
23    $("#b").on("click",function(e){
24        e.preventDefault();
25        alert("新規登録フォームに移動します。");
26        location.href = "./newuser.html";
27    });
28</script>
29
30<form id="form" name="form" action="">
31    <input type="text" id="username" placeholder="User name" /><br />
32    <input type="password" id="password" placeholder="Password" /><br />
33    <input type="submit" value="ログイン" id="a"/><br />
34    <input type="submit" value="新規登録" id="b"/><br />
35</form>

ここに書かれていないコードが適切に書かれていたとして、こんな感じではないでしょうか。特にスクリプト部分はDOMreadyで動作することが必要になります。

投稿2015/10/22 02:53

Lhankor_Mhy

総合スコア36074

退会済みユーザー

2015/10/22 06:09

こちらを参考にして書き換えてみたのですが、動作しませんでした。ボタンを押しても反応がないので、scriptの中身が読み込まれていないのか・・・？あと、ここに張ったコード以外にはタイトルとstyleくらいしかないので書き間違いに関しては大丈夫だと思います。

Lhankor_Mhy

2015/10/22 06:25

> あと、ここに張ったコード以外にはタイトルとstyleくらいしかないそれは問題があるかもしれませんね……　どこかに var ncmb = new NCMB(apikey, clientkey); というコードがないと動かないはずですし、jQueryを使っているようなのでその読み込みをしている部分もあるはず。

行動規範の内容に同意します

ボタンによって遷移を変更されるだけであれば以下のような形でいかがでしょうか。

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
function actionA(){
  $("#form").attr("action", "http://www.google.co.jp/");
  return true;
}
function actionB(){
  $("#form").attr("action", "http://www.yahoo.co.jp/");
  return true;
}
</script>
</head>
<body>
<form id="form" name="form" action="">
        <input type="text" id="username" placeholder="User name" /><br />
        <input type="password" id="password" placeholder="Password" /><br />
        <input type="submit" value="ログイン" onclick="return actionA();"/><br />
        <input type="submit" value="新規登録" onclick="return actionB();"/><br />
</form>
</body>
</html>

投稿2015/10/22 02:04

退会済みユーザー

総合スコア0

退会済みユーザー

2015/10/22 02:53

同じプログラム上で飛ばしたいのですが、location.href ではだめなのでしょうか？

退会済みユーザー

2015/10/22 03:06

たとえば、 location.href="http://www.google.co.jp"; のようにすると指定したURLに遷移させる事はできますが、パラメータを引き回す事ができません。 ※以下のようにすれば引き回す事は可能ですが実装としては汚いです。 location.href="http://www.google.co.jp/" + "?username="+encodeURIComponent($("#username").val()) + "&c="+encodeURIComponent($("#password").val()); formのsubmitというのは(1)値を引き回して(2)次画面に遷移するという機能をもっていますので、その両機能をわざわざ殺してまで location.hrefを使うというのはナンセンスな実装です。それでしたら<form>は不要ですし<input type="button"...>とすべきです。今回はフォームに設定された情報（username,pass）をそのまま使って次の画面に引き回す（submitする）ご要望があると思い回答させていただきました。以下のように記載すれば期待の動作となるかとおもいます。 function actionA(){ ncmb.User.login(username, password) .then(function(){ //ログイン成功 alert("ログイン成功"); alert("メールフォームに移動します。"); return true; }) .catch(function(){ alert("ログイン失敗"); return false; }) }

退会済みユーザー

2015/10/22 06:05

下記のようにプログラムを書き換えたのですが、ボタンを押す前に新規登録画面に移動します。ログイン失敗とアラートが出ます。何が問題なんですかね。。。 //ログイン処理・新規登録画面への移動 function actionA(){ $("#form").attr("action", "./mail.html"); var username = $("#username").val(); var password = $("#password").val(); //ログイン ncmb.User.login(username, password) .then(function(){ //ログイン成功 alert("ログイン成功"); alert("メールフォームに移動します。"); return true; }) .catch(function(){ //ログイン失敗 alert("ログイン失敗"); return false; }) }); function actionB(){ $("#form").attr("action", "./newuser.html"); alert("新規登録フォームに移動します。"); return true; });

退会済みユーザー

2015/10/22 06:11

上記のJavascriptですとfunctionの終末が"}"ではなく"});"になっているのでエラーになると思われます。開発コンソールを開いて確認してみてください。構文エラーが発生していませんか？

行動規範の内容に同意します

html
1        <input type="submit" value="ログイン" onclick="actionA();"/><br />
2        <input type="submit" value="新規登録" onclick="actionB();"/><br />

は

html
1        <input type="button" value="ログイン" onclick="actionA();"/><br />
2        <input type="button" value="新規登録" onclick="actionB();"/><br />
3        <input type="hidden" name="a_or_b" value="" /><br />

にして、

javascript
1            $(".btn").on("click", function actionA(){
2                document.getElementById("form").action = "./mail.html";

を

javascript
1            $(".btn").on("click", function actionA(){
2                document.form.action = "./mail.html"; 
3                document.form.a_or_b.value = "a"; 
4...
5...
6                document.form.submit(); 
7            }

みたいにする感じですが、いかがでしょうか。

例えば、隠し送信パラメータ<input type="hidden" name="a_or_b" />に、AボタンBボタンのどれを押したかを示す値を納めてからsubmitしてはいかがでしょうか。
あわせて、<input type="submit" ～onclick="" />はすべて<input type="button" ～onclick="" />にしましょう。
document.getElementById("form").submit();にてフォーム送信できますので。

投稿2015/10/22 02:00

編集2015/10/22 03:52

退会済みユーザー

総合スコア0

退会済みユーザー

2015/10/22 02:48

すいません、知識足らずゆえに、ちょっとなにいってるかわかんないです状態ですorz もうちょっと詳しく解説していただけませんか？ AボタンBボタンのどれを押したか示す値はどうやって取得したらいいのですか？

退会済みユーザー

2015/10/22 06:18 編集

回答に加筆しました。ご確認ください。なお、フォームに`name="form"`ってつけるとハマるので、`name="frm"`あるいは`name="f"`などと予約語を使わない書き方にすると良いです。 input要素にはidの他にもnameをつけるのをお忘れなく。

退会済みユーザー

2015/10/22 06:12

丁寧な解説ありがとうございます！予約後は予約語の打ち間違いと認識していいのでしょうか？勉強になりました。

退会済みユーザー

2015/10/22 06:18

訂正しました。

行動規範の内容に同意します

ベストアンサー

dcument とか ;抜けとかは転記ミスですか？

基本的には
$(".btn").on("click", function actionA(){ → function actionA(){
でいいように思いますが。

…そもそも btn ってどこから来たんでしょう。。。

投稿2015/10/22 01:58

yunn

総合スコア144

退会済みユーザー

2015/10/22 02:44

ずっと<div class="btn">で考えていたので失念していました。ご指摘ありがとうございます。 function actionA(){ と直してみたのですが、残念ながら動きませんでした。

yunn

2015/10/22 02:57

どこまで動くのか、alertなりなんなり出しながら確認されてますか？ functionも呼ばれない状態ですか？ <div class="btn">の中にあるボタンを押した時に反応させるなら、それはそれで書き方が違うし、submitボタンじゃなくてbuttonのほうが素直になるかも知れないですね。

退会済みユーザー

2015/10/22 06:17

alertは適宜入れていますが、そちらも動作しないので、たぶんfunctionも呼ばれてないです。え、書き方違うんですか？独学でやってるのでどこかで変になっちゃったのかもしれませんorz

yunn

2015/10/22 06:38

本題とは主旨が異なるので、単なるTipsとして。書き方が違う、というか、<div class="btn"><input type="button" /></div> のようなHTMLがあったとして、中のボタンを押した時に動作させるのなら、 $(".btn > input").on("click",～とかになります。でもボタンにid付けてあげるのが一番だと思いますけど。 $(".btn").on("click",～だと、div全体がクリックに反応してしまいます。

退会済みユーザー

2015/10/23 01:00

div全体がクリックに反応してしまうという指摘を受けて、inputにidをつけて$(".btn>#btn1").on("click",~という風に書き直してプログラム自体もそれにあわせて組みなおしてみたんですが、正常に作動しました！ｗ

行動規範の内容に同意します

あなたの回答