将Javascript变量传递给同一页面上的php而无需重新加载

Question

I have been having problems passing Javascript variable to php using ajax on the same page.I have a try.php page and once a button is clicked, I want a value sent to try.php variable without reloading the page..

This is my form code,I am actually looping trough a database record

<?php
foreach($vars as $var){
?>
<form method="POST">
<button class="btn btn-warning btn-sm btn_edit" name="btn_edit" value="<?php echo $var['mem_id'];?>">
<span class="glyphicon glyphicon-pencil"></span></button>

<?php
}
?>

Here is my ajax code

$('.btn_edit').click(function(e){
    var uid = $(this).val()
    $.post("try.php",{ btn_edit : uid},
        function(){
        });
    console.log(uid);//I could see the id logged on console
    $('#edit_details').modal('show');
    e.preventDefault();//prevent the form from submitting
});

On my try.php page, I have this code to check if it passed succesfully

<?php if(isset($_POST['btn_edit'])){
        $user_id = $_POST['btn_edit'];
    }?>

Answer 1

There are two modifications need to be done:

Change 1: Only input elements can have value attribute. And as you have <button> , it should be assigned with some other attribute which can be captured using jQuery, so here I am going to use data-bind attribute with it.

<button class="btn btn-warning btn-sm btn_edit" name="btn_edit" data-bind="<?php echo $var['mem_id'];?>">

And then,Change 2: Get data-bind value with jQuery like this:

$('.btn_edit').click(function(e){
    var uid = $(this).attr('data-bind');  // Using attr, not val()...
    $.post("try.php",{ btn_edit : uid},
        function(){
        });
    console.log(uid);//I could see the id logged on console
    $('#edit_details').modal('show');
    e.preventDefault();//prevent the form from submitting
});