Member Avatar for elbren
my Form
    <form role="form" method="post">
              <div class="form-group">
                <label for="email">Email address:</label>
                <input type="text" class="form-control" id="email" name="email">
              </div>
              <div class="form-group">
                <label for="pwd">Password:</label>
                <input type="text" class="form-control" id="pwd">
              </div>

              <button type="button" class="btn btn-default" data-toggle="modal" data-target="#myModal" name="submit">Submit</button>
            </form>
my Modal
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
            <?php 

               === i want to retreive the value of textboxes in my form ====
            ?>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>
  • 2 Contributors
  • 1 Reply
  • 596 Views
  • 14 Hours Discussion Span
  • Latest Post Latest Post by Aeonix

Dani AI

Generated

Short answer: use client-side JavaScript. PHP inside the modal cannot read values the user types after the page is delivered (PHP runs on the server before the browser sees the page). As suggested, grab the inputs with JS and inject them into the modal when the modal is about to open. For 's markup (inputs with ids email and pwd and #myModal), either handle the button click that triggers the modal or populate the modal on its show event.

Vanilla JS (attach to the button that has data-target="#myModal"):

document.addEventListener('DOMContentLoaded', function () {
  var trigger = document.querySelector('[data-target="#myModal"]');
  trigger.addEventListener('click', function () {
    var email = (document.getElementById('email') || {}).value || '';
    var pwd = (document.getElementById('pwd') || {}).value || '';
    var body = document.querySelector('#myModal .modal-body');
    body.innerHTML = '';
    var p1 = document.createElement('p'); p1.textContent = 'Email: ' + email;
    var p2 = document.createElement('p'); p2.textContent = 'Password: ' + (pwd ? pwd.replace(/./g, '*') : '');
    body.appendChild(p1); body.appendChild(p2);
  });
});

jQuery + Bootstrap (populate on modal show):

$('#myModal').on('show.bs.modal', function () {
  var email = $('#email').val() || '';
  var pwd = $('#pwd').val() || '';
  var masked = pwd ? pwd.replace(/./g, '*') : '';
  $(this).find('.modal-body').empty()
    .append($('<p>').text('Email: ' + email))
    .append($('<p>').text('Password: ' + masked));
});

Quick tips: ensure unique ids, put scripts after the DOM or wrap in DOMContentLoaded, load jQuery before your script if using it, and keep the button type="button" so it does not submit the form. Do not display plain-text passwords in the UI. If you actually need server-side processing (PHP), submit the form or send the data via AJAX/fetch to a PHP endpoint and display the server response in the modal.

Member Avatar for Aeonix

Uhm, not PHP, but JavaScript.

Create a function. That will get triggered each time someone pressed "Submit".
Retrieve the content of input field.
Write the content of the variable in wished place.

If you feelin' like stuck. You know where to find me ;)

Other side, using PHP, involves either reloading the entire website, or using AJAX response... but even then, it's still JavaScript or jQuery (it's library).

Edited by Aeonix
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.