尝试使用onclick事件提交表单，也在formData中附加值

Question

I am trying to submit a form using onclick event since I need to pass a value to that function as well. But when I click the submit button, the page reloads and shows no data. Also, the textarea is empty and is not picking up the values.

Let me show you the code:

<form action="" id="form_content">
    <textarea name="textdata" id="content" cols="50" rows="50" class="form-control message" placeholder="Whats on your mind ?"></textarea>
    <button type="submit" onclick="comment_here('+post_id+');">Comment</button></form>

The script:

function comment_here($post_id) {
    // alert($post_id);
    document.getElementById("form_content").submit();

    var Post_id=$post_id;
    var User_id = $('.id_data').attr('value');
    var textdata = $("#content").val();
    alert(textdata);

    jQuery.ajax({
        type:'POST',
        url:'<?php echo base_url("user/post_comment"); ?>',
        data: {Post_id:Post_id,User_id:User_id,textdata:textdata},
        dataType: 'json', 
        success:function(data) {
            alert('you have like this');
        }
    });

});
}

This is my code, but its now working. Can you tell me where I am wrong?

edited attempt:

jQuery('#comment_button').on('onclick',function(e){
    alert('data');
    var Post_id=$post_id;
    var User_id = $('.id_data').attr('value');
    var textdata = $("#content").val();
    alert(textdata);

    jQuery.ajax({
        type:'POST',
        url:'<?php echo base_url("user/post_comment"); ?>',
        data: {Post_id:Post_id,User_id:User_id,textdata:textdata},
        dataType: 'json', 
        success:function(data) {
            alert('you have like this');
        }
    });    
});

edited

$(document).on('click','#comment_button',function(e){
    // this will prevent form and reload page on submit.
    e.preventDefault();
    var Post_id=$post_id;
    var User_id = $('.id_data').attr('value');
    // here you will get Post ID

     var textdata = $('textarea#content').val();
    alert(textdata);
   // Add your Ajax call here.
   $.ajax({
                  type:'POST',
                  url:'<?php echo base_url("user/post_comment"); ?>',
                  data: {textdata:textdata},
                  dataType: 'json', 
                  success:function(data)
                  {
                    alert('you have like this');
                  }

Answer 1

I have added Data attribute of the HTML5 and try this code it is working perfectly as you want,

You can add form.serialize() also in the data of the ajax,

$(document).on('click','#button_comment',function(e){
    // this will prevent form and reload page on submit.
    e.preventDefault();
    
    // here you will get Post ID
    my_post_id=$(this).attr('data-postId');
    var User_id = $('.id_data').attr('value');
    var textdata = $('textarea#content').val();
    alert(textdata);

   // Add your Ajax call here.
    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" id="form_content">

<textarea name="textdata" id="content" cols="25" rows="10"  class="form-control message"  placeholder="Whats on your mind ?"></textarea>

<!-- use Data attribute that save post id on submit button -->

<button type="submit" id="button_comment" data-postId="12">Comment</button></form>

</div>