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">×</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>