My Jquery Ajax Code Refresh The Page Without Reason

I have simple ajax-jquery/html/php code, but I get the problem when I click on button to add data, then page just refresh and nothing happend, also I cant see what is the problem b

Solution 1:

You need to prevent the default action. Try:

 $("#addCom").click(function(evt) {
     evt.preventDefault();
     ....

official docs

Solution 2:

try this , add event.preventDefault();

$( document ).ready(function() {
$("#addCom").click(function(event) {
event.preventDefault();
    var tabela = 'parcele';
        $.ajax({
            url: "insertKom.php",
            type: "POST",
            async: true, 
            data: { ajdi:ajdi, tabela:tabela,zakoga:$("#zakoga").val(),beleska:$("#beleska").val(),podsetnik:$("#podsetnik").val()},
            dataType: "html",

            success: function(data) {
                console.log(data);  
            },
            error:function(data) {
            console.log(data); 
            }
        });

});
 });

Solution 3:

You need preventDefault to stop the form from submitting.

$( document ).ready(function() {
  $("#addCom").click(function(e) {
    e.preventDefault();
    //functions
 });
});