CODEWITHSUNDEEP
javascriptphpjqueryhtmlajax
deepak asai
deepak asai

Reputation: 232

jQuery Ajax Post with data

Am trying to call a PHP file when onclick of a button occurs with some parameters. It is getting executed till alert statement in jsfile.js. After that the ajax part is not getting executed.. Help me out..

main.html

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <script src="jsfile.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    </head>
    <body>
            <button onclick="cart(0)"> hi </button>
            <p id="disp"></p>
    </body>
</html>

jsfile.js

function cart(id1) {
    var id = id1;
    alert("enterd " + id);
    document.getElementById("disp").innerHTML = "hi";
    $.ajax({
        url: "/add.php ",
        type: "POST",    
        data: {
            item_id: id,
        },
        success: function(response) {
            // document.getElementById("total_items").value = response;
            document.getElementById("disp").innerHTML = response;
        },
        error: function() {
            alert("error");
        }    
    });    
}

add.php

<?php
    if(isset($_POST['item_id']) && !empty($_POST['item_id'])) {
    // if(count($_POST)>0)
        echo "success";
        exit();
    }
?>

Upvotes: 5

Views: 133264

Answers (2)

Jason Guru
Jason Guru

Reputation: 374

In your jsfile.js file, please correct the following points which I have mentioned as comments on the following code.

function cart(id1) {
    var id = id1;
    alert("enterd " + id);
    document.getElementById("disp").innerHTML = "hi";
    $.ajax({
        url: "/add.php ",
        method: "POST", // First change type to method here    
        data: {
            item_id: id,
        },
        success: function(response) {
            document.getElementById("disp").innerHTML = response;
        },
        error: function(error) {
            alert("error" + error);
        }
    });    
}

Upvotes: 7

Sagun Gautam
Sagun Gautam

Reputation: 470

Change it and try

 type:"POST" ->  method: "POST"

If your jquery version is >= 1.5 use it this way.

$.ajax({
  url: "add.php",
  method: "POST",
  data: { item_id: id},
}).done(function(response) {
  ......
}).fail(function( jqXHR, textStatus ) {
  ......
});

Load Jquery Before your JS file.

Upvotes: 0

Related Questions