How to add parameter for the form action in ajax?

Question

I have the following form which works fine without the ajax

echo "

<form action='upload_Comment.php?post_id=$post_id' method='post' id='comments'>

<textarea class='form-control' name='comment' rows='1'></textarea>

<input type='submit' name='post_comment'>
</form>


    ";

But I need to use ajax to prevent the page from reloading when the form is submitted.

$(document).ready(function(){
  $('#comments').on('submit', function(e) {
    e.preventDefault();

    $.ajax({
      url: "upload_comment.php?post_id= + post_id ",
      type: "POST",
      data: new FormData(this),
      dataType : 'json',
      contentType: false,
      processData: false,
      success : function(data){                   
                              console.log(data);

                      },
                      error: function(){alert('Error!')}
    })

  });
});

I need a way to pass $post_id parameter value every time I submit the new post and that post_id is unique for each post. How can I pass that post_id parameter in ajax form url?

If it's a serverside variable, place it in a hidden input instead of the querystring for the action — adeneo, Oct 01 '16 at 04:23
I have tried passing the $post_id value in a hidden field but it only picks up the first post id from the database not specific to post submit — chris, Oct 01 '16 at 04:28
You might want to give session variables a try. By setting the post id in the session var before showing the form, and picking it up directly in your handler, upload_comment.php without using the querystring. — nocturns2, Oct 01 '16 at 05:31

score 1 · Answer 1 · edited Apr 23 '21 at 09:50

Take a hidden field and assign the post id's value into it

<form action='upload_Comment.php' method='post' id='comments'>
  <textarea class='form-control' name='comment' rows='1'></textarea>
  <input type="hidden" value="<?=$post_id;?>" id="postId">
  <input type='submit' name='post_comment'>
</form>

and js code will be

$(document).ready(function () {
    $('#comments').on('submit', function (e) {
        e.preventDefault();
        var post_id = $('#postId').val();
        $.ajax({
            url: "upload_comment.php?post_id=" + post_id,
            type: "POST",
            data: new FormData(this),
            dataType: 'json',
            contentType: false,
            processData: false,
            success: function (data) {
                console.log(data);

            },
            error: function () {
                alert('Error!')
            }
        })

    });
});

I tried this but the hidden value of $post_id is always picked up as 1 and the post id for each form submit is different as it is in a loop — chris, Oct 01 '16 at 04:58
it was my mistake url: "upload_comment.php?post_id=" + post_id instead of url: "upload_comment.php?post_id=+ post_id" — Pradyut Manna, Oct 01 '16 at 05:19

score 0 · Answer 2 · edited May 23 '17 at 12:10

You should not mix POST and GET requests, because GET used to GET information, no to pass it in. Your code, probably, should look like this:

var fData = new FormData(this);
fData.append('post_id', post_id);

Also, read this: HTTP POST with URL query parameters -- good idea or not?

"upload_comment.php?post_id= + post_id "

Should look like this (seriously, don't do this):

"upload_comment.php?post_id=" + post_id

How to add parameter for the form action in ajax?

2 Answers2