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

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

ただいまの
回答率

90.76%

  • JavaScript

    15355questions

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

  • HTML

    8348questions

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

  • jQuery

    6345questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

.serialize()関数がうまく動きません

受付中

回答 1

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 419

mashumaro0628

score 12

前提・実現したいこと

このようなソースを実行するとalertで表示されるのは指定form のpostした値ではなく
なぜかページのソースが表示されます。

なにか似た症状に心当たりはありませんでしょうか。

ありましたら教えていただきたいです。

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

エラーメッセージ

該当のソースコード

<?php

$alp_array=array("A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z");

/////////セッション//////////

//テーブル保存用
if(isset($_SESSION['table'])){
}else{
$_SESSION['table']=null;
}

//ドロップダウンリスト保存用
if(isset($_SESSION['select'])){
}else{
$_SESSION['select']=null;
}

//花名保存用
if(isset($_SESSION['f_name'])){
}else{
$_SESSION['f_name']=null;
}

//花名保存用
if(isset($_SESSION['f_catename'])){
}else{
$_SESSION['f_catename']=null;
}

//セッション削除
if(isset($_POST['destroy'])){
session_destroy();
}

////////データベース////////

//PDO接続
$pdo = new PDO("mysql:dbname=flower_shop;host=localhost","root","admin");

//商品マスタ表示
$stmt1 = $pdo->query("select p_masta.P_code,p_masta.P_categorycode,p_codes.p_name,p_masta.p_catename from p_masta LEFT OUTER JOIN p_codes on p_masta.P_code = p_codes.P_code");
$_SESSION['table'].='<table border="1">';
$_SESSION['table'].="<tr><td>商品コード</td><td>商品種類</td><td>商品</td></tr>";
$_SESSION['table'].="</tr>";
foreach ($stmt1 as $key) {
$_SESSION['table'].="<tr>";
$_SESSION['table'].="<td>".$key['P_code'].$key['P_categorycode']."</td>";
$_SESSION['table'].="<td>".$key['p_name']."</td>";
$_SESSION['table'].="<td>".$key['p_catename']."</td>";
$_SESSION['table'].="</tr>";
}
$_SESSION['table'].='</table>';

//商品名のみ追加→商品コード割り振り
if(isset($_POST['flower_name'])){
$stmt2 = $pdo->query("select P_code from p_code ORDER BY P_code");
$new_Pcode=array();                //新しい商品コード、生成、取り扱い用配列
foreach ($stmt2 as $key) {        
if($key['P_code']==null){
$new_Pcode = str_split($key['P_code-1']);
}

}
}

?>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript">
$(function(){
$('#add_product_inp').click(function(){    
$('#add_cateproduct_div').css('display','none');
$('#add_product_div').css('display','block');
//td_val=$(this).text();
//$('#selected_fname').val([td_val]);
//$('#selected_form').submit();
});
$('#add_cateproduct_inp').click(function(){    
$('#add_product_div').css('display','none');
$('#add_cateproduct_div').css('display','block');
//td_val=$(this).text();
//$('#selected_fname').val([td_val]);
//$('#selected_form').submit();
});
$('#cate_serch_inp').keyup(function() {
$.post( "masta_add.php", $(this).serialize(), function(response){
alert(response);
});
return false;
});

});

</script>
</head>
<body>
<div id="main">
<input type="radio" name="div_change" id="add_product_inp"><a>商品の追加</a>
<div id="add_product_div">
<form id="add_product_frm" action="masta_add.php" method="post">
<input name="cate_serch_inp" id="cate_serch_inp" type="text"    placeholder="商品の種類を選択" autocomplete="off" required><br>
<input name="" placeholder="商品を追加" autocomplete="off" required><input id="submit" type="submit" value="追加">
</form>
</div>
<br>
<input type="radio" name="div_change" id="add_cateproduct_inp"><a>商品の種類追加</a>
<div  id="add_cateproduct_div">
<form action="masta_add.php" method="post">
<input type="text"    placeholder="商品の種類を追加" autocomplete="off" required><input type="submit" value="追加">
</form>
</div>
<hr>
<h1>取り扱い商品一覧</h1>
<div id="table">
<?php echo $_SESSION['table'];?>
</div>
<div id="serch">
<form method="post" action="masta_add.php">
<h4>取り扱い商品検索</h4>
<input type="checkbox" name="chk" id="chk"><a>商品名のみ検索</a><br>
<input type="checkbox" name="chk" id="chk"><a>職行</a><br>
<input type="text"    placeholder="商品名" autocomplete="off" required>
<input placeholder="商品コード" autocomplete="off" required>
<input type="submit" name="" value="検索">
</form>
</div>
</div>
</body>
</html>

試したこと

課題に対してアプローチしたことを記載してください

補足情報(言語/FW/ツール等のバージョンなど)

より詳細な情報

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • Lhankor_Mhy

    2017/12/11 13:52

    『ページのソース』とは具体的には何ですか? ご提示のソースコードですか? postsample.php のソースですか? postsample.php の出力ですか?

    キャンセル

回答 1

0

ページのソースが表示されます。

サーバー側にphpが動く環境はととのっているのでしょうか?
単にphpが動かない環境でテストしたように見受けられます
ajaxではなく普通にpostした場合もソースが表示されるか確認してみてください

 sample

formdataを使ったsampleです

$(function(){
  $("#form1").on('submit',function(e){
    var fd=new FormData($(this).get(0));
    $.ajax({
      "url":"postsample.php",
      "data":fd,
      "type":"post",
      "processData": false,
      "contentType": false,
    }).done(function(response){
      alert(response);
    } );
    e.preventDefault();
  });
});

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/12/11 14:03

    アパッチでテストしています。
    postは普通にできます。

    キャンセル

  • 2017/12/11 14:07

    追記で例示したsampleでも同じようにソースが表記されますか?

    キャンセル

  • 2017/12/11 14:18

    <?php

    $alp_array=array("A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z");

    /////////セッション//////////

    //テーブル保存用
    if(isset($_SESSION['table'])){
    }else{
    $_SESSION['table']=null;
    }

    //ドロップダウンリスト保存用
    if(isset($_SESSION['select'])){
    }else{
    $_SESSION['select']=null;
    }

    //花名保存用
    if(isset($_SESSION['f_name'])){
    }else{
    $_SESSION['f_name']=null;
    }

    //花名保存用
    if(isset($_SESSION['f_catename'])){
    }else{
    $_SESSION['f_catename']=null;
    }


    //セッション削除
    if(isset($_POST['destroy'])){
    session_destroy();
    }

    ////////データベース////////

    //PDO接続
    $pdo = new PDO("mysql:dbname=flower_shop;host=localhost","root","admin");

    //商品マスタ表示
    $stmt1 = $pdo->query("select p_masta.P_code,p_masta.P_categorycode,p_codes.p_name,p_masta.p_catename from p_masta LEFT OUTER JOIN p_codes on p_masta.P_code = p_codes.P_code");
    $_SESSION['table'].='<table border="1">';
    $_SESSION['table'].="<tr><td>商品コード</td><td>商品種類</td><td>商品</td></tr>";
    $_SESSION['table'].="</tr>";
    foreach ($stmt1 as $key) {
    $_SESSION['table'].="<tr>";
    $_SESSION['table'].="<td>".$key['P_code'].$key['P_categorycode']."</td>";
    $_SESSION['table'].="<td>".$key['p_name']."</td>";
    $_SESSION['table'].="<td>".$key['p_catename']."</td>";
    $_SESSION['table'].="</tr>";
    }
    $_SESSION['table'].='</table>';

    //商品名のみ追加→商品コード割り振り
    if(isset($_POST['flower_name'])){
    $stmt2 = $pdo->query("select P_code from p_code ORDER BY P_code");
    $new_Pcode=array(); //新しい商品コード、生成、取り扱い用配列
    foreach ($stmt2 as $key) {
    if($key['P_code']==null){
    $new_Pcode = str_split($key['P_code-1']);
    }

    }
    }


    ?>

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script type="text/javascript">
    $(function(){
    $('#add_product_inp').click(function(){
    $('#add_cateproduct_div').css('display','none');
    $('#add_product_div').css('display','block');
    //td_val=$(this).text();
    //$('#selected_fname').val([td_val]);
    //$('#selected_form').submit();
    });
    $('#add_cateproduct_inp').click(function(){
    $('#add_product_div').css('display','none');
    $('#add_cateproduct_div').css('display','block');
    //td_val=$(this).text();
    //$('#selected_fname').val([td_val]);
    //$('#selected_form').submit();
    });
    $('#cate_serch_inp').keyup(function() {
    $(function(){
    $("#cate_serch_inp").on('submit',function(e){
    var fd=new FormData($(this).get(0));
    $.ajax({
    "url":"postsample.php",
    "data":fd,
    "type":"post",
    "processData": false,
    "contentType": false,
    }).done(function(response){
    alert(response);
    } );
    e.preventDefault();
    });
    });
    });

    });

    </script>
    <style type="text/css">

    </style>
    </head>
    <body>
    <div id="main">
    <input type="radio" name="div_change" id="add_product_inp"><a>商品の追加</a>
    <div id="add_product_div">
    <form id="add_product_frm" action="masta_add.php" method="post">
    <input name="cate_serch_inp" id="cate_serch_inp" type="text" placeholder="商品の種類を選択" autocomplete="off" required><br>
    <input name="" placeholder="商品を追加" autocomplete="off" required><input id="submit" type="submit" value="追加">
    </form>
    </div>
    <br>
    <input type="radio" name="div_change" id="add_cateproduct_inp"><a>商品の種類追加</a>
    <div id="add_cateproduct_div">
    <form action="masta_add.php" method="post">
    <input type="text" placeholder="商品の種類を追加" autocomplete="off" required><input type="submit" value="追加">
    </form>
    </div>
    <hr>
    <h1>取り扱い商品一覧</h1>
    <div id="table">
    <?php echo $_SESSION['table'];?>
    </div>
    <div id="serch">
    <form method="post" action="masta_add.php">
    <h4>取り扱い商品検索</h4>
    <input type="checkbox" name="chk" id="chk"><a>商品名のみ検索</a><br>
    <input type="checkbox" name="chk" id="chk"><a>職行</a><br>
    <input type="text" placeholder="商品名" autocomplete="off" required>
    <input placeholder="商品コード" autocomplete="off" required>
    <input type="submit" name="" value="検索">
    </form>
    </div>
    </div>
    </body>
    </html>

    キャンセル

  • 2017/12/11 14:19

    すみません。本来試したソースはこちらなのですがこちらにはりつけても動きませんでした。

    キャンセル

  • 2017/12/11 14:20

    $('#cate_serch_inp').keyup(function() {
    $(function(){
    $("#cate_serch_inp").on('submit',function(e){
    var fd=new FormData($(this).get(0));
    $.ajax({
    "url":"postsample.php",
    "data":fd,
    "type":"post",
    "processData": false,
    "contentType": false,
    }).done(function(response){
    alert(response);
    } );
    e.preventDefault();
    });
    });
    });

    キャンセル

  • 2017/12/11 14:24

    キー操作があればページを再描画せず同ページにポストするという処理なのですが
    最初は投稿したソースの一部をくりぬきこの部分だけためしました
    $('#cate_serch_inp').keyup(function() {
    $.post( "masta_add.php", $(this).serialize(), function(response){
    alert(response);
    });
    return false;
    });

    キャンセル

  • 2017/12/11 14:25

    ごめんなさい、回答にではなく本文の方につけなおしてもらえますか?

    キャンセル

  • 2017/12/11 16:02

    > キー操作があればページを再描画せず同ページにポストするという処理なのです

    「ポストする」というのはバックグラウンドでpostデータを送り結果を
    非同期で受け取るという認識でよいですか?
    単純にページの遷移をするならformをサブミットしてあげないと
    いけませんが

    キャンセル

  • 2017/12/11 16:08

    あと#cate_serch_inpはただのinput要素ですよね?
    submitを検出したいなら親の#add_product_frmではないのですか?
    シリアライズするのも#add_product_frmが対象になるような気がします

    キャンセル

  • 2017/12/12 10:10

    バックグラウンドで受け取ってデータの変更箇所を変更させたいです。
    詳しく言うとibputタグのテキストボックスに一文字入力、削除するごとに似た文字列をデータベースから持ってきて
    ドロップダウンリストに表示するという処理です。

    キャンセル

  • 2017/12/12 10:59

    > バックグラウンドで受け取ってデータの変更箇所を変更させたい

    最初の回答のところに提示したソースではだめなんでしょうか?

    キャンセル

  • 2017/12/14 13:31

    responceに意図した値が入りました。
    受け取りの文を書いてなかっただけでした。
    ところでなのですがresponceの値をPHPに受け渡す方法はないのでしょうか?

    キャンセル

  • 2017/12/14 13:41

    > responceの値をPHPに受け渡す方法

    状況がわかりません
    ajaxでpostした結果がresponseなのにそれをまたphpに渡すのですか?
    HTML内に流用したいということならresponseはテキストなので
    それを編集してつかいます。場合によってはjsonデータで受け取ったほうが
    編集はラクかもしれません

    キャンセル

  • 2017/12/14 14:24

    別ファイルのDB検索で受け取った結果を
    $table .= "<select>";
    foreach($結果 as $key){
    $table .= "<option>".$key."<option>"
    }
    $table .= "</select>";

    このtableという変数に入ったドロップダウンリストがresponseで帰ってきてるんですが
    この後、responseをどう使えばドロップダウンリストを表示できるのかわかりません

    キャンセル

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

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

関連した質問

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

  • JavaScript

    15355questions

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

  • HTML

    8348questions

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

  • jQuery

    6345questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。