I will try to explain my code simple. Basicly I got 2 different files:

```
fun.php
class.fun.php

```

I want to post my forms with ajax, so it won't refresh page.
 In `class.fun.php` I have got `reportForm` for each post.

```
<!-- REPORT MODAL -->
    <div class="modal fade report_post_<?php echo $post['id'];?>" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <b><center><div class="modal-header">Report Post</div></center></b>     
            <form class="horiziontal-form" id="reportForm" action="../Pages/fun.php?action=reportPostForm" method="post">                     
            <center><textarea name="report" style="width:80%; height:200px; margin-top:20px; resize:vertical;" placeholder="Please describe your Report!"></textarea></center>
            <input type="hidden" name="addedby" class="form-control col-md-7 col-xs-12" value="<?php echo $myRow['id']; ?>" />
            <input type="hidden" name="image_id" class="form-control col-md-7 col-xs-12" value="<?php echo $post['id']; ?>" />
            <div class="modal-footer"> <input type="submit" name="submit" value="Submit Form" /></div>                                  
            </div>               
            </div>
    </form> 
    </div>
    <!-- END OF REPORT MODAL -->

```

And after form I got ajax function:

```
     <script> 
   $("#reportForm").submit(function(event){
    event.preventDefault(); //prevent default action 
    var post_url = $(this).attr("action"); //get form action url
    var request_method = $(this).attr("method"); //get form GET/POST method
    var form_data = $(this).serialize(); //Encode form elements for submission

    $.ajax({
        url : post_url,
        type: request_method,
        data : form_data
    }).done(function(response){ //
        $("#server-results").html(response);
    });
});
    </script>       

```

When I click button `submit` I want to send form data to `fun.php` 

This is how I receive data in `fun.php`

```
if(isset($_POST['reportPostForm'])){
    $image_id = strip_tags($_POST['image_id']);
    $report = strip_tags($_POST['report']);
    $addedby = strip_tags($_POST['addedby']);

    $fun->reportPost($image_id,$report,$addedby);       
}   

```

And send them to other function in `class.fun.php`

But at this moment nothing happens. I have been looping trought many
tutorials and can't understand how to make this work. Im newbie in
javascript. I have got working upvote/downvotes scripts where I pass only `post_id` and it works.

I have got script for upvote that works:

```
$("#upvote_<?php echo $post['id'];?>").click(function(){
$.ajax(
  { url: "fun.php?upvote-btn=true?action=select&image_id=<?php echo $post['id'];?>", 
    type: "get",
    success: function(result){
        $('#upvote_<?php echo $post['id'];?>').load(document.URL +  ' #upvote_<?php echo $post['id'];?>');
        $('#downvote_<?php echo $post['id'];?>').load(document.URL +  ' #downvote_<?php echo $post['id'];?>');
        $('#comment_<?php echo $post['id'];?>').load(document.URL +  ' #comment_<?php echo $post['id'];?>');
        $('#share_<?php echo $post['id'];?>').load(document.URL +  ' #share_<?php echo $post['id'];?>');
        $('#report_<?php echo $post['id'];?>').load(document.URL +  ' #report_<?php echo $post['id'];?>');
        $('#report_btn_<?php echo $post['id'];?>').load(document.URL +  ' #report_btn_<?php echo $post['id'];?>');
        document.getElementById("result-box").innerHTML = result;
    }
  });

```

});