get data From Bootstrap 3 modal form with jquery ajax

Question

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 compose;
complete 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="comma 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);

Kelsadita · Accepted Answer · 2014-12-23 19:02:34Z

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

answered Dec 23, 2014 at 19:02

Kelsadita

1,0388 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

get data From Bootstrap 3 modal form with jquery ajax

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related