堆棧內存溢出
  簡體   English   中英

如何使用“提交”按鈕在同一頁面上檢索選定的下拉值

[英]How to retrieve the selected drop down value on the same page using submit button

 原文  2013-05-08 07:20:00  2   1    php/ javascript

問題描述

我正在處理具有6個chkbox的表單，並且根據chkboxes的選擇（允許多次選擇），正在顯示特定的div。 每個div都包含一些問題（以下拉框的形式，這些值是硬核的，而不是DB的）。 為此，我使用了javascript。 一切都按預期進行。 但是現在我想添加提交按鈕（提交結果應該顯示在同一頁面上）和提交表單時，我想顯示所選的下拉值。

請幫幫我。 提前致謝...

這是我嘗試的代碼- 

    <!DOCTYPE html>
    <html>
    <head>
    <script>
        var showClasses = { };
        function fnchecked(blnchecked,className)
        {
            if(blnchecked)
            {
                showClasses[className] = true;
            }
            else
            {
                showClasses[className] = false;
            }
            var ps = document.getElementById("div-block").children;
            var psNumber = ps.length;
            for (var i = 0; i < psNumber; i ++) {
                var have = hasClasses(ps[i], showClasses);
                if (have) {
                    ps[i].style.display = "";
                } else {
                    ps[i].style.display = "none";
                }
            }
        }

        function hasClasses(element)
        {
            var result = false;
            for (var cls in showClasses) {
                if (showClasses[cls]) {
                    if ((' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1) {
                        result = true;
                    }
                }
            }
            return result
        }
    </script>
    </head>
    <body>

    <form method="POST" action="<?php echo $_SERVER['PHP_SELF']; ?>">
    <div>
        <label>Technologies: </label></br>
        <input type="checkbox" name="technologies[]" onChange="fnchecked(this.checked,'question1');" value="Kingspan Solar" /> Kingspan Solar</br>
        <input type="checkbox" name="technologies[]" onChange="fnchecked(this.checked,'question2');" value="Solar PVT" /> Solar PVT</br>
        <input type="checkbox" name="technologies[]" onChange="fnchecked(this.checked,'question3');" value="Insulation" /> Insulation</br>
        <input type="checkbox" name="technologies[]" onChange="fnchecked(this.checked,'question4');" value="Gas boiler" /> Gas boiler</br>
        <input type="checkbox" name="technologies[]" onChange="fnchecked(this.checked,'question5');" value="Oil boiler" /> Oil boiler</br>
        <input type="checkbox" name="technologies[]" onChange="fnchecked(this.checked,'question6');" value="Heat recovery ventilation" /> Heat recovery ventilation</br>
         <!--<input type="submit" name="formSubmit" value="Get The Info">--></br>

       <input type="submit" name="submit" value="Submit"></p>

        <?php
            if(isset($_POST['submit'])) 
            {
                $tech = $_POST['technologies'];
                if(empty($tech)) 
                {
                  echo("You didn't select any Technologies.");
                } 
                else
                {
                  $N = count($tech);

                  echo("You selected $N Technology(s): ");
                  for($i=0; $i < $N; $i++)
                  {
                    echo($tech[$i] . " ");
                  }
                }
            }
        ?>

        <div id="div-block" >
            <p class=" question1 " style="display: none">
                How many people live in the house ?
                <select name="people">
                    <option value="">Click & Choose</option>
                    <option value="people1">1 to 3 (200 litre system)</option>
                    <option value="people2">3 to 4 (250 litre system)</option>
                    <option value="people3">4 to 6 (300 litre system)</option>
                    <option value="people4">6 to 9 (400 litre system)</option>
                </select>
            </p>
            <p class="question1 question2 question3 question4 question5 question6 " style="display: none">
                What type of house do you live in?
                <select name="house_type">
                    <option value="">Click & Choose</option>
                    <option value="house_type1">Bungalow</option>
                    <option value="house_type2">2 story</option>
                    <option value="house_type3">Dormer</option>
                    <option value="house_type4">3 or 4 story</option>
                    <option value="house_type5">Apartment</option>
                </select>
            </p>
            <p class="question1 question2  " style="display: none">
                Is your house south facing?
                <select name="house_face">
                    <option value="">Click & Choose</option>
                    <option value="house_face1">South</option>
                    <option value="house_face2">South east or South west</option>
                    <option value="house_face3">East or West</option>
                    <option value="house_face4">No</option>
                </select>
            </p>
            <p class="question1 question2 question3 question4 question5 " style="display: none">
                Was it built before 2006?
                <select name="built">
                    <option value="">Click & Choose</option>
                    <option value="built1">Yes</option>
                    <option value="built2">No</option>
                </select>
            </p>
            <p class=" question2 " style="display: none">
                  How many people live at the house ?
                      <select name="people">
                          <option value="">Click & Choose</option>
                          <option value="people1">1-2</option>
                          <option value="people2">3</option>
                          <option value="people3">4</option>
                          <option value="people4">4-6</option>
                          <option value="people4">6-8</option>
                      </select>
                 </p>

            <p class=" question3 " style="display: none">
                Is your house detached?
                <select name="detached">
                    <option value="">Click & Choose</option>
                    <option value="detached1">Detached</option>
                    <option value="detached2">Semi D</option>
                    <option value="detached3">Mid Terrace</option>
                    <option value="detached4">Apartment</option>
                </select>

            </p>

            <p class=" question4 question5 question6 " style="display: none">
                How many bedrooms are in the house?
                <select name="bedroom">
                    <option value="">Click & Choose</option>
                    <option value="bedroom1">1-2</option>
                    <option value="bedroom2">2-3</option>
                    <option value="bedroom3">3-4</option>
                    <option value="bedroom4">4-5</option>
                    <option value="bedroom5">5-8</option>
                </select>
            </p>
            <p  class=" question4 question5 " style="display: none">
              Do you use gas or oil?
                  <select name="gas_oil">
                      <option value="">Click & Choose</option>
                      <option value="gas_oil1">Gas</option>
                      <option value="gas_oil2">Oil</option>
                  </select>
             </p>
             <p  class=" question4 question5 " style="display: none">
              House you like to upgrade your central heating controls to SEAI standards so you can claim a grant for the works?
                  <select name="upgrade">
                      <option value="">Click & Choose</option>
                      <option value="upgrade1">Yes</option>
                      <option value="upgrade2">No</option>
                  </select>
             </p>
             <p  class=" question6 " style="display: none">
              Is this a new build or total renovation?
                  <select name="upgrade">
                      <option value="">Click & Choose</option>
                      <option value="upgrade1">Yes</option>
                      <option value="upgrade2">No</option>
                  </select>
             </p>
        </div>
    </div>


    </body>
    </html>

1 個解決方案

解決方案1
 1 已采納  2013-05-08 11:48:03

我在jsfiddle中更改了您的代碼。 點擊這里檢查 

 $(document).ready(function(){
$('.checkme').click(function(){
    if($(this).is(':checked')){
        var val = $(this).attr('id');
        $('.'+val).show();
     }

}); 

$('.submit').click(function(){
    var value = $('.firstCheck').val();
    $('.finalvalue').html(value);
  });

}）;

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 如何在不使用提交按鈕的情況下獲得下拉選擇的值？ 如何保留下拉值作為提交后選擇的值 從下拉列表中獲取選定值並將選定值傳遞到 php 中的提交按鈕 使用PHP在同一頁面上的下拉菜單的所選項目 如何根據選擇的單選按鈕更改下拉列表的值？ 在 2 個不同的 div ID 中有 2 個同名的 HTML 下拉列表，那么如何使用 AJAX/jQuery 提交特定 div ID 的下拉值 如何在PHP中按下提交按鈕后保持下拉選擇的值？ 如何使用下拉列表中的選定值顯示數據庫中的列表 如何使用php使用數據庫值選擇下拉選項 如何在提交后選擇下拉選項保持選中狀態
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM