CODEWITHSUNDEEP
javascriptphpjqueryajax
MrObscure
MrObscure

Reputation: 539

passing variable from Jquery to php using ajax

I'm trying to pass a jquery variable to a PHP file using Ajax Post Request but there is no response from the request (it's not working )

Request Code:-

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script type="text/javascript">

function logger(btni){
  $('table [type="checkbox"]').each(function(i, chk) {
    if (chk.checked) {
      
      var cusId = $('table').find(".ip").html();  

      $.ajax({
    url: "somefile.php", // php file path
    method: "POST", // send data method
    data: {"total_price": cusId}, // data to send {name: value}
    success: function(data){
        alert(data);
    } // response of ajax
});

    }
  });
}
</script>

button to trigger the request

            <button type="button" style="font-family:Modeseven-L3n5; margin-left:1rem;"class="btn btn-warning pull-left kl" id="btni"name="btni"Onclick="logger()" ><i class="fa fa-cloud-upload"></i>&nbsp;Upload Miner</button>&nbsp;&nbsp;

somefile.php

<?php
$total_price = $_POST["total_price"];
echo $total_price;
?>

Error in console :

main.php:42 Uncaught TypeError: $.ajax is not a function
    at HTMLInputElement.<anonymous> (main.php:42)
    at Function.each (jquery-3.4.1.slim.min.js:2)
    at E.fn.init.each (jquery-3.4.1.slim.min.js:2)
    at logger (main.php:37)
    at HTMLButtonElement.onclick (VM948 main.php:488)

Upvotes: 0

Views: 152

Answers (2)

Dory Nguyen
Dory Nguyen

Reputation: 371

There must be something wrong with your jQuery file. Make sure that you're using the regular version of jQuery instead of slim build, which doesn't include the Ajax functionality. You can clearly see this in the error:

at Function.each (jquery-3.4.1.slim.min.js:2)
at E.fn.init.each (jquery-3.4.1.slim.min.js:2)

This is common if you're using jQuery that goes along with bootstrap.

Also, make sure you don't have multiple versions of jQuery in your PHP file. This could happen if you mistakenly put your another jQuery file somewhere else.

Check the button and the parameter in the funtion as well. I'm not sure why you're using btni in the function. You don't use it at all. Or at least you should add:

btni.preventDefault();

Upvotes: 1

Med.ZAIRI
Med.ZAIRI

Reputation: 300

  • First, you are missing jQuery library file (as said by other people)
  • Second, you have missed a param in your function logger call "see the button that trigger the call" (why you are using that param: btni?)
  • Third, you have a loop in which you call the ajax at each one, that's not a good idea.

Upvotes: 0

Related Questions