php - PHP Mysql - javascript を使用して動的なドロップダウンリストを作成する方法は?

Question

私はスクリプティングにまったく慣れていません。基本的には、コーチングツアープロジェクトで学校のプロジェクトを完成させなければなりません。アイデアは、顧客が登録してツアーを予約できるようにすることです。

私が問題を抱えているのは、予約フォームがmysqlデータベースからデータを取得する動的ドロップダウンリストを作成する方法がわかりません.

たとえば、次のように言います。

顧客は、最初のドロップダウンリストからツアーの選択肢 (産業、文化、軍事) を選択する必要があります。
ツアーを選択すると、次のドロップダウンリストに目的地 (英国、フランス、ドイツなど) が表示され、上記 (ツアー) の選択に応じて異なります。
次に、3 番目のリストには、上記の (目的地) の選択に応じた開始日が表示されます。

ドロップダウンリストのすべてのデータは、データベースから取得する必要があります。また、顧客がフォームを送信すると、これらすべてのデータがデータベースの顧客予約テーブルに移動する必要があります。

javascriptが答えであるべきだと言われましたが、非常に多くのフォーラムを検索し、チュートリアルを見ましたが、それらはすべて混乱しています。だから私はここに尋ねるようになりました！これを行う方法についてのヘルプは大歓迎です。サンクス！

以下は、これを行う方法しか知らない方法のコードです。

           <h2><center>PLEASE PLACE YOUR BOOKING</center></h2>


<form action="booking.php" method="post">
<table width="700 border="0" align="center" cellpadding="0" cellspacing="0">
    <tr><td width="210" height="45">Tour Type:</td><td>
            <select name="tour_type">
            <option value="Cultural">Cultural</option>
            <option value="Industrial">Industrial</option>
            <option value="Military">Military</option>
     </select></td></tr>

    <tr><td width="210" height="45">Duration:</td><td>
            <select name="duration" >
            <option value="1_Day">1_Day</option>
            <option value="7_Days">7_Days</option>
            <option value="14_Days">14_Days</option>
        </select></td></tr>      

    <tr><td width="210" height="45">Destination:</td><td>
            <select name="destination" >
            <option value="England">England</option>
            <option value="Wales">Wales</option>
            <option value="Scotland">Scotland</option>
            <option value="France">France</option>
            <option value="Belgium">Belgium</option>
            <option value="Germany">Germany</option>
        </select></td></tr>

    <tr><td width="210" height="45">No. of Passengers:</td><td>
            <select name="no_of_passengers" >
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
        </select></td></tr>

    <tr><td width="210" height="45">Depature:</td><td>
            <select name="departure" >
            <option value="13 May 2013">13 May 2013</option>
            <option value="28 May 2013">28 May 2013</option>
            <option value="11 June 2013">11 June 2013</option>
            <option value="26 June 2013">26 June 2013</option>
            <option value="14 July 2013">14 July 2013</option>
            <option value="27 July 2013">27 July 2013</option>
        </select></td></tr>

    <tr><td width="210" height="45"><input type="checkbox" name="accomodation" 
     value="YES"/>Accomodation</td></tr>
    <tr><td width="210" height="45"><input type="checkbox" name="mailshot" 
    value="YES"/>Mailshot</td></tr>
    <tr><td width="210" height="45"><input type="submit" name="submit" value="submit"></td></tr>
    </table>
    </form>
</html>

    <?php
//When submit button is pressed.
if (isset($_POST['submit'])) {

//Include the server and database connection. 
include('cn.php');

session_start();

//retrieve data input from booking form and make it equal to the variable ($)
$tour_type = $_POST['tour_type'];
$duration = $_POST['duration'];
$destination = $_POST['destination'];
$no_of_passengers = $_POST['no_of_passengers'];
$departure = $_POST['departure'];

// accomodation confirmation
if (isset($_POST['accomodation'] ))
{$accom = $_POST["accomodation"];
} else {
$accom = "NO";
}

// mailshot confirmation
if (isset($_POST['mailshot'] ))
{$mail = $_POST["mailshot"];
} else {
$mail = "NO";
}

$userUsername = $_SESSION['loggedInUser'];

// Build the SQL query to retreive the variables ($) and input the data into the database.
$sql = "INSERT INTO booking 
      (user_id,tour_type,duration,destination,no_of_passengers,departure,accomodation,mailshot) 
VALUES ((SELECT user_id FROM user WHERE user_username = '" . 
       $userUsername . "'),'$tour_type','$duration','$destination',
       '$no_of_passengers','$departure','$accom' ,'$mail')";



// test the sql statement.
if(!mysql_query($sql,$cn)) {
die(mysql_error($cn));

}
// direct to this page when booking is successful.
header('Location: booking_success.php');
}

?>

score 2 · Accepted Answer

同様の問題がありました。実際に機能するガイドと、彼が何をしているのかを説明しているガイドを見つけました。最新のものとは異なるバージョンの Jquery を使用しているため、構文にいくつかの違いがあります。ただし、これらの違いはわずかであり、コメントで見つけることができます。

http://www.ssdtutorials.com/tutorials/series/dependable-dropdown.html

あなたの場合、次のようになります。

SQL

id(Integer)、master_id(Integer)、names(varchar) という 3 つのテーブルを作成します。

Idは 1->x になります (最後の行が番号 x であることを意味します)。 master_idは、最初のドロップダウンミリタリーなどにあるアイテムに対して 0 になります。カテゴリミリタリーに移動するすべてのアイテムは、ミリタリーが id として持っているのと同じ値の master_id を持ちます (例: 1)。すべてのサブカテゴリと日付とともに、このプリンシパルに従います。名前は単なるラベルです...

メインサイト php/HTML

Html は次のようになります。サイトのヘッドにある php にスクリプトを配置します。

?php
try {

 $objDb = new PDO('mysql:host=localhost;dbname=tour', 'root', 'root');
 $objDb->exec('SET CHARACTER SET utf8');

 $sql = "SELECT * 
  FROM `region`
  WHERE `master_id` = 0";
 $statement = $objDb->query($sql);
 $list = $statement->fetchAll(PDO::FETCH_ASSOC);

 } catch(PDOException $e) {
 echo 'There was a problem';
 }

 ?>

これがフォームです。

    <select name="tour" id="tour" class="update">
        <option value="">Select one</option>
        <?php if (!empty($list)) { ?>
            <?php foreach($list as $row) { ?>
                <option value="<?php echo $row['id']; ?>">
                    <?php echo $row['name']; ?>
                </option>
            <?php } ?>
        <?php } ?>
    </select>

    <select name="location" id="location" class="update"
        disabled="disabled">
        <option value="">----</option>
    </select>

    <select name="date" id="date" class="update"
        disabled="disabled">
        <option value="">----</option>
    </select>

</form>

jquery と正しいパスを ajax スクリプトに追加することを忘れないでください。

PHP 関数

       <?php
  if (!empty($_GET['id']) && !empty($_GET['value'])) {

$id = $_GET['id'];
$value = $_GET['value'];

try {

    $objDb = new PDO('mysql:host=localhost;dbname=tour', 'root', 'password');
    $objDb->exec('SET CHARACTER SET utf8');

    $sql = "SELECT * 
            FROM `categories`
            WHERE `master` = ?";
    $statement = $objDb->prepare($sql);
    $statement->execute(array($value));
    $list = $statement->fetchAll(PDO::FETCH_ASSOC);

    if (!empty($list)) {

        $out = array('<option value="">Select one</option>');

        foreach($list as $row) {
            $out[] = '<option value="'.$row['id'].'">'.$row['name'].'</option>';
        }

        echo json_encode(array('error' => false, 'list' => implode('', $out)));

    } else {
        echo json_encode(array('error' => true));
    }

} catch(PDOException $e) {
    echo json_encode(array('error' => true));
}

   } else {
echo json_encode(array('error' => true));
  }

ajax.js - スクリプト

     var formObject = {
run : function(obj) {
    if (obj.val() === '') {
        obj.nextAll('.update').html('<option value="">----</option>').attr('disabled', true);
    } else {
        var id = obj.attr('id');
        var v = obj.val();
        jQuery.getJSON('func/tour_function.php', { id : id, value : v }, function(data) {
            if (!data.error) {
                obj.next('.update').html(data.list).removeAttr('disabled');
            } else {
                obj.nextAll('.update').html('<option value="">----   </option>').attr('disabled', true);
            }
        });
    }
}
  };
  $(function() {

$('.update').on('change', function() {
    formObject.run($(this));
});

 });

パスを正しく取得し、Jquery 1.9.1 を含めることを忘れないでください。動作するはずです。

score 1 · Accepted Answer

このサイトですでに回答を指摘するには、最初の選択に基づいて2番目の動的ドロップダウンを設定するAjaxアプローチ

基本的に、短いバージョンはサーバーからデータをロードするonchangeイベントになります

<select name="first_dropdown" onchange="$('#dropdown2_container').load('your_script.php?nid='+this.value);">
    <option....
</select>
...
<div id="dropdown2_container" style="display:none"> </div>

私はこのような控えめなJavaScriptの大ファンではありませんが、それはあなたにとっての始まりです。もう少しエレガントなものが必要な場合は、次のリンクを試してください。

http://www.99points.info/2010/12/n-level-dynamic-loading-of-dropdowns-using-ajax-and-php/

これの少なくとも少しはあなたが始めるのに役立つはずです。

score 0 · Accepted Answer

いくつかの方法があります。あなたはスクリプトを書くのが初めてなので、この時点では AJAX を避けることをお勧めします。次のようなものが必要です。

サーバー側 (PHP) で、操作可能な JavaScript 変数にデータを出力します。たとえば、データを配列に格納できます。

例：var tours = [{ id:1, name:"Tour#1" }, { id:2, name:"Tour#2" }, etc.]
すべてのツアーデータ、目的地データ、および開始日をスクリプトにロードし、どの子レコードがどの親レコードに属しているかをリンクするのに十分な情報を用意する必要があります。
ページが最初に読み込まれると、ツアーデータが最初のドロップダウンに入力されますが、2 番目と 3 番目のドロップダウンは前のドロップダウンに基づいて入力されるため、空白にする必要があります。
ユーザーがドロップダウン値 (onchangeイベント) を変更すると、前のドロップダウンでの選択に基づいて次のドロップダウンにエントリをロードするロジックが適用されます。

例：<select id='tours' onchange='changetour();'></select>
また、ユーザーが選択をクリアする (その場合はすべての子選択をクリアする) 状況、またはユーザーが最初のドロップダウンに戻って、既に何かを選択した後に選択を変更する状況を処理する必要があります。二番目と三番目。

これにより、開始するためのアルゴリズムの大まかなアイデアが得られます。上記の各項目に最善を尽くし、解決策を書いてみて特定の問題に行き詰まった後は、特定の質問に戻ることをお勧めします.

php - PHP Mysql - javascript を使用して動的なドロップダウン リストを作成する方法は?

3 に答える 3

SQL

メインサイト php/HTML

PHP 関数

ajax.js - スクリプト

Related

Reference

php - PHP Mysql - javascript を使用して動的なドロップダウンリストを作成する方法は?