Как получить данные при нажатии кнопки в Bootstrap modal

Я пытаюсь получить расстояние от отправления и назначения с помощью API карт Google. Он работает красиво! Но проблема в том, что у меня поле отправления и поле назначения. После заполнения этих полей, если я нажму на кнопку «Получить расстояние», то я хотел, чтобы оно отображало значение расстояния в Bootstrap modal. Но, не показывая. Это означает, что я не получаю дистанционное значение в Modal.Как получить данные при нажатии кнопки в 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>

Может вы, ребята, пожалуйста, предложите мне что-нибудь?

источник

2016-04-10 Arnob Ferdous

Предлагаю вам отправить код, который вы пробовали, чтобы мы могли помочь вам выяснить, что случилось. – WillardSolutions

Я написал сценарий Php, чтобы получить значение расстояния. Его генерирующее расстояние приятно. Но я просто хочу, чтобы это было показано модально. Вот мой код: Моя форма: http://pastebin.com/YBTmxt2f Модальный: http://pastebin.com/uk0N5ZQC –

Что вам нужно, это модальное событие и Аякс метод

Пар необходимых изменений в 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 ues, рассчитать расстояние и эхо выводить на дисплей в модальном

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

источник

2016-04-11 09:00:28 Shehary

Как получить данные при нажатии кнопки в Bootstrap modal

ответ

Смежные вопросы