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

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

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

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

HTML

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

Q&A

解決済

3回答

360閲覧

JavaScriptでフォームを送信する

ryohasegawa

総合スコア437

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

HTML

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

0グッド

0クリップ

投稿2018/03/08 07:12

編集2018/03/08 08:03

HTMLのフォームを送信ボタンが押されると送信するJavaScriptを書いたのですがうまく動作せず、TypeError: document.signup is undefinedというエラーが吐かれてしまいます。

html

1<form name="signup" action="" method="post"> 2---省略--- 3 <button type="button" id="submitbtn" class="btn notUsed">新規作成</button> 4</form> 5

という至ってシンプルなものです。

JavaScript

1let submitbtn = document.getElementById("submitbtn"); 2 3submitbtn.addEventListener("click", function(){ 4 document.signup.submit(); 5});

上のコードはどこがおかしいのですか?教えてください。

追記

コードからPHP部分を取っ払ったコード:https://codepen.io/Ryohasegawa/details/xWKaaG/

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

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

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

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

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

m.ts10806

2018/03/08 07:21 編集

現象再現しません。javascriptはどの位置に置いていますか?</body>直後であればきちんとsubmitされます。
ryohasegawa

2018/03/08 07:23

javascriptの呼び出しは</body>の直前です。直後に置き直してもだめでした。
m.ts10806

2018/03/08 07:26

htmlをできれば全体ご提示いただきたいのですが難しいでしょうか。
m.ts10806

2018/03/08 07:27

あとは再現するブラウザですね。Chromeでは再現しませんでした。
ryohasegawa

2018/03/08 07:30

Chromeで実行してみたら、エラー内容が変わりました。submitが定期されてないというエラーに
m.ts10806

2018/03/08 07:33

うーん。。提示ソースが実行ソースとは同じではないんじゃないかなと。いずれのエラーも確認できていません。(回答はしましたが元々のやり方できてないなら状況かわらないかもしれません)
ryohasegawa

2018/03/08 07:46

ソースがPHPでcodepenで公開しようと思ったのですがPHPコードが邪魔でPHPコードを除去しているので少し時間がかかります。
m.ts10806

2018/03/08 07:48

そのPHPで出力している内容が影響してそうに思います。提示ソースだけではおそらくどの環境下でも再現しません。
ryohasegawa

2018/03/08 07:51

なるほど、PHPが何かしらの影響を与えているということですか
m.ts10806

2018/03/08 07:58 編集

ただ送信するだけならtypeを取っ払ってbuttonをsubmitにしても良いとは思いますが。理由あってbuttonにしているなら別の策を考えなければなりません。
ryohasegawa

2018/03/08 08:16

入力値をチェックしたいのでこうしてます。
guest

回答3

0

自己解決

今回の問題は、プログラム以前にそもそもの問題でした。
開発環境は、さくらインターネットのレンタルサーバを借りていて、サーバのデータとPCのあるフォルダとを同期させていました。
ローカルファイルが更新されると自動でアップロードし実行するという方法で行っていたのですが、その同期に使っていたソフトの欠点でした。
同期ソフトのFTPBoxなのですが、ファイルの更新日時を見て更新するのではなく、ファイルの容量で最新かどうかを確認しているらしく、今回の書き換えた量が少なくファイルサイズがほぼ変わってなかったため同期されずにいたためあれ?動かないとなってしまいました。以後気をつけたいと思います。

投稿2018/03/08 08:22

ryohasegawa

総合スコア437

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

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

0

document.signup192.submit();では?

小さく書いて本当に再現できるのかどうか試されては?

html

1<!doctype html> 2<html lang="jp"> 3<head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6</head> 7<body> 8 <form name="signup" action="" method="post"> 9 <button type="button" id="submitbtn" class="btn notUsed">新規作成</button> 10 </form> 11</body> 12<script> 13 let submitbtn = document.getElementById("submitbtn"); 14 15 submitbtn.addEventListener("click", function(){ 16 document.signup.submit(); 17 }); 18</script> 19</html>

投稿2018/03/08 07:15

編集2018/03/08 07:52
sousuke

総合スコア3828

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

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

ryohasegawa

2018/03/08 07:18

すいません。 192はミスで入ってしまいました。 プログラム内には含まれていません。
m.ts10806

2018/03/08 07:48 編集

buttonタグはデフォルトsubmitなので、要件に応じては必要です。 デフォルトのsubmitのままだとそもそもclickイベント自体が不要になりますけどね^^;
sousuke

2018/03/08 07:51

そういえばdefaultはsubmitでしたね。失礼しました。
guest

0

こちらで提示ソースにて再現確認できていないので分からないのですが、formにIDをつけてみた場合はどうでしょうか。

html

1<form name="signup" id="signup" action="" method="post"> 2 <button type="button" id="submitbtn" class="btn notUsed">新規作成</button> 3</form> 4

javascript

1let submitbtn = document.getElementById("submitbtn"); 2submitbtn.addEventListener("click", function(){ 3 document.getElementById("signup").submit(); 4}); 5

投稿2018/03/08 07:29

m.ts10806

総合スコア80765

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

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

ryohasegawa

2018/03/08 07:43

これも同様エラーとなります。
ryohasegawa

2018/03/08 07:44

document.getElementById("signup").submit(); の行でUncaught TypeError: Cannot read property 'submit' of undefined at HTMLButtonElement.<anonymous>  とエラーが出ます。
m.ts10806

2018/03/08 07:47

そこがおかしいんですよね。そもそもdocumentが取れていないということでしょうし。環境が気にはなりますが。
ryohasegawa

2018/03/08 07:58

一応PHPを除いたコードになります。 フォームの送信とコンソール表示を同時に行うコードなのですが、うまく行きません
m.ts10806

2018/03/08 07:59 編集

追加の情報なので質問本文に追記してください。 こちらでは他の回答者の目につきにくくなりますし、リンクの場合にマークダウンが使えません。
ryohasegawa

2018/03/08 08:03

追記させていただきました。
ryohasegawa

2018/03/08 08:04

PHPを取っ払うと実行できました。
m.ts10806

2018/03/08 08:07 編集

やはりPHPが出力している情報の部分で何か悪さをしているようですね。
m.ts10806

2018/03/08 08:06

関係しそうな部分を抜き出すことは可能でしょうか? ※codepen見れる環境にいないので帰宅してから見てみます。
ryohasegawa

2018/03/08 08:11

PHPで何かしらの複雑な処理をしているわけではないので、どこでこのエラーが発生しているのかが自分でも全くわからないんですよね・・・ 一応入力されたデータが送信されらた入力値をセッションで保管したいと思っていたので、フォームの入力欄のvalue=""の中にセッションの該当入力欄の入力値が既にあればそれを表示するコードは書いてあります。 例えば名前の欄だと、<input name="user_name" id="user_name" placeholder="your name" type="text" value="<?php isset($_SESSION['signup']['user_name']) ? print($_SESSION['signup']['user_name']) : "" ?>">
ryohasegawa

2018/03/08 08:17 編集

解決しました! 自己解決で説明させていただきます。
m.ts10806

2018/03/08 08:17

それはよかったです。 自身で回答を書いて自己解決としてください。
ryohasegawa

2018/03/08 08:22

本当にありがとうございました。 初歩の初歩で躓いてしまいました。
ryohasegawa

2018/03/08 08:23

自動で同期してくれるいいFTPソフトあれば教えて下さい。
m.ts10806

2018/03/08 08:24

初歩と言うか結構テクニカルな内容だと思います(そういえば同様の現象で修正が反映されないというのは遭遇したことがあります)
ryohasegawa

2018/03/08 08:28

今回は本当にありがとうざいました。 本当に申し訳なく思っております、
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問