Inserting a database record from an HTML form with jQuery + AJAX

Question

Inserting a database record from an HTML form with jQuery + AJAX is what I'm trying to do but it doesn't seem to work for me.

The HTML looks like this:

        <form method="post" id="message-form">
            <textarea id="new-message" name="message" placeholder="Nieuw bericht"></textarea>
            <input type="hidden" id="message-sender" name="sender" value="<?=$_SESSION["user_id"]?>">
            <input type="hidden" id="message-recipient" name="recipient" value="<?=$aConversationPartner["id"]?>">
            <input type="submit" name="submit-message" id="send-message" value="Verstuur bericht">
        </form>

The jQuery code looks like this:

       $("#send-message").click(function (e) {
                e.preventDefault();
                if($("#new-message").val()==='')
                {
                    alert("Uw bericht is leeg!");
                    return false;
                }

                var myData = 'message='+ $("#new-message").val() + '&sender=' + $("#message-sender").val() + '&recipient=' + $("#message-recipient").val(); //build a post data structure
                jQuery.ajax({
                    type: "POST",
                    url: "sendmessage.php",
                    dataType:"text",
                    data:myData,
                    success:function(response){

                        console.log("great succes");

                    }
                });
        });

sendmessage.php looks like this:

<?

require_once("config.php");
require_once("lib.php");

sendMessage($_POST["sender"], $_POST["recipient"], $_POST["message"], 1);

?>

The sendMessage php function works perfectly if I use it without AJAX so that wouldn't be the problem. What is very weird though is that I don't get any console errors at all and the console.log("great succes"); is fired. I'm new to jQuery + AJAX and desperate for an answer. Please give me an answer I can understand and implement.

I don't use firefox. But I'll have a go with firefox + firebug — user2568495
– user2568495, Commented Mar 3, 2015 at 16:04
How do I return the data from the var_dump to ajax and log it to the console? — user2568495
– user2568495, Commented Mar 3, 2015 at 16:15

Jerodev · Accepted Answer · 2015-03-03 16:04:09Z

1

You should put your data in a JavaScript object.

replace

var myData = 'message='+ $("#new-message").val() + '&sender=' + $("#message-sender").val() + '&recipient=' + $("#message-recipient").val();

by

var myData = {
    message: $("#new-message").val(),
    sender: $("#message-sender").val(),
    recipient: $("#message-recipient").val()
};

answered Mar 3, 2015 at 16:04

Jerodev

33.3k11 gold badges96 silver badges113 bronze badges

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

2 Comments

jeroen Over a year ago

That is probably the problem. Serializing the form would be even shorter: var myData = $('form').serialize();

user2568495 Over a year ago

Thanks for your suggestions :) I used jeroen's method to serialize my form data but seemingly it still doesn't work..

Barmar · Accepted Answer · 2015-03-03 16:05:46Z

1

You're not escaping the values in your query string. There are two easy ways to do this with jQuery:

Use var myData = $("#message-form").serialize(); since you're sending all the values from the form.

Put the parameters into an object:

var myData = {
    message: $("#new-message").val(),
    sender: $("#message-sender").val(),
    recipient: $("#message-recipient").val()
};

The plain Javascript way is to call encodeURIComponent:

var myData = 'message='+ encodeURIComponent($("#new-message").val()) +
    '&sender=' + encodeURIComponent($("#message-sender").val()) + 
    '&recipient=' + encodeURIComponent($("#message-recipient").val());

answered Mar 3, 2015 at 16:05

Barmar

789k57 gold badges554 silver badges669 bronze badges

1 Comment

user2568495 Over a year ago

I used the first method you propose but it still doesn't work :( Might it be something else?

Collectives™ on Stack Overflow

Inserting a database record from an HTML form with jQuery + AJAX

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related