pass ajax array into data:

Question

so i'm new to ajax and i'm facing a problem getting all the values from my form.

So i wanna insert the name reply_txt and the $ newsId to my table

html form:

<form>
   <input type="hidden" name="replyToPost" value="<?php echo $newsId;?>">
   <textarea name="reply_txt" class="replyText"></textarea>
   <button class="replySubmit">Answer</button> 
</form>

ajax: Ithink i have to pass an array in somehow into the data:replyData

$(".replySubmit").click(function(event){
        event.preventDefault();//prevent action from button

        var replyData = 'reply_txt='+ $(".replyText").val(); //build a post data structure

        $.ajax({
            type: "POST", // POST type
            url: "response.php", //call ajax on page
            dataType:"text", //type of data html/ajax/jason ...
            data:replyData, //Form variables intups

            success:function(response){
                $(".respondsReply").append(response);
                $(".replyText").val(''); //empty text field on successful
            },
            error:function (xhr, ajaxOptions, thrownError){
                alert(thrownError);
            }
        });
});

response.php: The error is undefined variable $newsId

if(isset($_POST["reply_txt"]) && strlen($_POST["reply_txt"])>0){
   $replyToSave = filter_var($_POST["reply_txt"],FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_HIGH);
   $newsId = $_POST["replyToPost"]; 

$userId = $_SESSION['userId'];
$reply_row = $db->query("INSERT INTO replyPost(message,newsId_fk,userId_fk) VALUES('$replyToSave','$newsId','$userId')");
}

Answer 1

You can actually pass a JS object to the data attribute of the ajax call:

$(".replySubmit").click(function(event){
    event.preventDefault();//prevent action from button

    // Build the data object for ajax request:
    var replyData = {
      "reply_txt" : $(".replyText").val(),
      "replyToPost": $("input[name=replyToPost]").val()
    };

    $.ajax({
        type: "POST", // POST type
        url: "response.php", //call ajax on page
        dataType: "text", //type of data html/ajax/jason ...
        data: replyData, //data object

        success: function(response){
            $(".respondsReply").append(response);
            $(".replyText").val(''); //empty text field on successful
        },
        error: function (xhr, ajaxOptions, thrownError){
            alert(thrownError);
        }
    });
});

---

Also I hope that the code in response.php is only for demonstration/testing! Using un-escaped $_POST values in the SQL statement is EXTREMLY dangerous

Answer 2

You are only sending the reply_txt value in the AJAX data. You need to add the replyToPost field's value too:

var replyData = 'reply_txt=' + $(".replyText").val() + '&replyToPost=' + $('input[name="replyToPost"]').val();

Alternatively (and preferably) you can use the serialize() to let jQuery automatically create a serialised string for you:

$(".replySubmit").click(function(event){
    event.preventDefault(); //prevent action from button
    $.ajax({
        type: "POST", // POST type
        url: "response.php", //call ajax on page
        dataType: "text", //type of data html/ajax/jason ...
        data: $(this).serialize(), //Form variables intups
        success:function(response){
            $(".respondsReply").append(response);
            $(".replyText").val(''); //empty text field on successful
        },
        error:function (xhr, ajaxOptions, thrownError){
            alert(thrownError);
        }
    });
});