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>

[s-stefanov]

So, you get values ​​from #voice_id, #voice_name with the val () function, which takes a value from the input field. Where do you declare this field?
Declare it secretly

 <input type="hidden" id="voice_id"  value="'. $row['voice_id'].'">
 <input type="hidden" id="voice_name"  value="'. $row['voice_name'].'">

[aveeva]

Sorry, my fault, actually all the details are predefined display to cutomer, i just want to shared the details to my-cart.php

FYI → my output

[R3v07v3R]

Try this out, I modified my code for your variables;
https://jsfiddle.net/cfLtg6q8/7/

Restyled with Bootstrap4, since I had it on hand.

Basically, I make a hidden and put the data I want to pass into data() tags.
<input id="data_inp" class="invisible" type="hidden" data-id="'. $row['voice_id'].'" data-name="'. $row['voice_name'].'" />

Then retrieve it to JS and send to the page using the Correct Variables and as POST.
$(’.btn’).on(‘click’, function() {
var voice_id = $("#data_inp").data(“id”);
var voice_name = $("#data_inp").data(“name”);

  $.ajax({
    url: "my_cart.php",
    method: "POST",
    data: {
      voice_id: voice_id,
      voice_name: voice_name
    },
    dataType: "html"
  })
});