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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

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

HTML

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

Q&A

解決済

5回答

5259閲覧

form+buttonでinputに値を入力してenterを押しても遷移しない

SugiuraY

総合スコア317

JavaScript

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

HTML

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

0グッド

0クリップ

投稿2019/06/06 23:47

編集2019/06/07 00:57

以下のようなコードを作成して、inputに値を入力してenterを押すと通常、actionが実行されると思うのですが
何も反応いたしません。

html

1<form id="login" class="login-form action="**.html" method="POST"> 2 <input type="hidden" name="login" value="login_catch"> 3 <input type="text" name="loginname" id="login_username" class="register_text" placeholder="ユーザ名"/> 4 <input type="password" name="loginpw" id="login_pass" class="register_text" placeholder="パスワード"/> 5 <button form="login" class="login_button" type="button" name="">ログインする</button> 6 <div class="login-errmsgbox"></div> 7 <p class="message message_wrapper" tabindex="0">無料でアカウントを作成する</p> 8</form>

シンプルに以下のようなコードの場合、enterを押すと適切にactionが実行され遷移いたします。

html

1<form method="post" action="**.html" id="hoge"> 2 <input type="text" name="user"> 3 <input type="text" name="pass"> 4</form> 5<button form="hoge" type="submit">push</button>

原因と解消法がわからなかったため、ご相談させてください。
よろしくお願い申し上げます。

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

x_x

2019/06/07 00:24

すでに見えてきているかと思いますが、JavaScript での解決を望むのであれば「JavaScript」タグをつけてください
SugiuraY

2019/06/07 00:47

解決済みとは致しましたが、後学のために加えさせていただきます!
guest

回答5

0

<form method="post" action="**.html" id="hoge">
<input type="text" name="user"> <input type="text" name="pass"> </form> <button form="hoge" type="submit">push</button>

当該フォーム内容を送信したいのでしたらボタンはformから外に出してはいけません。
type=buttonのまま送信したいのでしたらJavaScriptによってsubmitの指示を出します。

投稿2019/06/07 00:10

m.ts10806

総合スコア80765

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

SugiuraY

2019/06/07 00:17

コメントありがとうございます。 外に出したコードでも試しに押したところ、実行はされてしまうように思えますが、それでも文法的下記のようにform要素にbutton要素を内包すべきということでしょうか? <form method="post" action="**.html" id="hoge"> <input type="text" name="user"> <input type="text" name="pass"> <button form="hoge" type="submit">push</button> </form> また、type="button"を活かしつつの方法についても承知を致しました。 やはりそれしかないですね。。button type="submit"で再考しつつ検討します。
m.ts10806

2019/06/07 00:21

buttonを置きたくないということなのかどうなのかが分からないので、 あまり具体的な回答にはなっていなくて申し訳ないです。
m.ts10806

2019/06/07 00:25

>外に出したコードでも試しに押したところ、実行はされてしまうように思えます id="hoge"のform内容の送信にはなっていないはずですよ。 actionの指摘先がhtmlファイルだと受け取る機能がないので確認はできないでしょうけど。
miyabi_takatsuk

2019/06/07 00:37

うぉ、formの外なの見逃してました・・・。 さすがです。
SugiuraY

2019/06/07 00:37

あ、申し訳ございません。 ページの遷移をもって適切に実行できているものと鵜呑みにしていました。 今すぐに試すことができないのでphpファイルでサーバー側に値を渡せないことを 試してみようと思います!
m.ts10806

2019/06/07 00:41

miyabi_takatsukさん インデントがないと分かりづらいと思います。 最小構成のコードだから開始と閉じだけ見てればなんとか気づけないこともないです。 >SugiuraYさん はい。フォーム入力内容を送信します。 その「フォーム入力内容」は「自身が所属しているフォーム」です。 と思ったけど、「form属性」で紐づけしてるから送信できそうですね。 失礼しました。 http://www.htmq.com/html5/button.shtml >form属性 >どのフォームと関連付けるかを<form>のid名で指定
SugiuraY

2019/06/07 00:57

すみません、短いコードでもちゃんとインデントを置くべきでした。。 修正いたします。
guest

0

button要素のtypeが違うからです。
前半のtype="button"はただのボタンであって、押せるってだけの要素で、押しても何もしません。
あと、前半の方は、typeの前に半角スペースがないので、それも不都合の原因になってる可能性があります。

投稿2019/06/06 23:59

miyabi_takatsuk

総合スコア9528

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

SugiuraY

2019/06/07 00:09

コメントありがとうございます。 半角の失念は修正させて頂きました。 下記@diamond_goodwil様のコメントにも追記させて頂きましたが、button属性を維持しつつenter遷移を実現するにはJSで組むよりほかないですよね。。そもそもtype="button"にしなければならなかった設計も今更反省してはしているのですが。。
miyabi_takatsuk

2019/06/07 00:37 編集

なるほど、それででしたら、 formの方に、submitイベント付与し、初期は、submitさせないようにし、条件クリアしたら、送信する、とするのはいかがでしょうか? それであれば、buttonはtype="submit"で、エンターキーをトリガーにできるかと
SugiuraY

2019/06/07 00:56

コメントありがとうございます。 すごくヒントになりそうなのですが、1点ピントきていない点があり、是非おたずねさせてください。 "formの方に、submitイベント付与し" という点がわからなかったのですが、具体的にどのような方法なのでしょうか? 初学者のため、formの内容をsubmitするには 1) <input type="submit">を<form></form>内に設定して、クリックさせることで実行させる 2) <button type="submit>を<form></form>内に設定して、クリックさせることで実行させる 3) 何か任意の要素を設定しclickイベント等でsubmit()をJS側で処理させる しかわからず、今回は3)を使用していました。恐らくこの類の処理であろうかと推察しているのですが、formに付与するというのがどうしてもわからなかったため、ご教示いただけるととてもうれしいです!
miyabi_takatsuk

2019/06/07 01:40 編集

お調べになれば、いろいろ方法がありますが。 まず、要件を整理しましょう。 ここで重要になるのが、エンターキーをトリガーにする、送信前に確認などの処理を走らせたい、ですが、 エンターキートリガーは、ブラウザのデフォルトの機能なので、ブラウザが想定する形式のタグ構造でないと、 機能しません。矛盾するようですが、JSでのイベント付与だけでは、その機能は動きません。 (このコメントを最後まで見れば、矛盾が解消されるので、お手数ですが最後までご覧ください) つまり、1、2のどちらかが必須となります。 3について、 submitイベントは、クリックイベントではありません。 あくまでsubmitイベントです。 もちろんinput type="submit"ないしbutton type="submit"をクリックで発動しますが、 あくまで、それはHTMLの標準機能です。 その標準機能をJavaScriptないし、form onsubmit="hoge()"として、拡張するのが、submitイベントとなります。(というか、onsubmitで発動させるのは、javascript処理) 要は、標準機能のsubmitイベントに、処理を追加するということです。 つまり、form自体にsubmitイベントを追加することによって、 form送信時に、なんらかの処理(送信内容の確認、条件をクリアしてるかなど)を追加するのです。 そうすれば、input type="submit"の標準機能を妨害することなく(エンターキーをトリガーにするなど)、formの送信時に、条件などの確認処理を走らせることができるわけです。 冗長になってしまい、申し訳ないですが、 この先は、ご自分で調べてみましょう。
miyabi_takatsuk

2019/06/07 01:24

キーボード操作を取得して、エンターが押されれば送信、とはできますが、 フォームにフォーカスしているのか、押されたキーはなんなのかとかも検出しなければいけなく、非常に厄介です。 (しかも、キーボードによっては、キーコード違う時もあるし) であれば、なるたけ楽するために、標準の機能を活かせるやり方しようぜ、ってことです。
miyabi_takatsuk

2019/06/07 01:38

ちなみに、submitイベントを付与する理由としては、 1、2を、やった場合、 エンターキートリガーはできますが、エンターキー押下時には、 button・inputに付与したクリックイベントは発動しません。 (つまり、クリックイベントに入れている確認処理などは走らない) なので、エンターキートリガーを生かしつつ、確認処理などをするために、form自体のsubmitイベントを付与し、それに処理を入れるわけです。
SugiuraY

2019/06/07 02:21

miyabi_takatsuk様 非常によくわかりました。早速実践してみません。 昔、htmlのタグの中にinlineでonClickとインラインで使用する方法はmdn上、非推奨であったともうので、個別にJSのformにsubmitイベントを紐づける処理を考えてみようと思います。 有難うございます!
miyabi_takatsuk

2019/06/07 02:29

ですね。 JavaScriptで、要素を取得すれば同じことができるので、また、HTMLはなるべくマークアップだけで、他の役割は、他の言語でやりましょう、というW3Cの考え方があります。なので属性でイベント付与は推奨されないのでしょう。 form関連は、Web上では、かなり重要な事柄なので、 様々な目的を達成するために、様々な創意工夫の仕方がありますので、 柔軟に、かつ楽に、なるべく標準的に実装できる方法を選んで試していかれると、よりよいと思いますよ。 どうか、頑張ってください。
guest

0

type="button"を維持しつつ

enterでの遷移

form内に以下を置いてください

html

1 <input type="submit" style="display:none">

投稿2019/06/07 00:20

yambejp

総合スコア114583

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

SugiuraY

2019/06/07 00:47

closeする直前でコメントを見落とすところでした! 有難うございます。 現状、<button type="button" class="login_button">としつつJS側で.login_buttonがクリックされたときに特定の条件下でsubmit()されるような仕様になっております。 表示させないinput type="submit"を置いておけば、おそらくenterでのsubmitは実行することができるがJS側で設置した特定の条件下のsubmit()が実現できなくなるということになろうかと思います。 JS側でどのように構築しているかやsubmitされる条件を明らかにしていないので、その点は誠に大変申し訳ございません。 enterで遷移するにはという点では仰る通りの回答であろうと思います。
yambejp

2019/06/07 00:57

> 特定の条件下のsubmit()が実現できなくなる そこはフォームのonsubmitで処理をするんです
SugiuraY

2019/06/07 02:22

コメントありがとうございます。 miyabi_takatsuk様のコメントとつながりました! 早速、取り組んでみます。
guest

0

おそらくbuttonのタイプが違うからではないでしょうか?
type=submitはフォームを送信します。
type=buttonは何もしません。
type=resetもありますが、こちらはフォームで入力された値をリセットします。

一度ボタンのタイプを変更してみて試してみてください!

https://dekiru.net/article/12995/

投稿2019/06/07 00:03

fumito_94

総合スコア679

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

SugiuraY

2019/06/07 00:11

コメントありがとうございます。 原因は仰る通りでした。下記にもコメントさせて頂きましたが、type="button"を維持しつつ enterでの遷移を生かせないか可能性を模索しております。。
guest

0

ベストアンサー

こんにちは。
コード拝見しました。
シンプルに書いたときはtype="submit"になっています。

問題の方はtype="button"になっています。

submitにしないとPOSTされません。

それでは失礼します。

投稿2019/06/06 23:56

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

SugiuraY

2019/06/07 00:06

ご回答有難うございます。 すみません、都合上submitを設定せずにJS側でsubmit()メソッドを利用して、特定の状況でクリックされた際に、submitされることを失念しておりました。 因みになのですが、type="button"を維持しつつ、enterでsubmitされるにはinputにfocus時にenterkeyを拾ってsubmitイベントを実行するような仕組みをJSでするくらいしか方法はないですよね。。。 そもそもtype="submit"が設定できないというこちらの都合前提で申し訳ないのですが。。。 宜しくお願い申し上げます。
退会済みユーザー

退会済みユーザー

2019/06/07 00:21

勘違いしていました。 失礼しました。 それであれば、buttonにid属性を付加してからgetElementByIdで変数に格納して、イベントリスナーでクリックを受けとります。 その際にsubmitを発動しましょう。 下記のサイトを参考にしてください。 https://www.sejuku.net/blog/28720
SugiuraY

2019/06/07 00:40

勘違いなんてとんでもないです。 button type="button"になっていたことにそもそも気づいてもいなかったので 諸々、ご助言頂きありがとうございます! 大変助かりました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問