CODEWITHSUNDEEP
javascriptphpjqueryajax
Daro125
Daro125

Reputation: 27

Ajax - send button value to php

I have a problem with send data to php. I want to send button value via jquery ajax. This is my code: HTML

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>
$(document).ready(function(){
    $.ajax({
        url: "try.php",
        type: "POST",
        data: {
            data: val    // removed ; after val.
        }
    });
});

</script>

    <body>

      <button id="1" name="1"  value="some_value">1</button>
      <button id="2" name="2"  value="some_value">2</button>


    </body>

PHP:

<?php

$name = $_POST['data'];
echo $name;

?>

It doesn't working...

Upvotes: 0

Views: 2262

Answers (3)

Willian Oliveira
Willian Oliveira

Reputation: 16

<button id="example" name="name_example"  value="some_value">
1</button>

$(document).ready(function () {
     $('#example').click(function() {

         var buttonValue = $(this).val();

         $.ajax({
             url: "try.php", //assuming that your html file is in the same folder as 
                    //your php script. 
              type: "POST",
              data: {'example': buttonValue}
         });

    });
});

look this: https://jsfiddle.net/willianoliveirac/yarLfdnu/

In your .php file, which should be in the same folder as your html file doing the request you will have:

<?php 

echo '<pre>'; print_r($_POST); die; // see if you now have those vars. 

?>

Upvotes: 0

t0ledoj
t0ledoj

Reputation: 33

try this out, i just did and worked fine

here's my js file

<html>
<head>
</head>
<body>
    <button id="1" name="1" value="some_value">1</button>
    <button id="2" name="2" value="some_value">2</button>
</body>
<footer>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('button').click(function() {
                var val = $(this).val();
                $.ajax({
                    // your uri, pay attention if the post is going to the right place
                    url: "try.php",
                    type: "POST",
                    // myVar = name of the var that you will be able to call in php
                    // val = your data
                    data: {'myVar': val}
                });
            });
        });
    </script>
</footer>
</html>

and here's my php

<?php
$name = $_POST['myVar']; //the var you put in your ajax data:{}
print_r($name);

in google chrome you can press f12 and go to Network Tab, you will be able to see the requisitions that your browser made and theirs responses

Upvotes: 3

Himanshu Upadhyay
Himanshu Upadhyay

Reputation: 6565

Make proper json string to send data. You are having extra ; there.

$(document).ready(function(){
    $.ajax({
        url: "try.php",
        type: "POST",
        data: {
            data: val    // removed ; after val.
        }
    });
});

And get it with data key in php.

<?php

$name = $_POST['data'];
echo $name;
?>

Also, write your event listeners inside document.ready(). Currently your listeners are not getting applied as the script is on the top and is not able to find the <button> as they are not yet present.

Upvotes: 0

Related Questions