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

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

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

MySQL(マイエスキューエル)は、TCX DataKonsultAB社などが開発するRDBMS(リレーショナルデータベースの管理システム)です。世界で最も人気の高いシステムで、オープンソースで開発されています。MySQLデータベースサーバは、高速性と信頼性があり、Linux、UNIX、Windowsなどの複数のプラットフォームで動作することができます。

PHP

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

Q&A

解決済

1回答

1322閲覧

テキストボックスの横にキーアップで重複チェックを即時反映させたい

redkick

総合スコア17

MySQL

MySQL(マイエスキューエル)は、TCX DataKonsultAB社などが開発するRDBMS(リレーショナルデータベースの管理システム)です。世界で最も人気の高いシステムで、オープンソースで開発されています。MySQLデータベースサーバは、高速性と信頼性があり、Linux、UNIX、Windowsなどの複数のプラットフォームで動作することができます。

PHP

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

0グッド

0クリップ

投稿2019/01/18 08:03

編集2019/01/24 08:42

お世話になっております。
何処かで見かけたような気がするのですが
ログインID作成時などで入力したテキストボックスの横に
「既に登録済みです」のような感じで即反映する仕組みに憧れて
探しまわってみたのですが参考になりそうなものが見つけられませんでした。

記憶違いで、確認ボタンのようなものを押した様な気もするのですが
上記のような仕組みは可能でしょうか?
また、固定文では無く入力した文字が含まれる物を表示させる事は可能か
教えていただけたら幸いです。
よろしくお願い致します!


追記1:

空いた時間で試行錯誤しており遅くなってしまいましたが
非同期通信で値の取得について質問させて下さい。

メインphp <script type="text/javascript"> $(document).ready(function(){ $("#artname").keypress(function(ev) { if ((ev.which && ev.which === 13) || (ev.keyCode && ev.keyCode === 13)) { return false; } }); $(document).on('keyup',function(e){ var val = $("#artname").val(); //入力値を取得 $.ajax({ type: "POST", url: "pre.php", data: "artname="+val, beforeSend: function(){ $("#message").html('<img src="何かしらのgif" />'); }, success: function(xml){ $(xml).find("item").each(function(){ var check = $(this).find("check").text(); if( check == 1 ){ $("#message").html('チェック有り').css({"color":"red"}); } else { $("#message").html('チェック無し').css({"color":"blue"}); } }); } }); }); }); </script> 判定側php <?php header("Content-type: application/xml"); echo '<?xml version="1.0" encoding="UTF-8" ?> ' . "\n"; $account = htmlspecialchars($_POST['artname'] , ENT_QUOTES , "UTF-8"); $array = array('aaa','bbb'); $hit = preg_match($account, $array); if($hit){ } if(!$hit){ }); endif; echo '<rss>'."\n"; echo ' <item xml:space="preserve">'."\n"; echo ' <check>'.$check.'</check>'."\n"; echo ' </item>'."\n"; echo '</rss>'."\n";

判定側で
$hit = array_search($account, $array);
if( $hit !== false ) :
$check = true;
であれば機能していたのですが、部分一致が最終目標で
preg_matchを自分なりに調べて当てはめてみたのですが
何処がダメなのか分からなくなってしまいました。。
助言いただけたらと思いますので、よろしくお願い致します。

追記2(完成理想)

入力した文字をDBと照合させて、含む文字列を表示させたい。
例:【入力】ツァ → モーツァルト
モツァレラ

現状の中途半端なコードになってしまい恐縮ですが
取り出した文字列をどう処理すればいいのかというお手本をいただけないでしょうか。。

pre.php <?php $pdo = new PDO('mysql:dbname=article;host=localhost','root',''); $stmt = $pdo->query('SET NAMES utf8'); $stmt = $pdo->prepare("SELECT * FROM art WHERE a_name=:a_name"); $flag = $stmt->execute(); if($flag == false){ echo "SQLエラー"; }else{ $result = $stmt->fetch(); $account = filter_input(INPUT_POST,'artname'); $array = array_column($result,'a_name'); $hit = in_array($account,$array)!==false; if($hit){ print 1; }else{ print 0; }; exit; ?>
mein.php <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script> $(function(){ $('#artname').on('keyup',function(e){ var val = $(this).val(); $.ajax({ type: "POST", dataType:"text", url: "pre.php", data: {artname:val}, }).done(function(data){ if(data==="1"){ $("#message").text('データ有り').css({"color":"red"}); } else { $("#message").text('データ無し').css({"color":"blue"}); } }); }); }); </script> <input type="text" name="artname" id="artname"><span id="message"></span>

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

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

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

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

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

guest

回答1

0

ベストアンサー

サブミットする前のチェックはajaxが一般的だと思います
もちろんサブミットされたあともdb側でユニーク制限をつけておき
入力失敗の際にはエラーを返す仕組みが必要になります

sample

ちょっと雑ですが、以下チェック用

  • main.html

HTML

1<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 2<script> 3$(function(){ 4 $('#artname').on('keyup',function(e){ 5 var val = $(this).val(); 6 $.ajax({ 7 type: "POST", 8 dataType:"text", 9 url: "pre.php", 10 data: {artname:val}, 11 }).done(function(data){ 12 if(data==="1"){ 13 $("#message").text('データ有り').css({"color":"red"}); 14 } else { 15 $("#message").text('データ無し').css({"color":"blue"}); 16 } 17 }); 18 }); 19}); 20</script> 21<input type="text" name="artname" id="artname"><span id="message"></span>
  • pre.php

PHP

1<?php 2$account = filter_input(INPUT_POST,'artname'); 3$array = array('aaa','bbb'); 4$hit = in_array($account,$array)!==false; 5if($hit){ 6 print 1; 7}else{ 8 print 0; 9}; 10exit; 11?>

投稿2019/01/18 08:13

編集2019/01/24 05:31
yambejp

総合スコア114572

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

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

redkick

2019/01/18 08:49

ajaxについて調べてみたところ、正しく必要としていた機能でした! 非同期通信で値を拾って、DBから引っ張ってくるという ひとまずは単純な理解で恐縮ですが、間違いは無いでしょうか? サブミットに関しては通常の送信をキャンセルして 処理終了後に機能するよう仕組むという形で試作してみて 恐らく躓くと思うので、その際にはまたご教授いただけたらと思います!
redkick

2019/01/24 00:53

空いた時間で試行錯誤しており遅くなってしまいましたが 非同期通信で値の取得について質問させて下さい。 メインphp <script type="text/javascript"> $(document).ready(function(){ $("#artname").keypress(function(ev) { if ((ev.which && ev.which === 13) || (ev.keyCode && ev.keyCode === 13)) { return false; } }); $(document).on('keyup',function(e){ var val = $("#artname").val(); //入力値を取得 $.ajax({ type: "POST", url: "pre.php", data: "artname="+val, beforeSend: function(){ $("#message").html('<img src="何かしらのgif" />'); }, success: function(xml){ $(xml).find("item").each(function(){ var check = $(this).find("check").text(); if( check == 1 ){ $("#message").html('チェック有り').css({"color":"red"}); } else { $("#message").html('チェック無し').css({"color":"blue"}); } }); } }); }); }); </script> 判定側php <?php header("Content-type: application/xml"); echo '<?xml version="1.0" encoding="UTF-8" ?> ' . "\n"; $account = htmlspecialchars($_POST['artname'] , ENT_QUOTES , "UTF-8"); $array = array('aaa','bbb'); $hit = preg_match($account, $array); if($hit){ } if(!$hit){ }); endif; echo '<rss>'."\n"; echo ' <item xml:space="preserve">'."\n"; echo ' <check>'.$check.'</check>'."\n"; echo ' </item>'."\n"; echo '</rss>'."\n"; 判定側で $hit = array_search($account, $array); if( $hit !== false ) : $check = true; であれば機能していたのですが、部分一致が最終目標で preg_matchを自分なりに調べて当てはめてみたのですが 何処がダメなのか分からなくなってしまいました。。 助言いただけたらと思いますので、よろしくお願い致します。
yambejp

2019/01/24 00:54

まるっとそのままでいいので、上の補足を質問の方に追記でかいてください (補足にソースをかいてもみにくいので)
redkick

2019/01/24 02:45

失礼致しました。 追記させていただきました!
yambejp

2019/01/24 02:50

ごめんなさい、まとめて言えばよかった ソースは「```」で上下を囲ってください
redkick

2019/01/24 05:01

不慣れなもので重ね重ね失礼致しました。 今後の利用時にも気を付けさせていただきます。
yambejp

2019/01/24 05:08

判定側php=pre.phpはユーザーの入力をDBで検証するのではなく とりあえずaaaとbbbに合致するかだけしらべればいいのでしょうか? また戻り値をXMLにする意義は感じませんがマストな出力でしょうか?
yambejp

2019/01/24 05:32

とりあえず今までの流れでえた情報をもとにsampleをあげておきました 仕様がちがったり、うまく動かない場合はご指摘ください
yambejp

2019/01/24 05:32

とりあえず今までの流れでえた情報をもとにsampleをあげておきました 仕様がちがったり、うまく動かない場合はご指摘ください
redkick

2019/01/24 08:25

ご回答いただきありがとうございます。 まずは単純な仕組みで理解しようかと思ったのですが泥沼でした。。 再度、完成形を求めた追記を上げさせていただきたいと思いますので もう少しだけお付き合いいただけたら幸いです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問