Gusti Aldi Gusti Aldi - 12 days ago 5
jQuery Question

how to get value on option (based on API data) and pass it in same page

I have page that i need value from option (generated by API) and pass it to same page too, i tried with php but it need reload first so i need it without reloaded.

so, i need get the descity value and pass it to button filled with function :

<button type="button" onclick="DestVal();hitungBiaya(19,<?php echo $DestVal; ?>,1);">Cek Harga</button>


I try use function DestVal() too pass it without refresh but based onclick and if it triggered it will pass the value and I grab the value with

<?php $DestVal = $_GET['DestVal'];?>


and echo it to hitungBiaya function in button.

and the result is i got undefined index on destval.

*you can see the DestVal() function on the bottom of my code

here's the code :

<head>
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/skeleton.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<title>Penggunana API RajaOngkir | IDMore</title>

</head>
<body>
<?php
$total = 45000;
?>
<div class="container">
<div class="row">
<br/>
<div class="twelve columns"><h1>Hitung Ongkos Kirim</h1></div>
</div>
<div class="row">
<div class="twelve columns"><h5>Masukan Data</h5></div>
</div>
<div class="row">
<!-- <form method="POST" action="gettotal.php"> -->

<div class="four columns">
Tujuan<br/>
<select id="desprovince">
<option>Provinsi</option>
</select>
<br/>
<select name="descity" id="descity">
<option>Kota</option>
</select>
</div>
<div class="two columns">
Layanan<br/>
<select name="service" id="service">
<option value="">Pilih Paket</option>
<option value="jne">JNE</option>
<option value="pos">POS</option>
<option value="tiki">TIKI</option>
</select>
<br/>
Berat (KG)<br/>
<input name="weight" style="width:100px" id="berat" type="number">
</div>
<div class="two columns">
<br/>
<?php $DestVal = $_GET['DestVal'];?>
<button type="button" onclick="DestVal();hitungBiaya(19,<?php echo $DestVal; ?>,1);">Cek Harga</button>
</div>
<!-- </form> -->
</div>
<div class="row">
<div class="twelve columns"><h5>Harga</h5></div>
<hr/>
<span id="result"></span>
<?php $barang = 45000; ?>
<h6>harga barang <span id="barang"><?php echo $barang; ?> </span></h6>
<h6>harga ongkir <span id="ongkir">0</span></h6>
<h6>harga total <span id="total"></span></h6>
<hr/>


<!--
<table class="twelve columns">
<thead>
<tr>
<th>Kurir</th>
<th>Servis</th>
<th>Deskripsi Servis</th>
<th>Lama Kirim (hari)</th>
<th>Total Biaya (Rp)</th>
</tr>
</thead>
<tbody id="resultsbox"></tbody>
</table>
-->
</div>
</div>
</body>
<script charset="utf-8" src="js/jquery.min.js"></script>
<script charset="utf-8">
function getTotalHarga()
{
var barang = parseInt($('#barang').html());
var ongkir = parseInt($('#ongkir').html());
return $('#total').html(barang+ongkir);
}
function hitungBiaya(asal,tujuan,berat)
{
$('#result').html('loading...');
var jasa = $('#service').val();
$.ajax({
url:'process.php?act=alvincost',
data:{origin:asal,destination:tujuan,weight:berat,courier:jasa},
type:'GET',
success:function(response){
$('#result').html(response);
getTotalHarga();
},
error:function(){
alert('something wrong');
}
});
}

function totalOngkir()
{
var ongkir = $('input[name="pilihpaket"]:checked').val();
// alert(ongkir);
$('#ongkir').html(ongkir);
getTotalHarga();
}
$(document).ready(function(){
getTotalHarga();
});

function DestVal() {
var DestVal = $('input[name="descity"]:checked').val();
window.location.href = "example.php?DestVal=" + DestVal;
}

</script>


Process.php (alvincost case)

case 'alvincost':
$origin = $_GET['origin'];
$destination = $_GET['destination'];
$weight = $_GET['weight'];
$courier = $_GET['courier'];
$cost = $IdmoreRO->hitungOngkir($origin,$destination,$weight,$courier);
//parse json
$costarray = json_decode($cost);
$results = $costarray->rajaongkir->results;
echo '<br/>';
// print_r($results);
if(!empty($results)){
foreach($results as $r):
foreach($r->costs as $rc):
foreach($rc->cost as $rcc):
echo '<label><input onclick="totalOngkir()" type="radio" id="pilihpaket" name="pilihpaket" value="'.$rcc->value.'">'.$rc->service.' : Rp.'.number_format($rcc->value).'</label><br/>';
endforeach;
endforeach;
endforeach;
}else{
echo 'paket tidak tersedia';
}
//end of parse json
break;
default:
echo 'aksi tidak tersedia';
break;

Answer

You first need to get value from dropdown and then pass it to huntigbiaya function.

You need to change two things change your button code like this

<button type="button" onclick="DestVal()">Cek Harga</button> 

And in your function do this

function DestVal() { 
          var Dest = $('select[name="descity"] optoin:selected').text();
          hitungBiaya(19,Dest,1);"              
        }