I am totally stuck in my code. I want me to choose some option from <select>
and this showed me something about what I chose
I have a function with some attributes.
Here's the function:
class Data {
public function example() {
$values = array(
'one' => array(
'name' => 'Name One',
'atts' => array(
'style' => array(
'type' => '123'
),
'something' => array(
'type' => 'wow'
),
),
),
'two' => array(
'name' => 'Name Two',
'atts' => array(
'style' => array(
'type' => 'select'
),
'something' => array(
'type' => 'wow'
),
),
),
);
return $value;
}
}
new Data();
Here's the select function:
<h2>Select</h2>
<select class="options">
<?php
foreach ($this->example() as $value){
$output = '<option value="'.$value['name'].'">'.$value['name'].'</option>';
echo $output;
}
?>
</select>
And finally here's what i want to get
<div id="content">
<?php
foreach ($this->example() as $value){
foreach ($value['atts'] as $attr_name => $attr_parm){
$return = '<p>'.$attr_parm['type'].'</p>';
echo $return;
}
}
?>
</div>
What i want: if i choose 'Name One' in my select option it will return me '123 wow', and if i choose 'Name Two' it will return me 'select wow'
I know it might be done through Ajax, but i got some real troubles with it.
My JS code:
$('.options').change(function () {
var value = $(this).val();
var data = "options"+value;
$.ajax({
type: 'POST',
url: php-file.php, // File where i got my php code
data: data,
success: function (result) {
$('#content').html(result);
}
});
});
I understand my JS code is totally wrong, but anyways maybe you got some ideas how to solve my problem or what should i do to fix this issue
There's an easier way to make what do you want:
data.php
<?php
$values = array(
'0' => array(
'name' => 'Name One',
'atts' => array(
'style' => array(
'type' => '123'
),
'something' => array(
'type' => 'wow'
),
),
),
'1' => array(
'name' => 'Name Two',
'atts' => array(
'style' => array(
'type' => 'select'
),
'something' => array(
'type' => 'wow'
),
),
),
);
$val=$_POST['val'];
$getKey = array_search($val, array_column($values, 'name'));
if (isset($values[$getKey])) {
$data=$values[$getKey];
header('Content-Type: application/json');
echo json_encode($data);
}
// echo "<pre>";print_r($data);
?>
with data.php u can get data from array by array_search().
and in index.php:
<?php
$values = array(
'0' => array(
'name' => 'Name One',
'atts' => array(
'style' => array(
'type' => '123'
),
'something' => array(
'type' => 'wow'
),
),
),
'1' => array(
'name' => 'Name Two',
'atts' => array(
'style' => array(
'type' => 'select'
),
'something' => array(
'type' => 'wow'
),
),
),
);
?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
$(".options").change(function(){
val=$(this).val();
// console.log(val);
$.ajax({
url:"data.php", // post val to data.php
type: "POST",
data:'val='+val,
success: function(response) {
// console.log(response.atts.style.type);
//parsing data from json format
var str1=response.atts.style.type;
var str2=response.atts.something.type;
$('.content').html(str1+" "+str2);
}
});
});
});
</script>
<br><br>
<h2>Select</h2>
<select class="options">
<?php
foreach ($values as $value){
$output = '<option value="'.$value['name'].'">'.$value['name'].'</option>';
echo $output;
}
?>
</select>
<br><br><br><br>
<div class="content">
</div>
I hope this could help you.