1

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?

Improve this question
11
  • Try putting your variables $meddelanden and $username directly into VALUES ('$meddelanden','$username'), leave out bind_param() Commented Feb 6, 2017 at 16:32
  • @BrianSmith no then its possible to do mysql injections Commented Feb 6, 2017 at 16:33
  • You need to change your button so that it doesn't submit after the click: <input class = "lg" type="button" name="submit" value="Send"> then wire up your ajax to it's click event. Commented Feb 6, 2017 at 16:42
  • and how am i supposed to do that? @freedomn-m Commented Feb 6, 2017 at 16:45
  • use e.preventDefault(); at the top of your function. Commented Feb 6, 2017 at 16:54

2 Answers 2

Reset to default
2

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>
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

nope didn't work, the message wont get submitted, even if i corrected that url typo
0

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; })

;

Improve this answer

2 Comments

that didn't work for me the form is still heading to meddelanded.php after submit
Please maker sure that your javascript code is added when form element is already in DOM . You can add console.log(this) inside submit callback to check if this code is executed at all when submit button is clicked. If for example you've put this js code in head it will not work