Sending hidden input to php script via ajax not working

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

Why are you nesting your success callback inside statusCode

Supposed to be

dataType: "json",
success: function (data) {
    $("#total_hidden").html(data.total_hidden);
}

OR

Use the status code 200 instead of success

dataType: "json",
statusCode: {
     200 : function (data) {
          $("#total_hidden").html(data.total_hidden);
     }
}

Answer 2

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;

})

Answer 3

statusCode is numeric and for your case should be 200 change it from success to 200 like so:

statusCode: {
    200: function (data) {
        $("#total_hidden").html(data.total_hidden);
    }
}

Answer 4

Your success callback should be specified like this (if you only care about 200):

success: function (data) {
    $("#total_hidden").html(data.total_hidden);
}

Also, where you are trying to execute click() on the element might actually occur before the document is loaded and therefore execute before the onclick handler is ready. This should be within document ready after the onclick if you want to to fire automatically on document ready.