html inuput field data send with jquery to PHP not working

Question

$(".save_form_email").on('click', function() {
    var pocet = $('#save__cena').val();
  console.table(pocet);
  $.ajax({
    url: '/modules/mod_custom_extended/tmpl/default.php',
    type: 'POST',
    data: {
      pocet: pocet
    },
    contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
    success: function(response) {
      console.table(response);
    },
    error: function(jqXHR, textStatus, errorThrown) {
      console.log('AJAX request failed: ' + textStatus + ', ' + errorThrown);
    }
  });

});

This is the PHP

<?php
if (isset($_POST['pocet'])) {
  $temp_pocet = $_POST['pocet'];
}
?>

This is my attempt to send value of html input field with id "save__cena" to the php so i can later use this price to send it to stripe. Currently i have nothing in php variable temp_pocet

_"Currently i have nothing in php variable temp_pocet"_ - where and how exactly have you verified that? — CBroe, May 11 '23 at 05:59

Praise Dare · Answer 1 · 2023-05-10T17:50:51.267

0

When you send JSON data using an ajax request to php, the data is not accessible in the $_POST superglobal. You need to read from php://input instead like so:

<?php
$form_data = json_decode(file_get_contents('php://input'));

$_POST only works with data that has the Content-Type set to application/x-www-form-urlencoded or multipart/form-data, not application/json.

Additional info: this stack overflow answer

EDIT

If you also plan on returning a json response from the php script, then you should move the code that processes the ajax request to a separate php file that is not mixed with any html code. This is to prevent html characters from being sent along with the json response and causing it to become corrupted.

Oh and you should also change your content-type header to application/json

edited May 10 '23 at 17:50

answered May 10 '23 at 17:39

Praise Dare

416
3
9

1

but his contentType is set to that: `contentType: 'application/x-www-form-urlencoded; charset=UTF-8',` shouldn't it work then? – Chris G May 10 '23 at 17:45
No, if you wish to send json data, the content type header should be set to the appropriate value, which is `application/json`. You're confusing the server by saying you're sending one type of data and then sending a completely different type. – Praise Dare May 10 '23 at 17:49
im confused, you answer me with form data but i need to send just one atribute and that is $('#save__cena').val(); to the PHP. Could you share example for this ? – Peter B May 10 '23 at 17:53
@PeterB your code is working fine. if you want that value to be seen in console use if (isset($_POST['pocet'])) { $temp_pocet = $_POST['pocet']; return $temp_pocet; } – Snm May 10 '23 at 18:02
no its not working, its empty in php. – Peter B May 10 '23 at 18:05
@PeterB post your html code – Snm May 10 '23 at 18:14
its rly big form i would rather not. But this is the part which is needed i need this value in php before whole form submit. @Snm – Peter B May 10 '23 at 18:35
wait, you only need that value in your php before submiting the form? – Chris G May 10 '23 at 18:49
yes, and also after but this is okey and working. i need it before to use it in php and send it to the stripe as init amount. – Peter B May 10 '23 at 18:52
but if you do `$(".save_form_email").on('click', function() {` that means you pressed `the submit` button of the entire form. Shouldn't you do something like a `onblur` or `onchange` on that field then send the data via ajax? since you want to send just 1 value – Chris G May 10 '23 at 18:55
this is something else .save_form_email is only some random button inside of form not sa submit button. – Peter B May 10 '23 at 19:46

Julian Fagadau · Answer 2 · 2023-05-11T17:50:49.073

Try this
Debug with alerts.

$(".save_form_email").on('click', function() {
        var pocet = $('#save__cena').val();
      alert("Step 1");
      console.table(pocet);
      $.ajax({
        url: '/modules/mod_custom_extended/tmpl/default.php',
        type: 'POST',
        data: {
          // I change this line
          // pocet: pocet -> Original
          "pocet": pocet // updated
        },
        contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
        success: function(response) {
          alert("Step 2");
          console.table(response);
        },
        error: function(jqXHR, textStatus, errorThrown) {
          alert("Step 3");
          console.log('AJAX request failed: ' + textStatus + ', ' + errorThrown);
        }
      });
    
    });

PHP DEBUG

<?php
 echo "<script>alert('PHP Step 1');</script>";
if (isset($_POST['pocet'])) {
  echo "<script>alert('PHP Step 2');</script>";
  $temp_pocet = $_POST['pocet'];
}
?>

This is an error detection system through alert, tell me what alerts you get

Hello, thank you for code. But it looks like i have same result. console.table(response) is empty. I dont understand this since i did a lot of those requests in past. Im working in Joomla module maybe if it help as additional information. also this js is in same file as url (/modules/mod_custom_extended/tmpl/default.php) ajax request, maybe this is problem since there is also other parts PHP there. — Peter B, May 11 '23 at 17:29
I have implemented a basic error detection system, try it and tell me — Julian Fagadau, May 11 '23 at 17:53

html inuput field data send with jquery to PHP not working

2 Answers2