How do I preview data in accordion page?

How do I preview data in accordion page?

Dearest experts, this is my first time here.

So, please go easy on me.

There are two functions in the code behind, one is getBuildings() and the other is getRevisions().

getBuildings makes a call to a php file called getBuild.php to populate the buildingID dropdown.

getRevisions makes a call to a php file called getRevisions.php to populate floor dropdown based on valued selected from buildingID dropdown.

the two dropdowns and an input textbox are in accordion page called Buildings.

Everything works fine so far.

However, there is another accordion called Summary and this is where I am having problem.

Our requirement is to preview in Summary accordion page the values selected and entered in Buildings accordion page,

I am really stumped on how to go about this.

I have entered some sample data in the two dropdowns just in case it is needed.

Your assistance is greatly appreciated.



  1. <!DOCTYPE html>
    <html>
    <head>
      <meta http-equiv="content-type" content="text/html; charset=UTF-8">
      <title> Help</title>
     
    <script type="text/javascript">
        $(document).ready(function() {
            getBuildings();







  2.         $('#buildingID').change(function() {
                getRevisions( $(this).val() );
            });
        });



  3.     function getBuildings() {
            $.ajax({
                url: 'getBuild.php',
                dataType: 'json'
            })
            .done(function(buildingInfo) {
                $(buildingInfo).each(function(i, building) {
                    $('<option>').val(building.BuildingID).text(building.BuildingDisplay).appendTo( $('#buildingID') );
                })
            });
        }











  4.     function getRevisions(buildingID) {
            $.ajax({
                url: 'getRevisions.php',
                dataType: 'json',
                data: { buildingID: buildingID }
            })
            .done(function(floorInfo) {
                $(floorInfo).each(function(i, floor) {
                    $('<option>').val(floor.FloorDisplay).text(floor.FloorDisplay).appendTo( $('#floor') );
                })
            });
        }











  5. </script>
  7. </head>
    <body>
      <body>

  8.  
  9. <div id="accordion">
  10.   <h3>Builds</h3>
  11.   <div>
        <form name="reqform" method='POST' action='processRequest.php'>
        <p>
           <div class="side-by-side clearfix">
            <div>
              <select name="buildingID" id="buildingID" data-placeholder="Choose a building..." class="chosen-select" style="width:600px;font-size:12pt;">
                <option value="">Choose a building...</option>
                       <option value="Asp">Asp</option>
          <option value="BASIC">BASIC</option>
          <option value="C">C</option>
          <option value="C++">C++</option>
          <option value="Clojure">Clojure</option>
          <option value="COBOL">COBOL</option>
          <option value="ColdFusion">ColdFusion</option>












  12.           </select>
            </div>
            <br />
            <div>
              <select name="floor" id="floor" data-placeholder="Choose a floor..." class="chosen-select" style="width:600px;font-size:12pt;">
                <option value="">Choose a floor...</option>
                       <option value="ActionScript">ActionScript</option>
          <option value="AppleScript">AppleScript</option>
          <option value="Asp">Asp</option>
          <option value="BASIC">BASIC</option>
          <option value="C">C</option>
          <option value="C++">C++</option>










  13.           </select>
            </div>
            <br />
            <div data-role="content">
              <input type="text" name="room" id="room" value="  Enter a room..." onfocus="clearText(this)" onblur="restoreText(this)" style="width:593px;color:#999;font-size:9pt;height:20px;">
            </div>
          </div>
        </p>
        </form>
      </div>








  14.   <h3>Previews</h3>
  15.   <div>
  16.     <p>
  17.   <form action="process.php">
            <div>
                <p>Building: <span id="bldg_prev"></span>

  18.                 <br>Floor: <span id="floor_prev"></span>
  19.                 <br>Room: <span id="room_prev"></span>
  20.                 <br>
                    <br>   <input type="submit" value="Submit"></p>
            </div>

  21.  </form>    
     </p>
  22.   </div>
    </div>