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

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

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

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

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

HTML

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

Q&A

解決済

1回答

7534閲覧

formのtype="button"でsubmitさせたい

MeB

総合スコア104

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

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

HTML

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

0グッド

1クリップ

投稿2018/03/05 03:27

現在ページ切り替え(ページ遷移)をしないformを作っているのですが、

html

1<div class="submit"><button type="button" name="mode" value="confirm"><img src="images/check.png" alt="送信"></button></div>

現在の送信ボタンを上記のようなコードになっているのですが、
type="button"ではtype="submit"と同じようにデータを送信するにはどのようにしたら良いのでしょうか?

やはりonclickなどでjs処理になるのでしょうか?

onClick="this.form.submit();などはページを再読み込みしてしまうため
うまくいきませんでした・・・

ご教示よろしくお願いします。

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

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

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

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

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

guest

回答1

0

ベストアンサー

遷移しないのであればやり方は2つ

  • ajaxでバックグラウンドに送信
  • 別ウィンドに送信

(new window、target=_blank、frame、iframeなど)

sample

sample追記します

HTML

1<div class="submit"><button type="button" name="mode" value="confirm"><img src="images/check.png" alt="送信"></button>

javascript

1$(function(){ 2 $('.submit button').on('click',function(e){ 3 e.preventDefault();/* typo調整*/ 4 $.ajax({ 5 url: '/sample/index', 6 type: 'GET', 7 data: formData, 8 timeout: 10000, 9 dataType: 'text' 10 }).done(function(data){ 11 console.log(data); 12 }); 13 }); 14});

※formDataは別途用意するものとする

追記

適当なフォームからデータをもらってform外のボタンをおしてajax送信

javascript

1$(function(){ 2 $('.submit button').on('click',function(e){ 3 e.preventDefault(); 4 $.ajax({ 5 url: '/sample/index', 6 type: 'GET', 7 data: { 8 hoge:encodeURIComponent($('#f1 [name=hoge]').val()), 9 fuga:encodeURIComponent($('#f1 [name=fuga]').val()), 10 }, 11 dataType: 'text', 12 }).done(function(data){ 13 console.log(data); 14 }).fail(function(xhr,err){ 15 console.log(err); 16 }); 17 }); 18}); 19</script>

HTML

1<form id="f1"> 2<input type="text" name="hoge" value="1"> 3<input type="text" name="fuga" value="漢字"> 4</form> 5 6<div class="submit"><button type="button" name="mode" value="confirm"><img src="images/check.png" alt="送信"></button>

POST処理

javascript

1$(function(){ 2 $('.submit button').on('click',function(e){ 3 e.preventDefault(); 4 $.ajax({ 5 url: '/sample/index', 6 type: 'POST', 7 data: new FormData($('#f1').get(0)), 8 dataType: 'text', 9 cache:false, 10 processData: false, 11 contentType: false, 12 }).done(function(data){ 13 console.log(data); 14 }).fail(function(xhr,err){ 15 console.log(err); 16 }); 17 }); 18}); 19</script>

で送って、受け取り側は

PHP

1$name=filter_input(INPUT_POST,"name");

のような処理です。

受け取り側

※仮にpost処理だとします

PHP

1<?PHP 2$name=filter_input(INPUT_POST,"name"); 3if(!is_null($name){ 4 print htmlspecialchars($name); 5 exit; 6} 7?> 8HTML部分

投稿2018/03/05 03:30

編集2018/03/05 08:26
yambejp

総合スコア114505

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

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

MeB

2018/03/05 03:32

やはりajaxになるのですか。 ajaxは全く沢田ことがないのですが調べてみます…
MeB

2018/03/05 03:47

すみません。 $.ajax({ url: '/sample/index', type: 'GET', data: formData, timeout: 10000, dataType: 'text' }) このような感じのものをjsファイルに記述し、button(onclick)をトリガーとする形になるのでしょうか?
yambejp

2018/03/05 03:54

sample追記しておきました
MeB

2018/03/05 05:23

ありがとうございます。 formDateは data: $form.serialize(), で受け取るのが正しいのでしょうか? またそれで受け取った際は $name = filter_input( INPUT_GET, "name" ); echo $name; のような形で良いのでしょう?
yambejp

2018/03/05 05:42

フォームのデータ受け渡しについては追記しておきました できればPOSTを利用した方が実は楽です (いわゆるFormDataが利用できるため) GETで渡したデータをうけとるのであれば > $name = filter_input( INPUT_GET, "name" ); > echo $name; で問題ありません。あえて言えば echo htmlspecialchars($name);
MeB

2018/03/05 07:34

わざわざすみません。助かります。 type: 'POST', の場合は data: $form.serialize(), これが使えて入ってくるものを > $name = filter_input( INPUT_GET, "name" ); > echo $name; で取れるということでしょうか?
yambejp

2018/03/05 07:53

POST処理を追記しておきました これはいわゆるenctype="multipart/form-data"の処理です
MeB

2018/03/05 08:16

ありがとうございます。 送信ボタンを押した後 コンソールにindexの内容が全て表示されるのは正常なのでしょうか? そのコンソール内の echo $name; を記述した部分は空欄になってます。
yambejp

2018/03/05 08:22

> コンソールにindexの内容が全て表示されるのは正常なのでしょうか? そういう書き方をしていれば正常でしょう POSTした内容だけ書きたいならそういう書き方をしてください 追記しておきます
MeB

2018/03/05 08:36

ありがとうございます。 未だに $name=filter_input(INPUT_POST,"name"); echo $name では何もきていないようなので調べてみて 整理した後正常でないようでしたら再度質問してみることにします。 ながながとありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問