CODEWITHSUNDEEP
phpjquery
Divyesh Jesadiya
Divyesh Jesadiya

Reputation: 907

How to pass and get php value to jquery

I have one problem in passing the value, and I can't pass it through the query string. My PHP is:

 <div class="menu">
        <div class="sub_menu_header">ABOUT</div>
        <?php 
            $query1="SELECT id,title FROM aboutus_tbl";
            $resulto=mysql_query($query1);
            while ($row = mysql_fetch_array($resulto)) {
        ?>
        <a href="about" class="menuid" id="<?php echo $row['id'];?>"><div class="<?php echo $row['title'];?>" id="sub_menu"><?php echo $row['title'];?>
        </div></a>
        <?php
        }
        ?>
    </div>

jQuery:

 <script>
    $(".menuid").click(function() {
        date_time = $(this).attr('id');
        console.log(data);
        $.ajax({
            type: 'POST',
            url: 'about',
            data: {"aboutus_id" : date_time},
            success: function(data){
                alert( data );
            }
        });
    });
    </script>

Full code:

<?php ob_start(); include('web/header.php');?>
<!--main-->
<div class="main_btm">
<div class="wrap">
<div class="main">
    <div class="new_head"><font size="5" color="#FC2B5F">
    <script>
    $(".menuid").click(function() {
        date_time = $(this).attr('id');
        console.log(data);
        $.ajax({
            type: 'POST',
            url: 'about',
            data: {"aboutus_id" : date_time},
            success: function(data){
                alert( data );
            }
        });
    });
    </script>
    <?php
    if (isset($_POST['aboutus_id'])) {
        $id=$_POST['aboutus_id'];
        echo $id;
    }
    else{
        $id=1;
    }
    $que="SELECT title FROM aboutus_tbl WHERE id='".$id."'";
    $re=mysql_query($que);
    $r=mysql_fetch_array($re);
    echo $r[0];
    ?>
    </font></div>
    <div class="menu">
        <div class="sub_menu_header">ABOUT</div>
        <?php 
            $query1="SELECT id,title FROM aboutus_tbl";
            $resulto=mysql_query($query1);
            while ($row = mysql_fetch_array($resulto)) {
        ?>
        <a href="about" class="menuid" id="<?php echo $row['id'];?>"><div class="<?php echo $row['title'];?>" id="sub_menu"><?php echo $row['title'];?>
        </div></a>
        <?php
        }
        ?>
    </div>
    <div class="contant">
    <div class="con_details">
    <?php
        $query="SELECT * FROM aboutus_tbl WHERE id='".$id."'";
        $res=mysql_query($query);
        $result=mysql_fetch_array($res);
        $d1_per=explode("  ", $result['desc1']);
        $d1_lenth=sizeof($d1_per);
        $d2_per=explode("  ", $result['desc2']);
        $d2_lenth=sizeof($d2_per);
        $d3_per=explode("  ", $result['desc3']);
        $d3_lenth=sizeof($d3_per);
        if ($result['sub_title1']) {
    ?>
    <legend><font size="5"><?php echo $result['sub_title1'];?></font></legend>
    <?php
    }
    if ($result['desc1']) {
    for ($i=0; $i < $d1_lenth; $i++) { 
        echo "<p>".$d1_per[$i]."</p>";
    }
    }
    if ($result['sub_title2']) {
    ?>
    <legend><font size="5"><?php echo $result['sub_title2'];?></font></legend>
    <?php
    }
    if ($result['desc2']) {
    for ($i=0; $i < $d2_lenth; $i++) { 
        echo "<p>".$d2_per[$i]."</p>";
    }
    }
    if ($result['sub_title3']) {
    ?>
    <legend><font size="5"><?php echo $result['sub_title3'];?></font></legend>
    <?php
    }
    if ($result['desc3']) {
    for ($i=0; $i < $d3_lenth; $i++) { 
        echo "<p>".$d3_per[$i]."</p>";
    }
    }
    ?>
    </div>
    </div>
</div>
</div>
</div>
<script type="text/javascript">
window.onload = function() {
    $(document).ready(function() {
        $('.<?php echo $result['title']?>').addClass('sub_menu_selected');
    });
}
</script>
<?php include('web/footer.php'); ob_flush();?>

In the above code, I display a menu in a <div> and <a> tags outside so I can click it. My problem is when I click on the menu it must take the id of the menuid class but it's not working and $_POST['aboutus_id'] is not getting any value.

Upvotes: 12

Views: 16774

Answers (8)

anon
anon

Reputation:

My answer would come in the form of three pages built as such:

index.php

<!DOCTYPE html>
<html>
    <head>
        <title>MyPageTitle</title>
        <script src="path/to/javascript.js"></script>           
    </head>

    <body>
        <div id="mainContent"></div>
    </body>
</html>

script file (JavaScript)

$( document ).ready( function ()
{
    $.ajax( {
        url: "path/to/phpscript.php?myGet=true",
        type: "GET",
        success: function ( response )
        {
            $( "#mainContent" ).html( response );
        },
        beforeSend: function ()
        {
            $( "#mainContent" ).html( "Loading content..." );
        }
    });
} );

Script file (PHP)

<ul class="menu">
    <li><a href="about.php">About</a></li>
    <!-- More here -->
</ul>

You would obviously need to add the jQuery libraries for this, but it is a way to do this and add the HTML from the given AJAX called page into the correct area.

I hope this is what you are looking for.

Upvotes: 0

SkyMaster
SkyMaster

Reputation: 1323

Try this:

 <?php ob_start(); include('web/header.php');?>
<!--main-->
<div class="main_btm">
<div class="wrap">
<div class="main">

<div class="new_head"><font size="5" color="#FC2B5F">    
<?php
    if (isset($_POST['aboutus_id'])) {
        $id=$_POST['aboutus_id'];
        echo $id;
    }
    else{
        $id=1;
    }
    $que="SELECT title FROM aboutus_tbl WHERE id='".$id."'";
    $re=mysql_query($que);
    $r=mysql_fetch_array($re);
    echo $r[0];
?>
</font></div>
<div class="menu">
    <div class="sub_menu_header">ABOUT</div>

    <form action="index.php" id="form" method="post">
    <input type="hidden" id="aboutus_id" name="aboutus_id" value="">

    <?php 
        $query1="SELECT id,title FROM aboutus_tbl";
        $resulto=mysql_query($query1);
        while ($row = mysql_fetch_array($resulto)) {
    ?>
    <a href="#" class="menuid" id="<?php echo $row['id'];?>"><div class="<?php echo $row['title'];?>" id="sub_menu <?php echo $row['id'];?>"><?php echo $row['title'];?>
    </div></a>
    <?php
    }
    ?>
    </form>
</div>
<div class="contant">
<div class="con_details">
<?php
    $query="SELECT * FROM aboutus_tbl WHERE id='".$id."'";
    $res=mysql_query($query);
    $result=mysql_fetch_array($res);
    $d1_per=explode("  ", $result['desc1']);
    $d1_lenth=sizeof($d1_per);
    $d2_per=explode("  ", $result['desc2']);
    $d2_lenth=sizeof($d2_per);
    $d3_per=explode("  ", $result['desc3']);
    $d3_lenth=sizeof($d3_per);
    if ($result['sub_title1']) {
?>
<legend><font size="5"><?php echo $result['sub_title1'];?></font></legend>
<?php
}
if ($result['desc1']) {
for ($i=0; $i < $d1_lenth; $i++) { 
    echo "<p>".$d1_per[$i]."</p>";
}
}
if ($result['sub_title2']) {
?>
<legend><font size="5"><?php echo $result['sub_title2'];?></font></legend>
<?php
}
if ($result['desc2']) {
for ($i=0; $i < $d2_lenth; $i++) { 
    echo "<p>".$d2_per[$i]."</p>";
}
}
if ($result['sub_title3']) {
?>
<legend><font size="5"><?php echo $result['sub_title3'];?></font></legend>
<?php
}
if ($result['desc3']) {
for ($i=0; $i < $d3_lenth; $i++) { 
    echo "<p>".$d3_per[$i]."</p>";
}
}
?>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
    window.onload = function() {

       $(document).ready(function() {
          $('.<?php echo $result['title']?>').addClass('sub_menu_selected');

      $(".menuid").click(function() {
             date_time = $(this).attr('id');
             $("#aboutus_id").val(date_time);
             $("#form").submit();
              //console.log(data);
              /* $.ajax({
               type: 'POST',
               url: 'about',
               data: {"aboutus_id" : date_time},
               success: function(data){
                  alert( data );
                }
              }); */
         });    
     });       
   }
</script>
<?php include('web/footer.php'); ob_flush();?>
  1. $(".menuid").click(function() {... it must be within window.onload and placed at the end of the html code.
  2. Do not use Ajax to reload the page itself.
  3. Use submit from the form object to perform that task.
  4. Use a type hidden field to store the id value.
  5. Put the file path in: <form action="index.php"...

Upvotes: 2

Ashvin Monpara
Ashvin Monpara

Reputation: 282

try this code:- if you want to redirect the user:

header('Location: http://ashvin.com/page.php?' . http_build_query($_GET, '', '&')); die();

If however you just want to fetch the page, use this:

file_get_contents('http://ashvin.com/page.php?' . http_build_query($_GET, '', '&'));

and another:-

<a href="/exsomeurl.php?id=1&name=Jose" class="ajax-link"> Click </a>
<a href="/exsomeurl.php?id=2&name=Juan" class="ajax-link"> Click </a>
<a href="/exsomeurl.php?id=3&name=Pedro" class="ajax-link"> Click </a>
...
<a href="/exsomeurl.php?id=n&name=xxx" class="ajax-link"> Click </a>

<script type="text/javascript">
$(function() {
   $('.ajax-link').click( function() {
         $.get( $(this).attr('href'), function(msg) {
              alert( "Data Saved: " + msg );
         });
         return false; // don't follow the link!
   });
});
</script>

Upvotes: 5

Lo&#239;c
Lo&#239;c

Reputation: 11942

So first of : 

console.log(data)

Is obviously giving an error as in your code, data isn't set.

Then you should probably replace :

url: 'about',

With : 

url: '/about',

It seems basic, but please give it a shot.

Upvotes: 2

PeterKA
PeterKA

Reputation: 24648

It appears that you have just one single file and you want it to display what you want the user to see and select from and also receive user input and send back to itself. Pardon me if I am mistaken. While that is possible, however, I would not advise you to take that approach.

Please divide your file into two main files:

  1. Markup (HTML/PHP) and JS that would display what the user should see initially. This is the page you load: my.domain.com/index.php
  2. PHP that would receive user input, connect to the database and output/return result. This is would be the value of url in your ajax call: /about.php

First File: index.php (for example) May need some cleanup

<!-- index.php ...hopefully header include jquery.js -->
<?php ob_start(); include('web/header.php');?>
<!--main-->
<div class="main_btm">
<div class="wrap">
<div class="main">
<div class="new_head"><font size="5" color="#FC2B5F">
<script>
    //it's usually a good idea to put this in it's own .js file
    $(function() {
        $(".menuid").click(function(e) {
            e.preventDefault();
            var date_time = this.id;
            console.log(date_time);
            $.ajax({
                type: 'POST',
                url: '/about.php', //<<--- second file
                data: {"aboutus_id" : date_time},
                success: function(data){
                    alert( data );
                }
            });
        });
    });
    </script>

    </font></div>
    <div class="menu">
        <div class="sub_menu_header">ABOUT</div>
        <?php 
            $query1="SELECT id,title FROM aboutus_tbl";
            $resulto=mysql_query($query1);
            while ($row = mysql_fetch_array($resulto)) {
        ?>
        <a href="about" class="menuid" id="<?php echo $row['id'];?>"><div class="<?php echo $row['title'];?>" id="sub_menu"><?php echo $row['title'];?>
        </div></a>
        <?php
        }
        ?>
    </div>
    <div class="contant">
    <div class="con_details">
    <?php
        $query="SELECT * FROM aboutus_tbl WHERE id='".$id."'";
        $res=mysql_query($query);
        $result=mysql_fetch_array($res);
        $d1_per=explode("  ", $result['desc1']);
        $d1_lenth=sizeof($d1_per);
        $d2_per=explode("  ", $result['desc2']);
        $d2_lenth=sizeof($d2_per);
        $d3_per=explode("  ", $result['desc3']);
        $d3_lenth=sizeof($d3_per);
        if ($result['sub_title1']) {
    ?>
    <legend><font size="5"><?php echo $result['sub_title1'];?></font></legend>
    <?php
    }
    if ($result['desc1']) {
    for ($i=0; $i < $d1_lenth; $i++) { 
        echo "<p>".$d1_per[$i]."</p>";
    }
    }
    if ($result['sub_title2']) {
    ?>
    <legend><font size="5"><?php echo $result['sub_title2'];?></font></legend>
    <?php
    }
    if ($result['desc2']) {
    for ($i=0; $i < $d2_lenth; $i++) { 
        echo "<p>".$d2_per[$i]."</p>";
    }
    }
    if ($result['sub_title3']) {
    ?>
    <legend><font size="5"><?php echo $result['sub_title3'];?></font></legend>
    <?php
    }
    if ($result['desc3']) {
    for ($i=0; $i < $d3_lenth; $i++) { 
        echo "<p>".$d3_per[$i]."</p>";
    }
    }
    ?>
    </div>
    </div>
</div>
</div>
</div>
<script type="text/javascript">
window.onload = function() {
    $(document).ready(function() {
        $('.<?php echo $result['title']?>').addClass('sub_menu_selected');
    });
}
</script>
<?php include('web/footer.php'); ob_flush();?>

Second file: about.php

<!-- about.php -->
<?php
    if (isset($_POST['aboutus_id'])) {
        $id=$_POST['aboutus_id'];
        echo $id; //possibly part of the alert
    } else {
        $id=1;
    }
    $que="SELECT title FROM aboutus_tbl WHERE id='".$id."'";
    $re=mysql_query($que);
    $r=mysql_fetch_array($re);
    echo $r[0]; //should show on the alert -- ajax call
?>

Upvotes: 2

Andrew Berger
Andrew Berger

Reputation: 56

If the id column of your aboutus_tbl table is of INT type, the part of your code that encloses the id in quotes will cause a null result from the query. The id passed from the html element will be in string form "3", so you must parse the integer value from $id for starters. This will also make your code less vulnerable to SQL injection, which you will undoubtedly fall victim by evaluating user input in SQL directly, Consider the following. A user makes the html form post ;DROP TABLE aboutus_tbl-- instead of the id! Here is the vulnerable code: `

if (isset($_POST['aboutus_id'])) {
    $id=$_POST['aboutus_id'];
    echo $id;
}
else{
    $id=1;
}
$que="SELECT title FROM aboutus_tbl WHERE id='".$id."'";`

I would recommend changing $id=$_POST['aboutus_id']; to $id=intval($_POST['aboutus_id']); and removing the quotes around the last line like this:

    $que="SELECT title FROM aboutus_tbl WHERE id=$id";`

php will read variables out of double quotes "" without concatenation. Hope this helps you!

Edit: Remember the only surefire way to prevent injection is to use PDO or prepared statements: Try this to learn prepared statements or here is a decent example of PDO. Also, remember that >PHP5.5 mysql is deprecated!! Use mysqli!

Upvotes: 2

Meenesh Jain
Meenesh Jain

Reputation: 2528

You can pass this value in your href

   <a href="about.php?aboutus_id=<?php echo $row['id'];?>" id="<?php echo $row['id'];?>" class="<?php echo $row['title'];?>">
  <?php echo $row['title'];?>
</a>

now when you will click the link

your page will be something like this ex:

about.php?aboutus_id=10

use this value with $_GET

   if(isset($_GET['aboutus_id']) && $_GET['aboutus_id']!="")
   {
      echo  $_GET['aboutus_id'];
   }

Upvotes: 4

Disha V.
Disha V.

Reputation: 1864

You can use id in link instead of hidden element.

<a href="about.php" id="<?php echo $row['id'];?>">
    <div class="<?php echo $row['title'];?>" id="sub_menu"><?php echo $row['title'];?></div>
</a>

Upvotes: 3

Related Questions