How to get data on button click in Bootstrap modal

Question

I'm trying to get the distance from departure and destination using Google Map API. Its working nicely! But the problem is, I have departure field and Destination field. After filling those fields, if I click on " Get the Distance " button then I wanted it to show the distance value in Bootstrap modal. But, its not showing. That means, I'm not getting distance value in Modal.

Form

<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>

Modal 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>

Can you guys please suggest me something?

Answer 1

What you need is modal event and ajax method

Couple of changes required in form

1. change method from get to post or no need at all
2. assign id='myForm' to form
3. change type="submit" to type="button"

The form will be

<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>

Modal HTML (added <div class="getdistance"></div> to display the data via ajax method)

<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>

Modal event listener with Ajax method

$(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
            }
        });
    });
});

last create caculatedistance.php where you handle the form posted values, calculate the distance and echo the output to display in modal

<?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
    }
?>