pass js variable to php using ajax on the same page

Question

this is my html code:

<form id="form" action="javascript:void(0)">
<input type="submit" id="submit-reg" value="Register" class="submit button" onclick="showtemplate('anniversary')" style='font-family: georgia;font-size: 23px;font-weight: normal;color:white;margin-top:-3px;text-decoration: none;background-color: rgba(0, 0, 0, 0.53);'>    
</form>

this is my javascript code:

function showtemplate(temp)
{
    $.ajax({
        type: "POST",
        url: 'ajax.php',
        data: "section="+temp ,
        success: function(data)
        {
            alert(data);
        }
    });  
}  

this is my ajax.php file:

<?php
$ajax=$_POST['section'];
echo $ajax;
?>

The above html and javascript code is included in a file named slider.php. In my index file i have included this slider.php file and slider.php is inside slider folder. So basically index.php and slider.php are not inside the same folder.

Javascript code alerts the data properly. But in my php code (ajax.php file) the value of $_POST['section'] is empty. What is the problem with my code. I tried googling everything and tried a few codes but it still doesn't work. Please help me out

Answer 1

Try this instead:

$.ajax({
        type: "POST",
        url: 'ajax.php',
        data: { 'section': temp},
        success: function(data)
        {
            alert(data);
        }
    }); 

It is quite possible that your server does not understand the string you have constructed ( "section="+temp ). When using ajax I prefer sending objects since for an object to be valid it requires a certain format.

EDIT1:

Try this and let me know if it doesn't work either:

$.post('ajax.php', {'section': temp}, function(data}{
  alert(data);
});

Answer 2

Add jquery plugin(jQuery library) ,then only ajax call works for eg

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

check your input data , whether it contain '&,/' charators,then use encodeURIComponent()

for Ajax Call Eg:

var gym_name =  encodeURIComponent($("#gym_name").val());
$.ajax({
type: "POST",
url: "abc.php",
data:string_array,
success: function(msg) {
console.log(msg);
 }
});

In abc.php

<?php
$id = $_POST['gym_name'];
echo "The id is ".id;
?>

Answer 3

Give a try to the following (although I cannot work out why @Grimbode's answer is not working):

$("#submit-reg").on( "click", function() {
  $.ajax({
        type: "POST",
        url: 'ajax.php',
        data: {'section': 'anniversary'},
        success: function(data)
        {
            alert(data);
        }
    });
});

Note : I don't know what your underlying code is doing. However, I would suggest not using HTML element properties to handle events for numerous reasons, but separate the JS/event handling appropriately (separate js file(s) (recommended) or inside <script> tags). Read more...