javascript - get data From Bootstrap 3 modal form with jquery ajax - Stack Overflow

admin管理员组

文章数量:1390503

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

Share Improve this question Follow asked Dec 23, 2014 at 18:14 FrancescoFrancesco 6933 silver badges1010 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

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

本文标签： javascriptget data From Bootstrap 3 modal form with jquery ajaxStack Overflow