新卒から文系エンジニア→人材業界に転職した人のブログ

新卒から文系エンジニア→人材業界に転職。技術・スキルがないためブログを通して勉強。その後、IT業界の業界知識が活かせる人材業界へ。異業種×異職種の転職経験有り。

このエントリーをはてなブックマークに追加

【php】Macでapache環境を整え、phpでフォームの値を受け取るまで

【今回の紹介】

タイトルの通り、

Macapache環境を整え、phpでフォームの値を受け取るまで


をやります。

参考にした記事


jQuery:jQueryでsubmit(サブミット)する方法 | raining



Mac OS X 10.8でPHP 5.xを動作させる方法 - 大人になったら肺呼吸



【内容】

■流れ

  ①apacheの設定の変更  
   ・phpのモジュールを読み込むように設定ファイルを変更
    →参考記事参照
  ②テスト用のhtmとphpを作成
 

■メモ

①リクエストで値をサーバに渡す「submit」をする際、必ずしも「submitボタン」を使わなくてもいい

   常識なのかもしれませんが、改めて学びました。
    例えば、参考ソースにあるように

a.通常のボタンにクリックイベントとして、submitを入れる

    →とりとめて、ボタンのタイプにsubmitを書かなくてよい
    

b.セレクトボタンの変更イベントでsubmitする

    →ボタン以外からも、submitできる
    ※Ajaxで画面の部分更新することが多いため、あまり現実的ではないですが、、



②window.onload とjQury(document).ready の違い

  
  初期処理の処理をコーディングするときにどちらを書こうか(どちらにどのような意味があるのかわかなかったため)、迷っていたので調べました

a. window.onload

→ブラウザがHTMLをdomツリーに変換する処理はもちろん、外部のイメージ(画像・動画・flash)など、の読み込みまでまってから実行する
  

b.jQuery(document).readyまたはjQuery(function() {)

→ブラウザがHTMLをdomツリーに変換する処理が終わったら、処理実行する。つまり、ready、(jQuery(function() の方が、
    外部イメージ以外の部分が素早く整うため、ユーザのストレスが少ないということ、らしい!!




■参考ソース

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
//Jqueryのサブミット
$(document).ready(function(){
//  $('#button1').click(function(){
//    $('#form1').submit();
//  });
});
</script>
<h1>リクエスト</h1>
<form id="form1" action="./test.php" method="POST">
<span>name</span><input type='text' id='name' name='name'></input>
<span>id</span><input type='text' id='id' name='id'></input>
<span>tel</span><input type='text' id='tel1' name='tel[]'></input>
<span>tel</span><input type='text' id='tel2' name='tel[]'></input>
<span>tel</span><input type='text' id='tel3' name='tel[]'></input>
<input type='submit' id='button1' value='送信'></input>	
</form>

<form id="form2" action="./test.php" method="POST">
<select name="select" onchange="submit(this.form)">
 <option value=""></option>
 <option value="option1">option1</option>
 <option value="option2">option2</option>
 <option value="option3">option3</option>
</form>

</body>
</html>
<?php
  echo htmlspecialchars($_POST['name']);
 ?>
<?php
  echo htmlspecialchars($_POST['select']);
 ?>
 <?php
  $work=$_POST['tel'];
  print_r($work);
  ?>
.hatena-module:nth-of-type(10) { background: transparent; } .hatena-module:nth-of-type(10) .hatena-module-title{ display: none; } .hatena-module:nth-of-type(10) .hatena-module-body { padding: 0; }