PHP - Ajax Passing value to another php file

[aveeva]

Here is my PHP, i want to share voice_id and voice_name to another php file using ajax,

<?php
//fetch_data.php
 
include('database_connection.php');
 
if(isset($_POST["action"]))
{
    $query = "
        SELECT * FROM voice_bank_data WHERE voice_status = '1'
    ";
 
    // if(isset($_POST["minimum_price"], $_POST["maximum_price"]) && !empty($_POST["minimum_price"]) && !empty($_POST["maximum_price"]))
    // {
    //     $query .= "
    //      AND product_price BETWEEN '".$_POST["minimum_price"]."' AND '".$_POST["maximum_price"]."'
    //     ";
    // }
 
    // Gender
    if(isset($_POST["gender"]))
    {
        $gender_filter = implode("','", $_POST["gender"]);
        $query .= "
         AND voice_gender IN('".$gender_filter."')
        ";
    }
 
    // Genres
    if(isset($_POST["genres"]))
    {
        $genres_filter = implode("','", $_POST["genres"]);
        $query .= "
         AND voice_genres IN('".$genres_filter."')
        ";
    }
 
    // Voice Modulation
    if(isset($_POST["voice_modulation"]))
    {
        $voice_modulation_filter = implode("','", $_POST["voice_modulation"]);
        $query .= "
         AND voice_voice_modulation IN('".$voice_modulation_filter."')
        ";
    }
 
 
    // Languages
    if(isset($_POST["languages"]))
    {
        $languages_filter = implode("','", $_POST["languages"]);
        $query .= "
         AND voice_languages IN('".$languages_filter."')
        ";
    }
 
    // Jingle Moods
    if(isset($_POST["jingle_moods"]))
    {
        $jingle_moods_filter = implode("','", $_POST["jingle_moods"]);
        $query .= "
         AND voice_jingle_moods IN('".$jingle_moods_filter."')
        ";
    }
 
    // IVR
    if(isset($_POST["ivr"]))
    {
        $ivr_filter = implode("','", $_POST["ivr"]);
        $query .= "
         AND voice_ivr IN('".$ivr_filter."')
        ";
    }
 
    $statement = $connect->prepare($query);
    $statement->execute();
    $result = $statement->fetchAll();
    $total_row = $statement->rowCount();
    $output = '';
    if($total_row > 0)
    {
        foreach($result as $row)
        {
            $output .= '
            <div class="col-sm-3 col-lg-4 col-md-3">
                <div style="border:1px solid #ccc; border-radius:5px; padding:10px; margin-bottom:16px; height:300px;">
                    <audio controls controlsList="nodownload" style="padding: 10px 10px 10px 10px;margin-left: -21px;">
                        <source src="audio_sample/'. $row['voice_audio_file'] .'" alt="" class="img-responsive">
                    </audio>
                    <p align="center"><strong> '. $row['voice_name'] .'</strong></p>
 
                    <p style="font-size: 12px;">
                    Id              : '. $row['voice_id'].' <br />
                    Name              : '. $row['voice_name'].' <br />
                    Gender              : '. $row['voice_gender'].' <br />
                    Genres               : '. $row['voice_genres'].' <br />
                    Voice Modulation  : '. $row['voice_voice_modulation'].' <br />
                    Languages          : '. $row['voice_languages'].' <br />
                    Jingle Moods      : '. $row['voice_jingle_moods'].' <br />
                    Ivr               : '. $row['voice_ivr'].' <br /> </p>
                    <button type="button" class="btn btn-primary" type="submit" style="padding: 5px 83px 5px 83px;">Add to PlayList </button>
 
                </div>
 
            </div>
            ';
        } 
    }
    else 
    {
        $output = '<h3>No Data Found</h3>';
    }
    echo $output;
}
?>
 
<script>
 
    $('.btn').on('click',function() {
        var voice_id     = $("#voice_id");
        var voice_name  = $("#voice_name");
 
        $.ajax({
            type      : "POST",
            url       : "my_cart.php",
            datatype : "text",
            // data     : {voice_id: voice_id, voice_name: voice_name },
            data     : "voice_id="+voice_id+"&voice_name="+voice_name,
 
 
            success: function(data)
            {
                // console.log(data);
                console.log('success',data);
 
            }
        });
    });
 
</script>
 

[gits]

so what is the exact problem you have with your code? as far as i can see in that bunch of code you try to retrieve the values from an element with jQuery's id selector - but in the entire html i dont see you creating that element with such an id.

[aveeva]

Simple, my output:

if($total_row > 0)
    {
        foreach($result as $row)
        {
            $output .= '
            <div class="col-sm-3 col-lg-4 col-md-3">
                <div style="border:1px solid #ccc; border-radius:5px; padding:10px; margin-bottom:16px; height:300px;">
                    <audio controls controlsList="nodownload" style="padding: 10px 10px 10px 10px;margin-left: -21px;">
                        <source src="audio_sample/'. $row['voice_audio_file'] .'" alt="" class="img-responsive">
                    </audio>
                    <p align="center"><strong> '. $row['voice_name'] .'</strong></p>
 
                    <p style="font-size: 12px;">
                    Id              : '. $row['voice_id'].' <br />
                    Name              : '. $row['voice_name'].' <br />
                    Gender              : '. $row['voice_gender'].' <br />
                    Genres               : '. $row['voice_genres'].' <br />
                    Voice Modulation  : '. $row['voice_voice_modulation'].' <br />
                    Languages          : '. $row['voice_languages'].' <br />
                    Jingle Moods      : '. $row['voice_jingle_moods'].' <br />
                    Ivr               : '. $row['voice_ivr'].' <br /> </p>
                    <button type="button" class="btn btn-primary" type="submit" style="padding: 5px 83px 5px 83px;">Add to PlayList </button>
 
                </div>
 
            </div>
            ';
        } 
    }
    else 
    {
        $output = '<h3>No Data Found</h3>';
    }
    echo $output;
}
 

i want my output voice_id and voice_name post to another php pag,
in the time of click button, so i added into button,


Sorry this line not added.

<button type="button" class="btn btn-primary" style="padding: 5px 83px 5px 83px;" data-voice-id="'.$row["voice_id"].'" data-voice-name="'.$row["voice_name"].'">Add to Playlist</button>
 

and my ajax :

<script>
 
    $('.btn').on('click',function() {
        // var voice_id     = $("#voice_id");
        // var voice_name  = $("#voice_name");
 
        var voice_id = $(this).data("voice-id");
        var voice_name = $(this).data("voice-name");
 
        $.ajax({
            type      : "POST",
            url       : "my_cart.php",
            datatype : "text",
            data     : { voice_id: voice_id, voice_name: voice_name },
            // data     : "voice_id="+voice_id+"&voice_name="+voice_name,
 
 
 
            success: function(data)
            {
                // console.log(data);
                //console.log('success',data);
                //$('#result').html(response);
 
            }
        });
    });
 
</script>
 

and my my_cart.php

<?PHP
 
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);
 
// Get details from fetch_data.php
 
$voice_id = '';
$voice_name = '';
 
if(isset($_POST['voice_id']) && isset($_POST['voice_name']))
{
    $voice_id   = $_POST['voice_id'];
    $voice_name = $_POST['voice_name'];
}
    echo "$voice_id & $voice_name";
 
?>
 

How to post my voice_id and voice_name if click add to playlist button,

FYI -> https://snag.gy/DHQTZ6.jpg

How to retrive the post value and display like

https://snag.gy/bWsU6z.jpg

[gits]

your button doesnt have a data-property - thats what you try to retrieve with:

var voice_id = $(this).data("voice-id");
var voice_name = $(this).data("voice-name");

your properties are called:

data-voice-id
data-voice-name

on that button. So you need to use the correct way to get the values.