如何在 Bootstrap 模态中获取按钮点击数据

Question

我正在尝试使用 Google 地图 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

中需要进行一些更改

将方法从 get 更改为 post 或根本不需要
将id='myForm'分配给form
将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
    }
?>

如何在 Bootstrap 模态中获取按钮点击数据

How to get data on button click in Bootstrap modal

javascript

jquery

twitter-bootstrap

bootstrap-modal