CODEWITHSUNDEEP
phpjqueryajaxtwitter-bootstrap
user1888260
user1888260

Reputation: 47

bootstrap handling a ajax form submission

I have been trying to get this form to load for a couple days now, but all I can get is the form to submit to a page (not what I want, I want the form to submit and then close the modal and then put a success message from news.php into the div "thanks" holder).

Can anyone spot the issue I am having where it will one load the "news.php" page?

<div id="thanks"></div>    
<div class="modal fade" id="newsModal" tabindex="-1" role="dialog" aria-labelledby="newsModalLabel" 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="newsModalLabel">Add a News Post</h4>
                      </div>
                      <div class="modal-body">
                                <form class="addNew" role="form" method="POST" action="news.php">
                                  <div class="form-group">
                                    <input type="text" name="title" class="form-control" id="title" placeholder="Enter title here...">
                                  </div>
                                  <div class="form-group">
                                    <textarea class="form-control" name="message" rows="7" placeholder="Enter news post here..."></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" id="addNews">Add News Post</button>
                        </form>
                      </div>
                    </div>
                  </div>
                </div>

and the javascript is:

<script type="text/javascript">
        $(document).ready(function () {
            $("button#addNews").click(function(){
                $.ajax({
                    type: "POST",
                    url: "news.php",
                    data: $('form.addNew').serialize(),
                    success: function(msg){
                        $("#thanks").html(msg) //hide button and show thank you
                        $("#newsModal").modal('hide');
                    },
                    error: function(){
                        alert("failure");
                    }
                });
            });
        });
  </script>

Upvotes: 0

Views: 2378

Answers (2)

SJousse
SJousse

Reputation: 711

You didn't pass the event object to your click binding :

<script type="text/javascript">
$(document).ready(function (e) { // pass the event object
    $("button#addNews").click(function(){
        e.preventDefault(); // disable the POST of the form by the submit button
            $.ajax({
            type: "POST",
            url: "news.php",
            data: $('form.addNew').serialize(),
            success: function(msg){
                $("#thanks").html(msg) //hide button and show thank you
                $("#newsModal").modal('hide');
            },
                error: function(){
                alert("failure");
            }
        });
    });
});

Oops, I forgot the BootPly of my test. I just replaced your POST request to a GET one, I don't know how to make POST request inside BootPly.

Upvotes: 3

mesutozer
mesutozer

Reputation: 2859

button#addNews is the submit button for the form, also it's click event is binded with an ajax call. When it is clicked, ajax process begins to execute while the form is being submitted.

You need to remove <form... start & end tags.

Upvotes: 0

Related Questions