So erhalten Sie Daten auf Schaltfläche klicken in Bootstrap modal

Question

Ich versuche, die Entfernung von Abflug und Ziel mit Google Map API zu erhalten. Es funktioniert gut! Aber das Problem ist, ich habe Abgangsfeld und Zielfeld. Nach dem Füllen dieser Felder, wenn ich auf "Holen Sie sich die Entfernung" Schaltfläche, dann wollte ich es den Abstand Wert in Bootstrap modal zeigen. Aber es zeigt nicht. Das heißt, ich bekomme keinen Distanzwert in Modal.

Formular

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

Könnt ihr bitte machen Sie mir etwas?

Answer 1

Was Sie brauchen, ist modal Ereignis und Ajax-Methode

Paar von Änderungen erforderlich form

1. Änderungsverfahren get-post oder keine Notwendigkeit, auf allen
2. zuordnen id='myForm'-form
3. ändern type="submit" zu type="button"

wird das Formular

<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 sein (<div class="getdistance"></div> hinzugefügt, um die Daten über Ajax-Methode zum Anzeigen)

<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 Ereignis-Listener mit Ajax-Methode

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

letzten erstellen caculatedistance.php, wo Sie mit der form geschrieben val berechnen Sie die Entfernung und echo die Ausgabe in modal