Submit a form without reloading page

Question

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?

Try putting your variables $meddelanden and $username directly into VALUES ('$meddelanden','$username'), leave out bind_param() — Brian Smith, Feb 06 '17 at 16:32
You need to change your button so that it doesn't submit after the click: `` then wire up your ajax to it's click event. — freedomn-m, Feb 06 '17 at 16:42
@freedomn-m didn't work, when i submit im still getting redirected to meddelanden.php — , Feb 06 '17 at 17:13
@DolanDuck I think you are going to need to do some granular debugging. In your js, start adding console.log after each statement and see which ones appear in dev tools. Add additional callbacks for "done" and "fail" and place console.log statements in them. In your php, echo some text to return to the success function in js and then console.log it. Turn on error_reporting at the top of your .php script (error_reporting(E_ALL); ini_set('display_errors',1);) and see if an error gets returned to js. — tjfo, Feb 06 '17 at 17:30

score 2 · Answer 1 · edited Jul 24 '17 at 05:32

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>

nope didn't work, the message wont get submitted, even if i corrected that url typo — , Feb 06 '17 at 17:06

score 0 · Answer 2 · answered Feb 06 '17 at 16:33

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

;

answered Feb 06 '17 at 16:33

Bartek Fryzowicz

6,464
18
27

that didn't work for me the form is still heading to meddelanded.php after submit – Feb 06 '17 at 16:38
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 – Bartek Fryzowicz Feb 06 '17 at 18:22

Submit a form without reloading page

2 Answers2