如何在不刷新页面的情况下从另一个菜单中获取值？答案

【问题标题】：How to get values from another menu without refreshing the page?如何在不刷新页面的情况下从另一个菜单中获取值？
【发布时间】：2018-02-11 04:21:40
【问题描述】：

当单击表单上的单选按钮时，我会显示一个弹出菜单。我使用引导模块弹出新菜单。

当我从弹出菜单中选择选项时，表单会被重置。先前输入的表单值将丢失。

这是我的菜单和模块的代码。托管链接也可在此处获得：www.dbghale.ml

    <!DOCTYPE html>
<html lang="en">

<head>

  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Booking Hotel</title>
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="css/style.css">


  <!-- for the editing javascript -->
  <script src="js/main.js"></script>

  <!-- for the datepicker function -->
  <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
  <link href="css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


</head>

<body>
  <div class="col-md-12 gap2"></div>
  <div class="booking">
    <div class="container">

      <div class="col-md-2 col-xs-12">

      </div>
      <div class="col-md-8 col-xs-10 bookingpart">

        <center>
          <h3>Hotel Booking</h3>
        </center>

        <form method="POST" action="index.php">

          <div class="col-md-6 col-xs-12">
            <label>Checkin Date</label>
            <div class="controls input-append date form_date" data-date="" data-date-format="dd MM yyyy"
              data-link-field="dtp_input2" data-link-format="yyyy-mm-dd">
              <input type="text" name="checkinn" value="" readonly placeholder="Checkin Date" class="form-control required glyphicon glyphicon-calendar ">
              <span class="add-on"><i class="icon-remove"></i></span>
              <span class="add-on"><i class="icon-th"></i></span>
            </div>

          </div>

          <div class="col-md-6 col-xs-12">
            <label>Checkout Date</label>
            <div type="text" class="controls input-append date form_date" data-date="" data-date-format="dd MM yyyy"
              data-link-field="dtp_input2" data-link-format="yyyy-mm-dd">
              <input type="text" name="checkoutt" value="" readonly placeholder="Checkout Date"
                class="form-control required">
              <span class="add-on"><i class="icon-remove"></i></span>
              <span class="add-on"><i class="icon-th"></i></span>
            </div>

          </div>

          <div class="col-md-6 col-xs-12">
            <label><br>Location</label>
            <select name="hotel_location" id="hotel_location" class="form-control">
                                <option>Select One</option>
                                <option value="KATHMANDU">KATHMANDU</option>


                      </select>
          </div>


          <div class="col-md-6 col-xs-12">
            <div class="form-group">
              <label><br>Category</label>


              <br>
              <input type="radio" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal1">
              <span
                class="mytext" name="hotel_category" value="3"> 3 star</span>

                <input type="radio" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal2">
                <span
                  class="mytext" name="hotel_category" value="3"> 4 star</span>
                  <!-- Trigger the modal with a button -->
                  <input type="radio" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal3">
                  <span
                    class="mytext" name="hotel_category" value="3"> 5 star</span>


                    <div class=" text-right">

                      <!-- tested for without submitting form -->
                      <!-- <?php
                                 if(isset($_GET['age']))
                                 {

                                  $value=$_GET['value'];

                                  if($value==1){$hotel="Hotel Himalaya"; $type="Double Deluxe room"; $price="US$ 126.00";}
                                      if($value==2){$hotel="Hotel Himalaya"; $type="Exclusive room"; $price="US$ 159.00";}

                                    echo $hotel,"<br>" .$type, "<br>" .$price; 
                                  }    
                                  ?> -->

                      <?php
                                     if(isset($_POST['submitfs']))
                                     {
                                      global $hotel, $type, $price;
                                      $value=$_POST['selected'];

                                      if($value==1){$hotel="Hotel Himalaya"; $type="Double Deluxe room"; $price="US$ 126.00";}
                                      if($value==2){$hotel="Hotel Himalaya"; $type="Exclusive room"; $price="US$ 159.00";}
                                      if($value==3){$hotel="Hotel Himalaya"; $type="Junior Suit"; $price="US$ 199.00";}

                                      if($value==4){$hotel="Dwarika’s Hotel"; $type="Heritage Deluxe Double room "; $price="US$ 303.00";}
                                      if($value==5){$hotel="Dwarika’s Hotel"; $type="Junior Suit"; $price="US$ 399.00";}
                                      if($value==6){$hotel="Dwarika’s Hotel"; $type="Executive Suite"; $price="US$ 542.00";}
                                      if($value==7){$hotel="Dwarika’s Hotel"; $type="Royal Suite"; $price="US$ 2021.00";}

                                      if($value==8){$hotel="Hyatt Regency"; $type="Double Guest Room"; $price="US$ 159.00";}
                                      if($value==9){$hotel="Hyatt Regency"; $type="Stupa View Room"; $price="US$ 185.00";








                                          echo $hotel,"<br>" .$type, "<br>" .$price; 

                                          $_SESSION['hotell']=$hotel;
                                          $_SESSION['typee']=$type;
                                          $_SESSION['pricee']=$price;

                                     } 
                                  ?>
                    </div>
            </div>
          </div>


          <div class="col-md-6 col-xs-12 ">
            <div class="form-group">
              <label><br>Firstname</label>
              <input name="firstname" id="firstname" placeholder="Firstname" class="form-control required"
                type="text">
            </div>
          </div>

          <div class="col-md-6 col-xs-12 ">
            <div class="form-group">
              <label><br>Lastname</label>
              <input name="lastname" id="lastname" placeholder="Lastname" class="form-control  required"
                type="text">
            </div>
          </div>


          <div class="col-md-6 col-xs-12">
            <div class="form-group">
              <label>Email</label>
              <input name="email_address" id="email_address" placeholder="Email Address" class="form-control email required"
                type="text">
            </div>
          </div>

          <div class="col-md-6 col-xs-12 ">
            <div class="form-group">
              <label>Contact No</label>
              <input name="contact_no" id="contact_no" placeholder="Contact No" class="form-control required"
                type="text">
            </div>
          </div>

          <div class="col-md-12 ">
            <div class="form-group">
              <label>Message</label>
              <textarea name="message" id="contact_no" placeholder="Contact No" class="form-control required"></textarea>
            </div>
          </div>

          <div class="col-md-12 col-xs-6">
            <div class="form-group">
              <button type="submit" class="btn btn-primary custom_btn" name="submit_btn" id="hotel_submit_btn">SUBMIT</button>
            </div>
          </div>
        </form>


        <!-- working for the mail function -->
        <?php 
                 if(isset($_POST['submit_btn']))
                 {
                    $hotell=$_SESSION['hotell'];
                    $typee=$_SESSION['typee'];
                    $pricee=$_SESSION['price'];

                    $fname=$_POST['firstname'];
                    $lname=$_POST['laststname'];

                    $location=$_POST['hotel_location'];
                    $checkindate=$_POST['checkinn'];
                    $checkoutdate=$_POST['checkoutt'];

                    $email=$_POST['email_address'];
                    $contact=$_POST['contact_no'];
                    $message=$_POST['message'];

                    $to='db.ghale65@gmail.com';
                    $subject='Hotel Booking';

                    $body = " \n
                        Booking Info \n
                             Category : $hotell
                             Room : $typee 
                             Price : $pricee
                             CheckIn Date : $checkindate 
                             Checkout Date : $checkoutdate 

                        Booked By \n
                             Name : $fname,  $name 
                             Email: $email
                             Contact: $contact 

                             Message : $message 
                             ";


                          if (mail ($to, $subject, $body, $from)) 
                          { 
                            echo '<script> alert("Booking is sucess !!!")</script>';
                          } 
                          else { 
                          echo '<p>Something went wrong, go back and try again!</p>'; 
                          }  


                 } 
                 ?>


      </div>
      <div class="col-md-2 col-xs-12">
      </div>
    </div>
  </div>


  <!-- bootstrap js including -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="js/bootstrap.min.js"></script>


  <!-- jquery cdn -->
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>

  <!-- from the date picker -->
  <script type="text/javascript" src="jquery/jquery-1.8.3.min.js" charset="UTF-8"></script>
  <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="js/bootstrap-datetimepicker.js" charset="UTF-8"></script>
  <script type="text/javascript" src="js/locales/bootstrap-datetimepicker.fr.js" charset="UTF-8"></script>

  <script type="text/javascript">
    $('.form_datetime').datetimepicker({
      //language:  'fr',
      weekStart: 1,
      todayBtn: 1,
      autoclose: 1,
      todayHighlight: 1,
      startView: 2,
      forceParse: 0,
      showMeridian: 1
    });
    $('.form_date').datetimepicker({
      language: 'en',
      weekStart: 1,
      todayBtn: 1,
      autoclose: 1,
      todayHighlight: 1,
      startView: 2,
      minView: 2,
      forceParse: 0
    });
    $('.form_time').datetimepicker({
      language: 'fr',
      weekStart: 1,
      todayBtn: 1,
      autoclose: 1,
      todayHighlight: 1,
      startView: 1,
      minView: 0,
      maxView: 1,
      forceParse: 0
    });

  </script>

</body>

</html>

当我从弹出菜单中选择选项时，我希望不重置的值。

【问题讨论】：

您好，您的代码无需在此处复制并粘贴全部。如果你只发布对你的问题很重要的部分，这个问题会更容易阅读。
欢迎来到 StackOverflow！要获得更好的答案，请阅读如何创建minimal reproducible example。如果您的问题只是关于 JS - 不要包含 php 标记并删除任何不相关的 php 代码。
#Mig82 请查看链接 www.dbghale.ml 并填写表格然后您会看到问题。

标签： javascript php jquery html bootstrap-4

【解决方案1】：

您可以使用 jquery 中的 ajax。您可以从其他文件 php 中调用文件的一些 html 标签值。

$(document).ready(function(){
        $.ajax({
            url:'ekstrnal_file.php',
            success:function(e){
            $("select").html(e);
            }
        })
    });

【讨论】：

【解决方案2】：

您似乎是从 POST 或 Get 发回整个页面，因此再次从头开始。

在 PHP 中，测试您是否仅请求或设置值。您不需要发回 html 页面，它已经在浏览器中准备就绪。如果您在页面中从 PHP 请求数据，请在代码顶部对其进行测试，然后直接返回而不刷新页面。

  <?php
    if(isset($_POST[''submit_btn''))
    {
        echo CallSomeFunctionWithThePostRequest($_POST['submit_btn']);
         return; // don't continuing loading the default page.
    }
    ?>
    < !DOCTYPE html>
    < html lang="en">
    < head>
      ... rest of the page. ....
    < input id="aFormInput" onclick="jsMakeAjaxCallToPage(SomeRequstData);" .  >
    <div id="putResponceHere" ></div>
    < script>
     function jsMakeAjaxCallToPage(SomeRequstData)
      {
     // use an async call to get/set the data.   
     xhttp = new XMLHttpRequest();
     xhttp.onreadystatechange = function() {
     if( xhttp.readyState == 4 && xhttp.status ==200)
     {
       // Your php response is in xhttp.responseText;      
        document.getElementById("putResponceHere").innerHTML= http.responseText;
     } };
     xhttp.open("POST", "",true); //PORT request to the same url as the page.
     xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
     xhttp.send("?request="+SomeRequestData);
     return(false); // don't do the default button action.
    }
    </script>

这是快速粗略的给你的想法。

【讨论】：

感谢您为我编写此代码！ @BitSmith