passing variable from Jquery to php using ajax

Question

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/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/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)

@MarkusZeller ok, can you please give me the CDN + I also have bootstrap included — MrObscure, Jul 06 '21 at 21:51
Oh no! Wait!! You have JavaScript code in the PHP file. That won't work! You need to "echo" that. You can enclose it in a [nowdoc](https://www.php.net/manual/en/language.types.string.php#language.types.string.syntax.nowdoc). — Markus Zeller, Jul 06 '21 at 21:53
There is! `main.php:42 Uncaught TypeError: $.ajax is not a function`. You are calling `$.ajax` from a PHP file. This is a JavaScript function to be called from browser. — Markus Zeller, Jul 06 '21 at 21:57
You need full jQuery, not the slim version. See [jQuery 3 slim ajax basic example](https://stackoverflow.com/questions/40991919/jquery-3-slim-ajax-basic-example) — ADyson, Jul 06 '21 at 22:42
@MarkusZeller the issue is the OP is using jQuery Slim which doesn't include the Ajax functionality. If the problem was what you've suggested then a) it would occur earlier in the code because there's other jQuery code before that in the function, and b) it would show as a PHP syntax error - but the error log shown is clearly a JS console error from the browser, not a PHP error. It even has the stack trace going into the jQuery file and down back to the HTML button click event — ADyson, Jul 06 '21 at 22:44
@ADyson I tried to use the minified version but there is no changes `````` — MrObscure, Jul 06 '21 at 22:55
Why have you randomly used an older version? Use the latest one, pay attention to the version number in the filename. Also did you remove the reference to the slim version before adding that one? Also make sure you don't have any other links to jQuery (slim or otherwise) elsewhere in your page, people sometimes add several by mistake! — ADyson, Jul 06 '21 at 23:00
@ADyson i change it to the last version but the problem still occur `````` — MrObscure, Jul 06 '21 at 23:05
You mean you still get the exact same error? In that case I'd suggest you have some other additional issue like I suggested above - multiple versions of jQuery referenced in your page, maybe. Because otherwise it would definitely recognise the $.ajax function with the full version of jQuery. Or if you now get a different error please let us know. — ADyson, Jul 06 '21 at 23:22
@ADyson yes, I'm getting the exact same error and there is no multiple versions of jquery are included I updated the question if you can take a look at the jquery version — MrObscure, Jul 07 '21 at 00:01
The problem is not reproducible using the code you've provided (plus a bit of extra HTML to make the loop work) - demo: https://jsfiddle.net/st5p4hue/ (N.B. The ajax call eventually fails of course, but it does actually happen, it does not produce the error you've described, you can check the console and network tabs to see.) — ADyson, Jul 07 '21 at 10:15

Dory Nguyen · Accepted Answer · 2021-07-09T13:39:20.087

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();

score 0 · Answer 2 · answered Jul 07 '21 at 00:40

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.

passing variable from Jquery to php using ajax

2 Answers2