如何在Bootstrap模式中單擊按鈕獲取數據

Question

我正在嘗試使用Google Map API獲取離出發地和目的地的距離。 它的工作很好！ 但是問題是，我有出發字段和目的地字段。 填寫完這些字段后，如果我單擊“ 獲取距離 ”按鈕，則希望它在Bootstrap模態中顯示距離值。 但是，它沒有顯示。 這意味着，我沒有在Modal中獲得距離值。

形成

<form action="" method="get">
    <div class="InP">
        <div class="input-group IGCustom">
          <span class="input-group-addon InputGroup" id="basic-addon3"><?php _e('Departure', 'moorgiz_lang'); ?></span>
          <input type="text" name="departure" class="form-control ICustom" id="departure" aria-describedby="basic-addon3" placeholder="<?php _e('Ex: N Rue, Code Postale, Ville', 'moorgiz_lang');?>">
        </div>
    </div>

    <?php if($moorgiz['customize-style']=='black') { ?>
    <img style="float: left; margin-top: 5%; margin-left: 30px;" src="<?php echo get_template_directory_uri(); ?>/images/black/location.png" />
    <?php } else { ?>
    <img style="float: left; margin-top: 5%; margin-left: 30px;" src="<?php echo get_template_directory_uri(); ?>/images/icons/location.png" />
    <?php } ?>
    <div class="InP" style="margin-top:4%;">
        <div class="input-group IGCustom">
          <span class="input-group-addon InputGroup" id="basic-addon3"><?php _e('Destination', 'moorgiz_lang'); ?></span>
          <input type="text" name="desti" class="form-control ICustom" id="destination" aria-describedby="basic-addon3" placeholder="<?php _e('Ex: N Rue, Code Postale, Ville', 'moorgiz_lang');?>">
        </div>
    </div>

    <div class="form-group">
      <label class="text-left CustomLabel-NoP" for="sel1"><?php _e('Number of Passengers', 'moorgiz_lang'); ?></label>
          <select class="form-control pull-left CustomControl-NoP" id="sel1">
            <option>1</option>
            <option>2</option>
            <option>3</option>
          </select>
    </div>
    <div class="col-sm-12">
        <input type="submit" class="btn btn-info pull-right ButtonPos" data-toggle="modal" data-target="#myModal" value="CALCULATE"/>
</form>

模態HTML

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
         <?php
            $addressFrom = $_GET['departure'];
            $addressTo = $_GET['desti'];
            $distance = getDistance($addressFrom, $addressTo, "K");
            echo $distance;
        ?>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

你們能給我推薦點什么嗎？

Answer 1

您需要的是模態事件和ajax方法

form需要進行的幾處更改

1. 從get到post或完全不需要更改方法
2. 將id='myForm'分配給form
3. 將type="submit"更改為type="button"

表格將是

<form action="" method="POST" id="myForm">
    <div class="InP">
        <div class="input-group IGCustom">
          <span class="input-group-addon InputGroup" id="basic-addon3"><?php _e('Departure', 'moorgiz_lang'); ?></span>
          <input type="text" name="departure" class="form-control ICustom" id="departure" aria-describedby="basic-addon3" placeholder="<?php _e('Ex: N Rue, Code Postale, Ville', 'moorgiz_lang');?>">
        </div>
    </div>

    <?php if($moorgiz['customize-style']=='black') { ?>
    <img style="float: left; margin-top: 5%; margin-left: 30px;" src="<?php echo get_template_directory_uri(); ?>/images/black/location.png" />
    <?php } else { ?>
    <img style="float: left; margin-top: 5%; margin-left: 30px;" src="<?php echo get_template_directory_uri(); ?>/images/icons/location.png" />
    <?php } ?>
    <div class="InP" style="margin-top:4%;">
        <div class="input-group IGCustom">
          <span class="input-group-addon InputGroup" id="basic-addon3"><?php _e('Destination', 'moorgiz_lang'); ?></span>
          <input type="text" name="desti" class="form-control ICustom" id="destination" aria-describedby="basic-addon3" placeholder="<?php _e('Ex: N Rue, Code Postale, Ville', 'moorgiz_lang');?>">
        </div>
    </div>

    <div class="form-group">
      <label class="text-left CustomLabel-NoP" for="sel1"><?php _e('Number of Passengers', 'moorgiz_lang'); ?></label>
          <select class="form-control pull-left CustomControl-NoP" id="sel1">
            <option>1</option>
            <option>2</option>
            <option>3</option>
          </select>
    </div>
    <div class="col-sm-12">
        <input type="button" class="btn btn-info pull-right ButtonPos" data-toggle="modal" data-target="#myModal" value="CALCULATE"/>
</form>

模態HTML（添加了<div class="getdistance"></div>以通過ajax方法顯示數據）

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
          <div class="getdistance"></div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

使用Ajax方法的模態事件偵聽器

$(document).ready(function(){
    $('#myModal').on('show.bs.modal', function () {
        var form = $('#myForm'); //Get Form
        $.ajax( {
            type: "POST",
            url: caculatedistance.php, //Create this file to handle the form post data
            data: form.serialize(), //Post the form
            success: function(response) {
                $('.getdistance').html(response); //show the distance in modal
            }
        });
    });
});

最后創建caculatedistance.php ，在其中處理form發布的值，計算距離並回顯輸出以模態顯示

<?php
    //include getDistance() function
    if(isset($_POST['departure'])) {
        $addressFrom = $_POST['departure'];
        $addressTo = $_POST['desti'];
        $distance = getDistance($addressFrom, $addressTo, "K");
        echo $distance; //this value will show in modal
    }
?>