使用帶有數據庫信息的下拉菜單填充文本框

Question

大家好，我目前正在嘗試弄清楚如何在用戶從下拉菜單中選擇“日期”后使用數據庫中的信息填充文本框。

我的下拉菜單當前由游覽的離開日期填充，我希望與該日期相關的所有其他信息都顯示在頁面上的文本框中。

這是針對我正在處理的項目，不幸的是，我們當前的服務器不支持 pdo。

這讓我頭暈目眩，我無法思考我應該如何實現這一目標。 在互聯網上搜索並沒有給我任何有用的信息。

這是我的選擇框和文本框的 html 代碼。

<div>

  <label><strong>Search Tours</strong></label>
<form>
  <p>
    <select name="lst_tour">
      <option value="">Select a Tour:</option>
      <?php 

foreach ( $results as $option ) : ?>
      <option value="<?php
     
          echo $option->departure_date; ?>"><?php echo $option->departure_date; ?>    </option>
      <?php endforeach; ?>
    </select>
  </p>
  <p><strong>List of Tour Details</strong></p>


        <input name="txt_tourname" type="text" id="txt_tourname" readonly="readonly"     value = <?php echo $ltour_name ?> />
      </label></td>

        <input name="txt_departuredate" type="text" id="txt_departuredate"  readonly="readonly" />
      </label>


        <input name="txt_tourdetails" type="text" id="txt_tourdetails"     readonly="readonly" />
      </label>

這是我的 php 連接代碼

     <?php
session_start();

        $server = "server";
        $schema = "schema";
        $uid = "name";
        $pwd = "pass";

    $tour_name =$_POST["txt_tourname"];
    $departure_date =$_POST["txt_departuredate"];
    $tour_details =$_POST["txt_tourdetails"];
    $no_of_volunteers =$_POST["txt_noofvolunteers"];


mysql_connect($server , $uid , $pwd) or die ("server not found");
mysql_select_db($schema) or die ("Database not found");

     $sql = "SELECT * FROM tour";
     $query = mysql_query($sql);
     while ( $results[] = mysql_fetch_object ( $query ) );
     array_pop ( $results );
?>

任何幫助都會很棒。

Answer 1

好吧，這個問題被問過和回答過很多，大多數問的人都有一個概念問題。 我將分部分解釋這一點，然后我將發布對您的代碼的干凈重寫，包括一個 javascript 文件供您深入學習

• 您嘗試做的事情背后的想法涉及看起來最有可能是靜態 html 頁面的某種行為
• Javascript將行為添加到您原本無效的 html 中，允許您觸發事件並生成響應
• Ajax 的誕生是出於集體需要，能夠在用戶未離開頁面時與服務器對話。 它允許我們在幕后（異步）發出請求並帶回信息
• 將行為與異步請求相結合的能力是當今富互聯網應用程序（簡稱 RIA？）的基礎。

好吧，不要只看表面價值，對它做一些研究，你就會發現它的潛力。 與此同時，我會創建一個你想要的樣子的模型，我會盡快回來。 尋找其他答案，周圍有很多知識淵博的人^^

編輯

html表單

<form method="somemethod" action="somescript.php">
  <select name="lst_tour" id="lst_tour">
    <option value="">Select a Tour:</option>
    <?php foreach ( $results as $option ) {
      ?><option value="<?php echo $option->departure_date; ?>"><?php echo $option->departure_date; ?></option><?php
    } ?></select>
  <!-- these will be "magically" populated, they conveniently have ids ^^ -->
  <input name="txt_tourname" type="text" id="txt_tourname" readonly="readonly" />
  <input name="txt_departuredate" type="text" id="txt_departuredate" readonly="readonly" />
  <input name="txt_tourdetails" type="text" id="txt_tourdetails" readonly="readonly" />
</form>

javascript

大量的編輯和重寫。 這是一個包含大量alerts的嘈雜腳本，因此請耐心等待，並在您不再需要時按順序開始刪除警報。 注意： select 標簽有一個 id ，我用它來查找並附加事件處理程序

(function(){
  var
    // the php script that's taking care of business
    url = 'http://path/to/handling/ajaxscript.php',
    select,
    // assume these are the ids of the fields to populate
    //  AND assume they are the keys of the array thats comming from the server
    inputs = ['txt_tourname','txt_departuredate','txt_tourdetails'],
    // the XMLHttpRequest, I'm not recycling it but, oh well
    xhr,
    // the onReadyStateChange handler function, it needs access to xhr
    xhrRSC,
    // event handler, called for <select>."onChange"
    onChooseDate,
    // response handler that will be executed once the xhrRSC deems it ready
    populateData,
    // convenient event handlers
    onLoad, onUnload;
  xhrRSC = function () {
    if (xhr && xhr.readyState !== 4) {return;}
    alert('the server response has completed. Now continue with the population');
    populateData(JSON.parse(xhr.responseText));
    xhr = null;
  };
  onChooseDate = function () {
    var date = select.options[select.selectedIndex].value;
    alert('I have been changed. Did I select the right date: '+date
      +'. Now we send some info to the server');
    // AJAX: make xhr
    xhr = new XMLHttpRequest();
    // AJAX: setup handler
    xhr.onreadystatechange = xhrRSC;
    // AJAX: open channel
    xhr.open('get',url+'?ajax=1&date='+date,true);
    // AJAX: send data (if method post)
    xhr.send(null);
    // if we had jQuery, we could condense all this into one line
    // $.post(url,{ajax:1,date:date},populateData,'json');
  };
  populateData = function (json) {
    // we have the content from the server. Now json decode it
    alert('json data => '+json.toSource());
    // foreach input id execute function
    inputs.forEach(function(v){
      // set the value of each input to the data sent by the server
      alert('setting input "'+v+'" to "'+json[v]+'"');
      document.getElementById(v).value = json[v];
    });
  };
  onLoad = function () {
    alert('page has loaded');
    // assume the <select> tag has an id of "lst_tour", just as it's name
    select = document.getElementById('lst_tour');
    // the "change" event is fired when the user changes the selected <option>
    select.addEventListener('change',onChooseDate,false);
  };
  onUnload = function () {
    select.removeEventListener('change',onChooseDate,false);
    select = null;
  };
  window.addEventListener('load',onLoad,false);
  window.addEventListener('unload',onUnload,false);
}());

ajax 腳本，php 處理程序

<?php
// this file has $_GET populated with 'ajax' => '1' and 'date' => 'what the user chose'
if (!isset($_GET['ajax'])) die('this is not how its supposed to work');
// we must protect the output
ob_start();
// your initializers
// your logic: it should make the selection, then populate the array to be JSON encoded

$response = array(
  'txt_tourname' => $txt_tourname,
  'txt_departuredate' => $txt_departuredate,
  'txt_tourdetails' => $txt_tourdetails
);
// you may want to log this for debugging
// server output has been protected
ob_end_clean();
header('Content-Type: text/json');
echo json_encode($response);
// the client has what he wanted
exit;

就是這樣，它沒有經過測試，只是一小部分，但是通過仔細審查，您會學到很多東西。 另請閱讀Crockford並考慮使用 jQuery 的好處，使用 jQuery 時 javascript 本來可以簡單得多，並且效率更高