Submit a form without reloading page [duplicate] - php

Question

This question already has answers here:
Submit form without page reloading
(19 answers)
Closed 5 years ago.
I know there are tons of questions like this one, but I still can't get this to work properly. Even a comment of what I should do to make this correct is more than enough since I understand like 80% of the jQuery..
<form action="meddelanden.php" id="fromen2" method="post">
<input type="text" name="message" id="type" autocomplete="off" placeholder="type your chat message">
<input class="lg" type="submit" name="submit" value="Send">
</form>
Meddelanden.php
<?php
session_start();
$meddelanden = $_POST['message'];
$username = $_SESSION['user'];
include ("connect.php");
$sql = $con->prepare('INSERT INTO messages (message,username) VALUES (?,?)');
$sql->bind_param("ss",$meddelanden,$username);
$sql->execute();
$sql->close();
$con->close();
?>
Scripts (which mess things up for my head)
$('#fromen2').submit(function(){
$.ajax({
type: 'POST',
url: meddelanded.php,
data: {
user: username, // <-- is this what i should write in data?!
message: message // <-- and this?!
},
success: function(msg){
alert('Message Sent');
}
});
return false;
});
So, my problem is what I should write in the data:, and I have no clue what I'm supposed to type there! Can anybody help me, or is it something else that makes it not work?

Answer 1

Try something like this. You might have to mess around with it a bit, though. I first prevented the form from automatically submitting when you pressed the submit button, then I use the value entered by the user into message, and input the value for messageInput in the data. Hope this helps.
$('#fromen2').submit(function(e){
e.preventDefault();
var userMessage = $('#messageInput').val();
$.ajax({
type: 'POST',
url: meddelanded.php,
data: {
//You dont need to send user data becaues you are setting the user variable with $_SESSION in php file
message: userMessage
},
success: function(msg){
alert('Message Sent');
}
});
return false;
});
HTML
<form id="fromen2" method="post">
<input type="text" id = "messageInput" autocomplete="off" placeholder="type your chat message">
<input class = "lg" type="submit" name="submit" value="Send">
</form>
Alternatively, instead of using the .submit() as the event, you could add a function to an onclick event that will retrieve the data from the form and post the data with AJAX to your PHP script.
$('#submitButton').on('click', function(e){
e.preventDefault();
var userMessage = $('#messageInput').val();
$.ajax({
type: 'POST',
url: meddelanded.php,
data: {
//You dont need to send user data becaues you are setting the user variable with $_SESSION in php file
message: userMessage
},
success: function(msg){
alert('Message Sent');
}
});
});
HTML
<form id="fromen2">
<input type="text" id = "messageInput" autocomplete="off" placeholder="type your chat message">
<input class = "lg" id="submitButton" name="submit" value="Send">
</form>

Answer 2

Just serialize form data using jQuery serialize:
$('#fromen2').submit(function(){
$.ajax({
type: 'POST',
url: meddelanded.php,
data: $(this).serialize()
success: function(msg){
alert('Message Sent');
}
});
return false;
})
;