Home Passing data from a from to bootstrap modal using PHP
Reply: 1

Passing data from a from to bootstrap modal using PHP

Arman Masangkay
1#
Arman Masangkay Published in 2018-01-13 07:29:28Z

I wanted to pass a data to a modal from this textbox using PHP

Textbox code:

 <input type="text" id="weights" class="form-control" placeholder="Weight (lbs)" name="weight">

This is the button code:

<button type="button" class="btn btn-primary btn-block" data-toggle="modal" data-target="#exampleModalCenter" id="buttonx">Submit</button>

Jquery Code:

 $(document).ready(function() {
  $('#exampleModalCenter').on('show.bs.modal', function(e) {
    var weight = document.getElementById("weights");
    $.ajax({
      type: 'post',
      url: 'showResult.php',
      data: 'weight=' + weight,
      success: function(data) {
        $('#fetched-data').html(data);
      }
    });
  });
});

Modal Code:

<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Results</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                          <span aria-hidden="true">&times;</span>
                        </button>
      </div>
      <div class="modal-body" id="fetched-data">

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>

      </div>
    </div>
  </div>
</div>

PHP:

<?php
$data=$_POST["weight"];
echo "The weight is $data";
?>

When i click the button, nothing really shows up. Even the modal, doesn't show up.

Khan Afzal
2#
Khan Afzal Reply to 2018-01-13 07:55:03Z

PROBLEMS IN YOUR CODE

  1. First of all your not getting the value in weights variable.
  2. You are not able to trigger modal because of data-target attribute.
  3. You are not able to pass value to your ajax call.

BELOW SOLUTION MIGHT SOLVE YOUR PROBLEM:

Hope this pen -> https://codepen.io/afzal_coder/pen/rpKdgK solve your query.

and add this code to your php file.

<?php 
$data = $_POST['weight'];
echo $data;
?>
You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.379088 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO