Question

我试图使用Google Map API远离出发地和目的地。它工作得很好！但问题是，我有离场和目的地字段。填写这些字段后，如果我点击＆＃34; 获取距离＆＃34;按钮然后我希望它显示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模式

1 个答案: