Updating div content with jQuery ajax function over PHP

Question

I am trying to update my div content (#update_div) by sending the value of two input fields to a php file (search_value.php) using the .ajax() function from jQuery.

It works, if I just redirect the two values of the input fields using the html form POST method. So the search_value.php should be correct.

My HTML Code:

<form id="my_form">
  <input id="food" name="food">
  <input id="amount" value="amount in gram" name="amount">
  <input type="button" value="Update" id="submit" name="submit" />
</form>

<div id="update_div">
</div>

My Javascript Code:

$("#submit").click(function() {
  var food = $("#food").val();
  var amount = $("#amount").val();
  $.ajax({
    url: 'search_value.php',
    type: 'GET',            
    data: {"food":food,"amount":amount},
    success: function(data)
    {
      $('#update_div').html(data);
    }
  });
});

My PHP Code:

<?php
  $pdo = new PDO('mysql:host=localhost;dbname=calotools', 'root', '');

  $food = $GET_['food'];
  $amount = $GET_['amount'];

  $query="SELECT * FROM nahrungsmittel WHERE name = '$food'";

  $user = $pdo->query($query)->fetch();
  echo $user['name']."<br />";
  echo $user['kcal'] / 100 * $amount;
?>

I do not really get a feedback by clicking the button. Maybe you guys can tell me why?

Put your whole $("#submit").click(function() javascript in your browser console and try to click on the submit button, is it working ? — Sofiene Djebali
– Sofiene Djebali, Commented May 21, 2016 at 18:07
Use browser console network to see if request is being made. Add some error handling. Make sure $('#update_div') exists when code runs — charlietfl
– charlietfl, Commented May 21, 2016 at 18:09
I put my whole $("#submit").click(function() in the browser console but it happens nothing if i click my submit button. Here's a picture of the console: i.sstatic.net/13w6F.png — Pascal
– Pascal, Commented May 21, 2016 at 18:37

Karthik M R · Accepted Answer · 2016-05-21 18:56:58Z

2

For GET request, there should not be data part, make it as a query string as below js code:

$("#submit").click(function() {
   var food = $("#food").val();
   var amount = $("#amount").val();
   $.ajax({
   url: 'search_value.php?food='+ food + '&amount='+amount,
   type: 'GET',
   datatype: "html",   
   success: function(data)
   {
     $('#update_div').html(data);
   },
   failure : function(ex)
   {
      console.log(ex);
   }
  });
});

And use $_GET instead of $GET_ in php

edited May 21, 2016 at 18:56

answered May 21, 2016 at 18:10

Karthik M R

9901 gold badge7 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Pascal Over a year ago

I changed my code to your suggestion and updated also the php file. I uploaded my project again but it simply happens nothing if i press the submit button.

Pascal Over a year ago

i added a simple echo "This is a test"; in my search_value.php and i still see nothing when i click the submit button. So this seems to be the problem

Karthik M R Over a year ago

ok. so can you see in developer tools(network tab in chrome) the request and response when you click the button. Also add datatype: "html" in $.ajax and also failure function. chk the updated answer.

Pascal Over a year ago

Thanks a lot for your help. I think it was cache problem after the first fixed, i updated the last changes from your post, cleared the cache and now it works!!

GMchris · Accepted Answer · 2016-05-21 18:12:19Z

1

Are you running your code after the page has loaded? I've made that mistake several times, and if you're not, I suggest wrapping the whole thing in a $(function(){ /* Everything you have */ });

answered May 21, 2016 at 18:12

GMchris

5,7064 gold badges25 silver badges40 bronze badges

1 Comment

Pascal Over a year ago

The whole javascript code runs in a $( document ).ready(function()

hacene abdessamed · Accepted Answer · 2016-05-21 18:12:31Z

1

I prefer using post in your php script replace $GET_ by $_POST

<?php
  $pdo = new PDO('mysql:host=localhost;dbname=calotools', 'root', '');

  $food = $_POST['food'];
  $amount = $_POST['amount'];

  $query="SELECT * FROM nahrungsmittel WHERE name = '$food'";

  $user = $pdo->query($query)->fetch();
  echo $user['name']."<br />";
  echo $user['kcal'] / 100 * $amount;
?>

in your javascript code the result is found in data.responseText

here the new script

$("#submit").click(function() {
  var food = $("#food").val();
  var amount = $("#amount").val();
  $.ajax({
    url: 'search_value.php',
    type: 'POST',            
    data: {"food":food,"amount":amount},
    success: function(data)
    {
      $('#update_div').html(data.responseText);
    }
  });
});

answered May 21, 2016 at 18:12

hacene abdessamed

5696 silver badges22 bronze badges

5 Comments

Pascal Over a year ago

I tried with POST and the data.responseText but it doesnt work. There is no action if i click the submit button.

hacene abdessamed Over a year ago

perhaps your script doesn't load try to make at the top of the page , or you are missing jquery

Pascal Over a year ago

i have the whole javascript part in a $( document ).ready(function() and the jquery cant be missing because there are several more jquery functions which are running correctly on the same site

hacene abdessamed Over a year ago

if you are using chrome you can track your ajax query using inspect element - Network , click your button then you will see your ajax query

Pascal Over a year ago

Did the last changes from your suggestions, cleared the cache and now it works fine, thanks a lot!

yuriy636 · Accepted Answer · 2016-05-21 19:01:53Z

1

Tested and your JavaScript code works. The issue may be in the PHP code. Have you tried correcting the "$_GET" as suggested by others?

answered May 21, 2016 at 19:01

yuriy636

11.7k6 gold badges39 silver badges43 bronze badges

1 Comment

Pascal Over a year ago

I think it was a cache problem after i took the first fixed from your posts. Work now! Thanks!

Collectives™ on Stack Overflow

Updating div content with jQuery ajax function over PHP

4 Answers 4

4 Comments

1 Comment

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

1 Comment

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related