why i cannot pass json data to another PHP file?

Question

i have two php files home.php and ajax.php. i have two buttons on home.php. when they are clicked the according php functions in ajax.php should get called.

home.php

<html>
    <head>
        <script src="https://code.jquery.com/jquery-2.1.4.min.js" type="text/javascript"></script>
        <script type='text/javascript'>
        $(document).ready(function(){
            $('.button').click(function(){
                var clickBtnValue = $(this).val();    
                var ajaxurl = 'ajax.php';
                data =  {'action': clickBtnValue};

                $.post(ajaxurl, data, function (response) {
                    // Response div goes here.
                    alert("action performed successfully");
                });

            });
        });
        </script>
    </head>

    <body>
        <form action='ajax.php' method="POST">
            <input type="submit" class="button" name="insert" value="insert" />
            <input type="submit" class="button" name="select" value="select" />
        </form>
    </body>
</html>

ajax.php

<?php
echo 'this was called';
echo $_POST['action']; //THROWS AN ERROR undefined index 'action'

if ( isset( $_POST['action'] ) ) {

    switch ($_POST['action']) {
        case 'insert':
            insert();
            break;
        case 'select':
            select();
            break;
    }
}

function select() {
    echo "The select function is called.";
    exit;
}

function insert() {
    echo "The insert function is called.";
    exit;
}
?>

the problem is the json data i assign to data property in jquery code will not get passed to the ajax.php. Is there any reason why it doesn't not pass it?

here is my youtube video on the error video

Just dumped your js into a fiddle as is and your data is submitting fine. You sure you sending it to the right url? — kurt
– kurt, Commented Sep 5, 2015 at 14:19
This has nothing to do with json, but the data should get send and received as expected. The code looks fine to me in that aspect. — arkascha
– arkascha, Commented Sep 5, 2015 at 14:19

Jeff · Accepted Answer · 2015-09-05 16:31:37Z

There are two possibilities, depending of what you want to achieve afterwards.

Eighter you stick on doing a backgroud ajax-call to ajax.php and then do with the response whatever you want (that's what I'd suggest):

<html>
<head>
    <script src="https://code.jquery.com/jquery-2.1.4.min.js" type="text/javascript"></script>
    <script type='text/javascript'>
    $(document).ready(function(){
        $('.button').click(function(){
            var clickBtnValue = $(this).id(); // changed to id here!
            var ajaxurl = 'ajax.php';
            data =  {'action': clickBtnValue};

            $.post(ajaxurl, data, function (response) {
                // Response div goes here.
                console.log(response); // log what the response is
                alert("action performed successfully and the resonse is: \n"+response);
                // do with that data whatever you need
            });

        });
    });
    </script>
</head>

<body>
    <!-- changed to buttons, removed the form -->
    <button class="button" id="insert">insert</button>
    <button class="button" id="select">select</button>
</body>
</html>

or you submit the form and output on screen the response from ajax.php:

<html>
<head>
    <!--script src="https://code.jquery.com/jquery-2.1.4.min.js" type="text/javascript"></script-->
    <script type='text/javascript'>
    // no need for any javascript then
    </script>
</head>

<body>
    <form action='ajax.php' method="POST">
        <input type="submit" class="button" name="insert" value="insert" />
        <input type="submit" class="button" name="select" value="select" />
    </form>
</body>

and in ajax.php:

<?php
echo 'this was called';


if ( isset( $_POST['insert'] ) ) {
        insert();
}

if ( isset( $_POST['select'] ) ) {
        select();
}

function select() {
  echo "The select function is called.";
  exit;
}

function insert() {
  echo "The insert function is called.";
  exit;
}
?>

hyn · Accepted Answer · 2015-09-05 14:35:00Z

0

try

$.post(ajaxurl, data)
  .done(function( r ) {
   alert("action performed successfully");
});

answered Sep 5, 2015 at 14:35

hyn

111 bronze badge

1 Comment

Jeff Over a year ago

"try" is not an answer.

tmarois · Accepted Answer · 2015-09-05 15:36:08Z

0

I like to use the jQuery on() and to be sure post has worked, I moved in your variables as such. Also you can try to do console.log(clickBtnValue) after the click to be sure you are able to see the value itself. After confirming, the post() should send that value into action post param.

<script type='text/javascript'>
$(document).ready(function(){
    $('.button').on('click',function(){
        var clickBtnValue = $(this).val();    
        var ajaxurl = 'ajax.php';

        $.post(ajaxurl, {action:clickBtnValue}, function (response) {
          alert("action performed successfully");
        });
    });
});
</script>

edited Sep 5, 2015 at 15:36

answered Sep 5, 2015 at 15:27

tmarois

2,4703 gold badges31 silver badges44 bronze badges

6 Comments

Phill Greggan Over a year ago

still teh same null value

tmarois Over a year ago

in the "headers" of the inspector, does it show if the POST variables are actually being sent to akax.php (in your video) ?

Phill Greggan Over a year ago

@Idealcastle if you could tell me where can i find those POST variables, i could see, in the form data section there is "insert"

Phill Greggan Over a year ago

@Idealcastle i'm thinking of giving up this technique, there has to be a way simpler way to do this!

Jeff Over a year ago

@PhillGreggan If you would like to actually show the return/echo of axax.php I'll show you the simplest way.

|

lmanohara · Accepted Answer · 2015-09-05 16:22:12Z

0

If you need to do a ajax call, remove the following part from the home.php

<form action='ajax.php' method="POST">
</form>

I think you are messed up with Ajax technology and the form post mechanism.

answered Sep 5, 2015 at 16:22

lmanohara

778 bronze badges

Collectives™ on Stack Overflow

why i cannot pass json data to another PHP file?

4 Answers 4

Comments

1 Comment

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related