Cannot pass HTML form data to PHP file with AJAX

Question

I have an HTML file (index.html) with a form in it. I want to use AJAX to pass the form input to a PHP script called messagehandler.php, and messagehandler.php should then write the form input to a text file called messages.txt. For some reason, absolutely nothing happens when I input something to the form. I know that messagehandler.php writes to messages.txt correctly. index.html and messagehandler.php are below.

index.html:

<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="index.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <title>Chat</title>
    </head>

    <body>
        <div id="inputbox">
                <form id="messageinput">
                <input type="text" name="message" id="submitbox" autofocus="autofocus" autocomplete="off">
                <input type="submit" value="" id="submitbutton">
            </form>
        </div>
    </body>

    <script>    
        $("#messageinput").submit(function() {
            var $messageSent = $("#messageinput").serialize();
            alert($messageSent);

            $.ajax({
                type: 'POST',
                url: 'messagehandler.php',
                data: $messageSent,
                success: function(response) {
                    alert("it worked");
                }
            });
        });

    </script>
</html>

messagehandler.php:

<?php
    $messageSent = $_POST['message'];
    $messages = fopen("messages.txt", "a");
    fwrite($messages, addslashes("<br />" . $messageSent));
    fclose($messages);
?>

When I enter "test" into the form and submit it, the alert says the value of $messageSent is message=test.

Any idea how to get this working? Thanks!

Try event.preventDefault(). $("#messageinput").submit(function(e) { e.preventDefault() ....... }); — Harish Kommuri
– Harish Kommuri, Commented May 5, 2018 at 1:42
@Harish Thank you so so much, that worked. It was killing me because I thought it should be working (and apparently does work for @Sarpyjr). Would you mind posting this as an answer so I can accept it? — maknel
– maknel, Commented May 5, 2018 at 1:46

Harish Kommuri · Accepted Answer · 2018-05-05 01:57:03Z

1

HTML form submission will reload the page content. Use event.preventDefault() to prevent default actions of html elements.

$("#messageinput").submit(function(e) {
    e.preventDefault(); // -> It prevents the default actions 

    var $messageSent = $("#messageinput").serialize();
    alert($messageSent);
    ......  
});

answered May 5, 2018 at 1:57

Harish Kommuri

2,8641 gold badge24 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Cannot pass HTML form data to PHP file with AJAX

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related