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

Have you used any developer tools, like Firebug, to watch the request / response cycle for errors? — Jay Blanchard
– Jay Blanchard, Commented Nov 20, 2012 at 21:58
Yes i have tried developer tools in chrome, and don't seem to be getting any errors — Al Wise
– Al Wise, Commented Nov 20, 2012 at 22:00

Sushanth -- · Accepted Answer · 2012-11-20 21:59:07Z

3

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

answered Nov 20, 2012 at 21:59

Sushanth --

55.8k9 gold badges70 silver badges109 bronze badges

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

3 Comments

Manse Over a year ago

+1 this is probably the main reason for the failure - nice spot !

Al Wise Over a year ago

Thanks for your answer, i made the changes you suggested and along with some of the other answers here, it is now working

Sushanth -- Over a year ago

@AlWise .. Glad to have helped :)

charlietfl · Accepted Answer · 2012-11-20 22:28:29Z

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;

})

edited Nov 20, 2012 at 22:28

answered Nov 20, 2012 at 22:09

charlietfl

172k14 gold badges125 silver badges154 bronze badges

2 Comments

Al Wise Over a year ago

Hi, thanks for your reply, i think it actually solved it, here is the final code all together, a bit basic i know, but it is just to get it working, then i will move it to my main site, is there anything that could be approved? Thanks so much for your help - pastebin.com/VSKyiwRy

charlietfl Over a year ago

only suggestion is that ID selectors are faster to find in browser, and usually easier to write instead of name = ..... Since your elements have ID's is not a big change. Another shorcut...you can chain the click trigger to the click handler function $(selector).click(fuction(){ /* code*/}).click();

DiverseAndRemote.com · Accepted Answer · 2012-11-20 21:59:38Z

0

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

answered Nov 20, 2012 at 21:59

DiverseAndRemote.com

20k10 gold badges65 silver badges75 bronze badges

Comments

Mike Brant · Accepted Answer · 2012-11-20 22:12:06Z

0

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.

edited Nov 20, 2012 at 22:12

answered Nov 20, 2012 at 22:03

Mike Brant

71.4k10 gold badges102 silver badges104 bronze badges

2 Comments

Sushanth -- Over a year ago

I think the first case should not be a problem.. The Key can be with or without Quotes .. that is not a problem.. Since it is normal javascript Object and not json string

Mike Brant Over a year ago

@charlietfl At a minimum it is confusing as to your intent as you have a variable with that specific name specified. Personally I would change the name of the variable. I have deleted from my answer though, as you are right that it is not actually an issue here.

Collectives™ on Stack Overflow

Sending hidden input to php script via ajax not working

4 Answers 4

3 Comments

2 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

2 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related