How to pass jquery values to php without page loading

Question

I want to pass the jquery value "selected" to fetchdata.php without reloading the page. How can I do this?

Here is my code:

<!DOCTYPE html>
<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" 
        type="text/javascript"></script>

        <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.min.js" type="text/javascript">
        </script>
        <script>
            $(document).ready(function() {
                $("#buttonClass").click(function() {
                    getValueUsingClass();
                });
            });
            function getValueUsingClass() {

                var chkArray = [];

                $(".chk:checked").each(function() {
                    chkArray.push($(this).val());
                });

                /* we join the array separated by the comma */
                var selected;
                selected = chkArray.join('#') + "#";

                if (selected.length > 1)
                {
                    $.ajax({
                        url: "fetchdata.php", //This is the page where you will handle your SQL insert
                        type: "GET",
                        data: "val=" + selected, //The data your sending to some-page.php
                        success: function()
                        {
                            console.log("AJAX request was successfull");
                        },
                        error: function()
                        {
                            console.log("AJAX request was a failure");
                        }
                    });

                    //alert("You have selected " + selected); 
                } else
                {
                    alert("Please at least one of the checkbox");
                }
            }
        </script>
    </head>
    <body>
        <div id="checkboxlist">
            <div><input type="checkbox" value="1" class="chk"> Value 1</div>
            <div><input type="checkbox" value="2" class="chk"> Value 2</div>
            <div><input type="checkbox" value="3" class="chk"> Value 3</div>
            <div><input type="checkbox" value="4" class="chk"> Value 4</div>
            <div><input type="checkbox" value="5" class="chk"> Value 5</div>
            <div>
                <input type="button" value="Get Value Using Class" id="buttonClass"> 
            </div>
</html>

fetchdata.php

<?php
    foreach($_GET['val'] as $r)
    {
        print_r($r);
    }
?>

I am using the GET method to receive the data and the for-each loop to print the array, but I am not getting any values in the PHP file.

Use print_r($_GET) to see what is comming in $_GET request — 웃웃웃웃웃
– 웃웃웃웃웃, Commented Aug 20, 2013 at 4:46
@user2376463, just as a heads up, it's a good idea to make sure that your code is formatted properly. It can make it easier to spot errors and minor issues that way! It may be a little overblown, but I'd suggest doing your PHP development work in something like NetBeans, then utilizing its code formatting tool heavily. — Chris Forrence
– Chris Forrence, Commented Aug 20, 2013 at 5:01

Janith Chinthana · Accepted Answer · 2013-08-20 04:57:49Z

2

change the ajax function like below and make sure about the fectdata.php in the same folder or give the correct path.

$.ajax({
    url: 'fetchdata.php',
    type:'GET',
    data: {val:selected},
    success: function(data) {
        console.log("AJAX request was successfull");
    }
});

answered Aug 20, 2013 at 4:57

Janith Chinthana

3,8442 gold badges30 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

steven Over a year ago

+1 but maybe he sould use chkArray directly instead of selected, shouldnt he?

Sriram TP Over a year ago

stil there is no improvement.. :(

steven Over a year ago

by the way the following is always true: (selected.length > 1)

steven Over a year ago

to check if you select at least one you shoud do if(chkArray.length > 0) instead of the string selected which has always at least one character (#) UPDATE: sorry you did > 1 so it should work

steven Over a year ago

i would do data: {val:chkArray}, and see what happens in firebug console

|

Linkmichiel · Accepted Answer · 2013-08-20 05:02:28Z

1

Check if the path to your script is correct:

url: 'fetchdata.php',

Is this script in your doc root?

answered Aug 20, 2013 at 5:02

Linkmichiel

2,1304 gold badges23 silver badges27 bronze badges

5 Comments

steven Over a year ago

yes, check it in firebug console to see if the file is called properly

Linkmichiel Over a year ago

there doesn't seem to be anything wrong with your code, I'm getting the ajax response here.

Sriram TP Over a year ago

@Linkmichiel please tell me more with examples

Linkmichiel Over a year ago

Use the path relative to the root directory. E.g.: if the scripts are located in the directory 'buttons', then you must also direct fetchdata.php to that directory, url: 'buttons/fetchdata.php'

Linkmichiel Over a year ago

You can also use a absolute path, url: 'http:// domain.com/buttons/fetchdata.php'

Srividhya · Accepted Answer · 2013-08-20 05:35:18Z

0

change the following in your code, in fetchdata.php

<?php 
$valArray = explode('@',$_GET['val']); 
foreach($valArray as $val){
echo $val."<br/>";
}
?>

In html File,

$(document).ready(function () {

$("#buttonClass").click(function() {
getValueUsingClass();
});

});

function getValueUsingClass(){ 
var chkArray = [];

$(".chk:checked").each(function() {
chkArray.push($(this).val());
}); 
/* we join the array separated by the comma */
var selected;
selected = chkArray.join('@') + "@";
if(selected.length > 1)
{ 
$.ajax({
url: "fetchdata.php", //This is the page where you will handle your SQL insert
type: "GET",
data: "val=" +selected.toString(), //The data your sending to some-page.php
success: function(data1) {  
$("#resultDiv").html(data1);
console.log("AJAX request was successfull");
},
error:function()
{
console.log("AJAX request was a failure");
}   
});

//alert("You have selected " + selected); 
}else
{
alert("Please at least one of the checkbox");   
}
}

include the div after a button like

<div id="resultDiv"></div>

answered Aug 20, 2013 at 5:35

Srividhya

3891 gold badge4 silver badges16 bronze badges

2 Comments

Sriram TP Over a year ago

Hi @srividhya there is no change..:( But the firebug console says "Ajax request was successfull"

Srividhya Over a year ago

add one div tag after a button. the data will be printed in the div

Collectives™ on Stack Overflow

How to pass jquery values to php without page loading

3 Answers 3

11 Comments

5 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

11 Comments

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related