Question

i am trying to get my ajax/json script to work, i have looked over stackoverflow, but can’t find anything that looks like it would help. Basically all i am trying to do is when a user clicks on a submit button, for a hidden input value to be sent to another php script via ajax, where it will be changed etc… then sent back via ajax and displayed inside a div through a responce, i am not sure what i am doing wrong.

At the moment i am getting nothing, no output or anything.

I will try and be as thorough as possible in the code i give below, thanks for all the help.

AJAX script on main page

<script>
$(document).ready(function () {
  $(".add_detail_land_down").click(function () {
    var hidden_count = $('input[name=addon_detail_hidden_count]').val();
    $.ajax({
      type: "GET",
      url: "ajax_script.php",
      data: {
        hidden_count: hidden_count
      },
      dataType: "json",
      statusCode: {
        success: function (data) {
          $("#total_hidden").html(data.total_hidden);
        }
      }
    });
  })
});
$(".add_detail_land_down").click();
</script>

The form head on main page (thought i might as well add it, just incase)

<form action="" method="post">

The hidden input on main page

<input type="hidden" name="addon_detail_hidden_count" id="addon_detail_hidden_count" class="addon_detail_hidden_count" value="1" />

The submit button for starting the ajax process on main page

<input name="add_detail_land_down" type="submit" class="add_detail_land_down" value="add_detail_down"/>

The code in ajax_script.php

    <?php 

$hidden_count = $_GET["hidden_count"];

$hidden_count = $hidden_count + 1;
include 'connect_to_mysql.php';

echo json_encode(array("total_hidden" => $hidden_count ));

 ?>

Thanks for any and all help

Answer 1

Amongst all the other problems mentioned: statusCode/success syntax problem , and the click trigegr outlsde of document.ready you also need to prevent the browser default submittal of the form.

Currently your page is likely refreshing when you submit… normal browser behavior.

In the click handler you need to prevent this by either returning false or using preventDefault()

$(".add_detail_land_down").click(function (event) {

   /* use either of these */

   /* before your ajax code */
    event.preventDefault();

    /* or after your ajax code*/

     return false;

})