CODEWITHSUNDEEP
javascriptphpjquery
Gusti Aldi
Gusti Aldi

Reputation: 201

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;

Upvotes: 2

Views: 507

Answers (2)

ScanQR
ScanQR

Reputation: 3820

Try this,

Update your function as follows,

function hitungBiaya(asal,berat)
         {
            //on click get the selected option value
            var tujuan= $('select[name="descity"] optoin:selected').text();
            $('#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');
               }
            });
         }

And you click,

<button type="button" onclick="hitungBiaya(19,1);">Cek Harga</button>

Upvotes: 0

Mairaj Ahmad
Mairaj Ahmad

Reputation: 14624

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);"              
        }

Upvotes: 1

Related Questions