How can i send javascript variable values into php

Question

How can i send javascript variable values into php. i have used ajax for this but its nt working for me. please help, i am new in javascript and ajax. Here is my ajax & javascript code.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css" type="text/css" />
<script type="text/javascript">
    $(function ()
    {        
        $("#slider-range").slider(
        {
            range: true,
            min: 71,
            max: 109,
            values: [75, 100],
            slide: function (event, ui)
            {
                $("#size-range").html(Math.floor(ui.values[0] / 12) + "'" + (ui.values[0] % 12) + '" - ' + Math.floor(ui.values[1] / 12) + "'" + (ui.values[1] % 12) + '"');
                $("#min_inches").val(ui.values[0]);
                $("#max_inches").val(ui.values[1]);
            }
        });
        $("#size-range").html(Math.floor($("#slider-range").slider("values", 0) / 12) + "'" + ($("#slider-range").slider("values", 0) % 12) + '" - ' + Math.floor($("#slider-range").slider("values", 1) / 12) + "'" + ($("#slider-range").slider("values", 1) % 12) + '"');
        var a = $("#min_inches").val($("#slider-range").slider("values", 0));
        var b = $("#max_inches").val($("#slider-range").slider("values", 1));

        $.ajax(
        {
            type: "POST",
            url: "searchrange.php",
            data:
            {
                a: a,
                b: b
            },
            success: function (option)
            {
                alert("voted");
            }
        });
    });
</script>

And Below is my php code(searchrange.php).

<?php
    if(isset($_POST['a']) && $_POST['a'] != '')
    {
    $kws = $_POST['a'];
    $kws1=$_POST['b'];
    echo $kws;     
    echo  $query = "select * from newusers where Age between '".$kws."' and '".$kws1."'" ;
    $res = mysql_query($query);
    $count = mysql_num_rows($res);
    $i = 0;
    if($count > 0)
    {
        echo "<ul>";
        while($row = mysql_fetch_array($res))
        {
            echo "<a href='#'><li>";     
            echo "<div id='rest'>";?>
            <a href="searchrange.php?id=<?php echo $row['0'];?> "><?php echo $row['Religion'];?><br><?php echo $row['Name'];?></a>
            <?php echo $row[0];
            echo "<br />";
            echo "<br />";    
            echo "<div style='clear:both;'></div></li></a>";
            $i++;
            if($i == 5) break;
        }
        echo "</ul>";
        if($count > 5)
        {
            echo "<div id='view_more'><a href='#'>View more results</a></div>";
        }
    }
    else
    {  
        echo "<div id='no_result'>No result found !</div>";
    }
}
?>

Any help would be appreciated. thank you

Define 'it isn't working'. Do you see an error message? Does anything happen? Is it what you expect, and if not, how does it differ? — , Dec 09 '13 at 04:34
alert "a" variable before sending and see what result you get. — Mahmood Rehman, Dec 09 '13 at 04:37
Your `$.ajax({...})` is being executed on page ready `$(function (){ ... $.ajax({...}) });`. Shouldn't this be executed on a button click / form submit? — Sean, Dec 09 '13 at 04:47
Are you trying to assign the Min or Maximum variable to "a" and "b" ? — Mahmood Rehman, Dec 09 '13 at 05:10
after assigning this when i alert var a i am getting [object object] in alert box — user3077217, Dec 09 '13 at 05:18
what this code does ? $("#min_inches").val($("#slider-range").slider("values", 0)); Are you assigning some sort of dynamic value — Mahmood Rehman, Dec 09 '13 at 05:20
can you show me some demo or slider link where i can check the code ? — Mahmood Rehman, Dec 09 '13 at 05:23
possible duplicate of [How to pass JavaScript variables to PHP?](http://stackoverflow.com/questions/1917576/how-to-pass-javascript-variables-to-php) — ProllyGeek, Dec 09 '13 at 05:51

Kapil gopinath · Answer 1 · 2013-12-09T05:23:36.697

        Try this. Let the ajax call be done inside a call back.

        $(function (){        
             $("#slider-range").slider({
                    range: true,
                    min: 71,
                    max: 109,
                    values: [75, 100],
                    slide: function (event, ui)
                    {
                        $("#size-range").html(Math.floor(ui.values[0] / 12) + "'" + (ui.values[0] % 12) + '" - ' + Math.floor(ui.values[1] / 12) + "'" + (ui.values[1] % 12) + '"');
                        $("#min_inches").val(ui.values[0]);
                        $("#max_inches").val(ui.values[1]);
                        var a = $("#min_inches").val($("#slider-range").slider("values", 0));
                        var b = $("#max_inches").val($("#slider-range").slider("values", 1));

                $.ajax({
                    type: "POST",
                    url: "searchrange.php",
                    data:
                    {
                        a: a,
                        b: b
                    },
                    success: function (option)
                    {
                        alert("voted");
                    }
                });
              }
           });
$("#size-range").html(Math.floor($("#slider-range").slider("values", 0) / 12) + "'" + ($("#slider-range").slider("values", 0) % 12) + '" - ' + Math.floor($("#slider-range").slider("values", 1) / 12) + "'" + ($("#slider-range").slider("values", 1) % 12) + '"');

     });

my slder box are not moving – user3077217 Dec 09 '13 at 05:28 — user3077217, Dec 09 '13 at 05:28

score 0 · Answer 2 · answered Dec 09 '13 at 05:45

I think your problem is that your $.ajax({...}) is being called too early - ie. on document ready $(function (){ ... $.ajax({...}) });, and not after your sliders are changed/selected. You could call your $.ajax({...}) on a button click -

<input id="vote" type="button" value="Vote" />

$("#vote").on('click',function(){
    var a= $("#min_inches").val();
    var b=$("#max_inches").val();  

    $.ajax ({
            type: "POST",
            url: "searchrange.php",
            data: { a : a,
            b : b },
            success: function(option)
            {
              alert("voted");
            }
            });

});

so your code could be -

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css" type="text/css" />
<script type="text/javascript">
    $(function ()
    {        
        $("#slider-range").slider(
        {
            range: true,
            min: 71,
            max: 109,
            values: [75, 100],
            slide: function (event, ui)
            {
                $("#size-range").html(Math.floor(ui.values[0] / 12) + "'" + (ui.values[0] % 12) + '" - ' + Math.floor(ui.values[1] / 12) + "'" + (ui.values[1] % 12) + '"');
                $("#min_inches").val(ui.values[0]);
                $("#max_inches").val(ui.values[1]);
            }
        });
        $("#size-range").html(Math.floor($("#slider-range").slider("values", 0) / 12) + "'" + ($("#slider-range").slider("values", 0) % 12) + '" - ' + Math.floor($("#slider-range").slider("values", 1) / 12) + "'" + ($("#slider-range").slider("values", 1) % 12) + '"');
        $("#min_inches").val($("#slider-range").slider("values", 0));
        $("#max_inches").val($("#slider-range").slider("values", 1));

        $("#vote").on('click',function(){
             var a= $("#min_inches").val();
             var b=$("#max_inches").val();  

             $.ajax({
                    type: "POST",
                    url: "searchrange.php",
                    data:
                    {
                      a: a,
                      b: b
                    },
                   success: function (option)
                   {
                     alert("voted");
                   }
             });
        });
    });
</script>

see this JSFiddle example (using alert in place of $.ajax()) -http://jsfiddle.net/8JgW6/

Mahmood Rehman · Accepted Answer · 2013-12-09T06:50:29.057

Try this code :

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Slider - Range slider</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() { 
    $( "#slider-range" ).slider({ 
        range: true, 
        min: 0, 
        max: 500, 
        values: [ 75, 300 ], 
        slide: function( event, ui ) { 
            $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] ); 
        },
        change: function(event, ui) {
            // when the user change the slider
        },
        stop: function(event, ui) {
            // when the user stopped changing the slider
               $.ajax(
        {
            type: "POST",
            url: "searchrange.php",
            data:
            {"min" :ui.values[0],"max":ui.values[1]},
            success: function (option)
            {
                alert("voted");
            }
        });
        }
    }); 
    $( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) + 
                        " - $" + $( "#slider-range" ).slider( "values", 1 ) ); 
}); 


</script>
</head>
<body>
<p>
<label for="amount">Price range:</label>
<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;">
</p>
<div id="slider-range"></div>
</body>
</html>

And your search page will be like this :

 if(isset($_POST['min']) && $_POST['min'] != '')
    {

    $kws = $_POST['min'];
    $kws1=$_POST['max'];
    echo $kws;     
    echo  $query = "select * from newusers where Age between '".$kws."' and '".$kws1."'" ;
    $res = mysql_query($query);
    $count = mysql_num_rows($res);
    $i = 0;
    if($count > 0)
    {
        echo "<ul>";
        while($row = mysql_fetch_array($res))
        {
            echo "<a href='#'><li>";     
            echo "<div id='rest'>";?>
            <a href="searchrange.php?id=<?php echo $row['0'];?> "><?php echo $row['Religion'];?><br><?php echo $row['Name'];?></a>
            <?php echo $row[0];
            echo "<br />";
            echo "<br />";    
            echo "<div style='clear:both;'></div></li></a>";
            $i++;
            if($i == 5) break;
        }
        echo "</ul>";
        if($count > 5)
        {
            echo "<div id='view_more'><a href='#'>View more results</a></div>";
        }
    }
    else
    {  
        echo "<div id='no_result'>No result found !</div>";
    }
}

Thank you so mch ajax call is working but the values are not going on php page — user3077217, Dec 09 '13 at 06:03
i tested and ajax values are going with min and amx variable to index.php page.Did you replace the index.php with your own page ? — Mahmood Rehman, Dec 09 '13 at 06:06
check now i edit index.php with searchrange.php.you can view the parameters on firebug console. — Mahmood Rehman, Dec 09 '13 at 06:08
@user3077217 No i only work on ajax portion.Your question was parameter are not going with request.what's the issue now ? — Mahmood Rehman, Dec 09 '13 at 06:35
rehmaan: sir i have edited my code to your code but problem is ajax is working(alert(voted) is displaying) but sql query on searchrange.php is still not working — user3077217, Dec 09 '13 at 06:38
@user3077217 Replace $_POST['a'] with "min" like $_POST['min']. It will works. — Mahmood Rehman, Dec 09 '13 at 06:42
@user3077217 check my answer with search.php code.Are you doing like this ? — Mahmood Rehman, Dec 09 '13 at 06:51
sir it is still same.(just boxes are moving ) but not displaying the results — user3077217, Dec 09 '13 at 07:03
its because you are alerting the result.add new div with id result and in place of alert write this code.$('#result').html(option); — Mahmood Rehman, Dec 09 '13 at 07:07

score 0 · Answer 4 · answered Dec 09 '13 at 06:10

    HI,

    You can try this.In this example you can see how I have made a call to ajax

function callService(val1,val2){
            alert("call service here  "+val1);

            $.ajax({
                       type: "POST",
                       url: "searchrange.php",
                       data:
                       {
                           a: val1,
                           b: val2
                       },
                       success: function (option)
                       {
                           alert("voted");
                       }
                   });


   }
  $sliderValue="";
    $(function() {

        $( "#slider-range" ).slider({
          range: true,
          min: 0,
          max: 500,
          values: [ 75, 300 ],
          slide: function( event, ui ) {


          },
          stop: function(event, ui) {            
                    $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
                    b = 0;
                    $sliderValue=ui.value;
                    console.log($sliderValue)
                    callService($sliderValue,b);
          }
        });
     http://jsfiddle.net/kapilgopinath/c4XA5/

How can i send javascript variable values into php

4 Answers4