i wrote this to get form data and post it to a php page and do some proccess and get back a result to me,i start with getting post data from my bootstrap modal form and i found that the script can't take values from modal form,because the php part i can't upload it to fiddle or somewhere else.

• i upload it on my server for rapid review

• click on pose;

• plete the fields
• and when Send button clicked it expect to modal form sent some value to jquery ajax(on submit) but nothing sent from modal inputs to ajax and the whole $_POST array remain null,and whats going on?
• hours and hours i searched for doc's and example's,but i couldn't found any answer,some examples works with bootstrap 2,and nothing for the bootstrap 3.
• bootstrap 3.3.1,jquery 2.1.1

• here is the modal code:

  <div class="modal fade" id="largeModal" tabindex="-1" role="dialog" aria-labelledby="largeModal" aria-hidden="true">
  <div class="modal-dialog">
      <div class="modal-content">
          <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
              <h4 class="modal-title" id="myModalLabel">Compose</h4>
          </div>
          <div class="modal-body">
              <form id="sendmail" data-async  method="post" role="form" class="form-horizontal">
                  <div class="form-group">
                      <label class="col-sm-2" for="inputTo">To</label>
                      <div class="col-sm-10">
                          <input type="email" class="form-control" id="inputTo" placeholder="ma separated list of recipients">
                      </div>
                  </div>
                  <div class="form-group">
                      <label class="col-sm-2" for="inputSubject">Subject</label>
                      <div class="col-sm-10">
                          <input type="text" class="form-control" id="inputSubject" placeholder="subject">
                      </div>
                  </div>
                  <div class="form-group">
                      <label class="col-sm-12" for="inputBody">Message</label>
                      <div class="col-sm-12">
                          <textarea class="form-control" id="inputBody" rows="18"></textarea>
                      </div>
                  </div>
                  <div class="modal-footer">
                      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                      <button type="submit" class="btn btn-primary" value="Submit">Send</button>
                      <div id='response'></div>
                  </div>
              </form>
          </div>
      </div>
  </div>
  

  jQuery:

  $(document).ready(function () {
      $('#sendmail').submit(function () {
          $('#response').html("<b>Loading response...</b>");
          $.ajax({
              type: 'POST',
              url: 'proccess.php',
              data: $(this).serialize()
          })
              .done(function (data) {
                  $('#response').html(data);
  
              })
              .fail(function () {
                  alert("Posting failed.");
  
              });
          return false;
  
      });
  });
  

  Simple PHP Code:

  print_r($_POST);
  

i wrote this to get form data and post it to a php page and do some proccess and get back a result to me,i start with getting post data from my bootstrap modal form and i found that the script can't take values from modal form,because the php part i can't upload it to fiddle or somewhere else.

• i upload it on my server for rapid review

• click on pose;

• plete the fields
• and when Send button clicked it expect to modal form sent some value to jquery ajax(on submit) but nothing sent from modal inputs to ajax and the whole $_POST array remain null,and whats going on?
• hours and hours i searched for doc's and example's,but i couldn't found any answer,some examples works with bootstrap 2,and nothing for the bootstrap 3.
• bootstrap 3.3.1,jquery 2.1.1

• here is the modal code:

  <div class="modal fade" id="largeModal" tabindex="-1" role="dialog" aria-labelledby="largeModal" aria-hidden="true">
  <div class="modal-dialog">
      <div class="modal-content">
          <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
              <h4 class="modal-title" id="myModalLabel">Compose</h4>
          </div>
          <div class="modal-body">
              <form id="sendmail" data-async  method="post" role="form" class="form-horizontal">
                  <div class="form-group">
                      <label class="col-sm-2" for="inputTo">To</label>
                      <div class="col-sm-10">
                          <input type="email" class="form-control" id="inputTo" placeholder="ma separated list of recipients">
                      </div>
                  </div>
                  <div class="form-group">
                      <label class="col-sm-2" for="inputSubject">Subject</label>
                      <div class="col-sm-10">
                          <input type="text" class="form-control" id="inputSubject" placeholder="subject">
                      </div>
                  </div>
                  <div class="form-group">
                      <label class="col-sm-12" for="inputBody">Message</label>
                      <div class="col-sm-12">
                          <textarea class="form-control" id="inputBody" rows="18"></textarea>
                      </div>
                  </div>
                  <div class="modal-footer">
                      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                      <button type="submit" class="btn btn-primary" value="Submit">Send</button>
                      <div id='response'></div>
                  </div>
              </form>
          </div>
      </div>
  </div>
  

  jQuery:

  $(document).ready(function () {
      $('#sendmail').submit(function () {
          $('#response').html("<b>Loading response...</b>");
          $.ajax({
              type: 'POST',
              url: 'proccess.php',
              data: $(this).serialize()
          })
              .done(function (data) {
                  $('#response').html(data);
  
              })
              .fail(function () {
                  alert("Posting failed.");
  
              });
          return false;
  
      });
  });
  

  Simple PHP Code:

  print_r($_POST);
  

• javascript
• php
• jquery
• ajax
• twitter-bootstrap

1 Answer 1

In your code, this which is provided inside the $.ajax method's object refers ajax object. And it seems that you need to refer to the form from which you have to get the data and serialise it and send it into AJAX request.

Try following code,

$(document).ready(function () {
    $('#sendmail').submit(function () {
    var that = this;
    $('#response').html("<b>Loading response...</b>");
    $.ajax({
        type: 'POST',
        url: 'proccess.php',
        data: $(that).serialize()
    })
        .done(function (data) {
            $('#response').html(data);

        })
        .fail(function () {
            alert("Posting failed.");

        });
    return false;

  });
});

here I have referred the form object this by assigning it to that