質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.33%

  • JavaScript

    17608questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    9626questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • Monaca

    1013questions

    「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

  • ニフティクラウドmobile backend

    21questions

    ニフティクラウドmobile backend (mBaaS)はニフティが提供するBaasサービスです。プッシュ通知、データストア、ファイルストア、会員管理・認証機能などのバックエンド機能をクラウドから提供しています。 Andoird/iOS/JavaScript/Unityと各種SDKに対応しています。

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

解決済

回答 4

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 4,879
退会済みユーザー

退会済みユーザー

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

https://teratail.com/questions/112

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

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


前提・実現したいこと

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

発生している問題・エラーメッセージ

ボタンを押しても処理が行われません。
エラーはmonacaデバッガーを使っていますが出ていません。

ソースコード

<script language="javascript">
            $(function(){
            //mBaaSの初期化
            var application_key = "";
            var client_key = "";
            var ncmb = new NCMB(application_key, client_key);
            
            //ログイン・新規登録への移動
            $(".btn").on("click", function actionA(){
                document.getElementById("form").action = "./mail.html";
                
                var username = $("#username").val();
                var password = $("#password").val();
               
                //ログイン
                ncmb.User.login(username, password)
                .then(function(){
                    //ログイン成功
                    alert("ログイン成功");
                    alert("メールフォームに移動します。");
                    location.href = "./mail.html";
                })
                .catch(function(){
                    //ログイン失敗
                    alert("ログイン失敗");
                    
                })
    });
            $(".btn").on("click",function actionB(){
                document.getElementById("form").action = "./newuser.html";
                alert("新規登録フォームに移動します。");
                location.href = "./newuser.html";
            });
});
    </script>

 <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="actionA();"/><br />
        <input type="submit" value="新規登録" onclick="actionB();"/><br />
     </form>

補足情報

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

numb.User.loginですが、これで間違いないと思われます。
http://mb.cloud.nifty.com/doc/current/sdkguide/javascript/user.html
参考はこちらです。
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • Lhankor_Mhy

    2015/10/22 11:09

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

    キャンセル

  • yunn

    2015/10/22 15:28

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

    キャンセル

  • 退会済みユーザー

    退会済みユーザー

    2015/10/22 15: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 15:47

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

    キャンセル

回答 4

checkベストアンサー

0

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/10/22 11:44

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

    キャンセル

  • 2015/10/22 11:57

    どこまで動くのか、alertなりなんなり出しながら確認されてますか?
    functionも呼ばれない状態ですか?

    <div class="btn">の中にあるボタンを押した時に反応させるなら、それはそれで書き方が違うし、submitボタンじゃなくてbuttonのほうが素直になるかも知れないですね。

    キャンセル

  • 2015/10/22 15:17

    alertは適宜入れていますが、そちらも動作しないので、たぶんfunctionも呼ばれてないです。

    え、書き方違うんですか?
    独学でやってるのでどこかで変になっちゃったのかもしれませんorz

    キャンセル

  • 2015/10/22 15:38

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

    キャンセル

  • 2015/10/23 10:00

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

    キャンセル

0

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

        <input type="button" value="ログイン" onclick="actionA();"/><br />
        <input type="button" value="新規登録" onclick="actionB();"/><br />
        <input type="hidden" name="a_or_b" value="" /><br />
にして、
            $(".btn").on("click", function actionA(){
                document.getElementById("form").action = "./mail.html"; 

            $(".btn").on("click", function actionA(){
                document.form.action = "./mail.html"; 
                document.form.a_or_b.value = "a"; 
...
...
                document.form.submit(); 
            }
みたいにする感じですが、いかがでしょうか。

<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 11:48

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

    キャンセル

  • 2015/10/22 12:52 編集

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

    キャンセル

  • 2015/10/22 15:12

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

    キャンセル

  • 2015/10/22 15:18

    訂正しました。

    キャンセル

0

ボタンによって遷移を変更されるだけであれば以下のような形でいかがでしょうか。
<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 11:53

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

    キャンセル

  • 2015/10/22 12: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 15: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 15:11

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

    キャンセル

0

<script language="javascript">
            
    //ログイン・新規登録への移動
    $("#a").on("click", function(e){
        e.preventDefault();
        var username = $("#username").val();
        var password = $("#password").val();
       
        //ログイン
        ncmb.User.login(username, password)
        .then(function(){
            //ログイン成功
            alert("ログイン成功");
            alert("メールフォームに移動します。");
            location.href = "./mail.html";
        })
        .catch(function(){
            //ログイン失敗
            alert("ログイン失敗");
            
        })
    });
    $("#b").on("click",function(e){
        e.preventDefault();
        alert("新規登録フォームに移動します。");
        location.href = "./newuser.html";
    });
</script>

<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="ログイン" id="a"/><br />
    <input type="submit" value="新規登録" id="b"/><br />
</form>
ここに書かれていないコードが適切に書かれていたとして、こんな感じではないでしょうか。特にスクリプト部分はDOMreadyで動作することが必要になります。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/10/22 15:09

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

    キャンセル

  • 2015/10/22 15:25

    > あと、ここに張ったコード以外にはタイトルとstyleくらいしかない

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.33%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • JavaScript

    17608questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    9626questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • Monaca

    1013questions

    「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

  • ニフティクラウドmobile backend

    21questions

    ニフティクラウドmobile backend (mBaaS)はニフティが提供するBaasサービスです。プッシュ通知、データストア、ファイルストア、会員管理・認証機能などのバックエンド機能をクラウドから提供しています。 Andoird/iOS/JavaScript/Unityと各種SDKに対応しています。