AJAX call not sending - php

Question

I am trying to create my first AJAX call. All I am trying to do is send a message to my database that will hold a user_id, message, and date.
As of now nothing is even happening when I hit the submit button. Why is this not submitting and I'm not sure if I am creating the ajax call correctly.
What am I doing wrong?
My ajax call
$(document).ready(function () {
$("#submit_announcement").on("click", function () {
$user = this.value;
$.ajax({
url: "insert_announcements.php",
type: "POST",
data: "username=" + $user,
success: function (text) {
if (text == "Error!") {
alert("Unable to get user info!");
$(".announcement_success").fadeIn();
$(".announcement_success").show();
$('.announcement_success').html('Payment Status Changed!');
$('.announcement_success').delay(5000).fadeOut(400);
alert(data);
} else {
var txtArr = text.split('|');
}
},
error: function (xhr, textStatus, errorThrown) {
alert(textStatus + "|" + errorThrown);
}
});
});
});
The Form
<div class="announcement_success"></div>
<p>Add New Announcement</p>
<form action="" method="POST" id="insert_announcements">
<textarea rows="4" cols="50" id="announcement_message " name="message" class="inputbarmessage" placeholder="Message" required></textarea>
<label for="contactButton">
<input type="button" class="contactButton" value="Add Announcement" id="submit">
</label>
</form>
PHP file insert_announcements.php
$con = mysqli_connect("localhost", "", "", "");
$stmt2 = $con->prepare("INSERT INTO announcements (user_id, message, date) VALUES (?, ?, NOW())");
if ( !$stmt2 || $con->error ) {
// Check Errors for prepare
die('Announcement INSERT prepare() failed: ' . htmlspecialchars($con->error));
}
if(!$stmt2->bind_param('isi', $announcement_user_id, $announcement_message)) {
// Check errors for binding parameters
die('Announcement INSERT bind_param() failed: ' . htmlspecialchars($stmt2->error));
}
if(!$stmt2->execute()) {
die('Announcement INSERT execute() failed: ' . htmlspecialchars($stmt2->error));
}
echo "Announcement was added successfully!";
else
{
echo "Announcement Failed!";
}

Answer 1

You have the jquery selector for your button wrong, change it to:
$("#submit").on("click", function(){

Answer 2

You are triggering the click for an element with id #submit_announcement which is different from the id of your form submit button. Change $("#submit_announcement").on("click", function(){
to
$("#submit").on("click", function(){

Answer 3

In your PHP you cannot echo between } and else
}
echo "Announcement was added successfully!";
else

Answer 4

Use one of below event bind method :
$(document).ready(function(){
$("#submit").on("click", function(){ console.log('reached'); /* code here */ });
$('#insert_announcements').on('submit',function(){ /* code here */ })
})
One of above approach should work . Your ajax code looks fine . just use one of above event bind wrapper and let the magic happen .
Update
check working fiddle here : https://jsfiddle.net/hfddcop0/
Mistakes you were making
1) specifying wrong submit button id . it is submit_announcement instead of #submit
2) Unknown variable defined called usermessage . I have replaced it with string value in fiddle .
payload should be like
data : {'message':message,'anothermessgae':another} , You were mentioning like data : {'message':message;} which is a syntax error .

Answer 5

Because you're not creating the function when the submit button is clicked. The button id is submit
So try:
$(document).ready(function(){
$("#submit").on("click", function(){
$user = this.value;
$.ajax({
url: "insert_announcements.php",
type: "POST",
data: "username="+$user,
success: function(text){
if(text == "Error!"){
alert("Unable to get user info!");
$(".announcement_success").fadeIn();
$(".announcement_success").show();
$('.announcement_success').html('Payment Status Changed!');
$('.announcement_success').delay(5000).fadeOut(400);
alert(data);
} else {
var txtArr = text.split('|');
}
},
error: function(xhr, textStatus, errorThrown){
alert(textStatus + "|" + errorThrown);
}
});
});
});

Answer 6

You are not sending user_id, message, and date to server to get the response.
first get inputted values and then send.Like below:
var announcement_message = $("#announcement_message).val();
and instead of type,it should be method.Type in ajax is to define data type.
In html, remove method="post",define method only once.

Answer 7

$("#submit").on("click", function(){
var usermessage = $("#announcement_message).val();
var username = "ralph"; // let say you get the username value;
var date_now = Date.now();
$.ajax({
url:"insert_announcements.php",
method:"POST",
data:{
"user_id":username,
"message":usermessage,
"date":date_now
}
success:function(data){
console.log(data); // data object will return the response when status code is 200
},
error:function(){
console.log("error");//otherwise error if status code is other than 200.
}
});
});