Question

我有页面，我需要从选项（由API生成）的价值并将其传递到同一页面，我尝试使用PHP，但它需要重新加载，所以我需要它而不重新加载。

所以，我需要获取descity值并将其传递给填充函数的按钮：

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

我尝试使用函数DestVal（）也传递它而不刷新但是基于onclick并且如果它被触发它将传递值并且我用

获取值

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

并在按钮中将其回显给hitungBiaya函数。

结果是我在destval上得到了未定义的索引。

*您可以在我的代码底部看到DestVal（）函数

这里是代码：

 <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 '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 1

首先需要从下拉列表中获取值，然后将其传递给huntigbiaya函数。

你需要改变两件事来改变你的按钮代码，就像这样

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

在你的功能中执行此操作

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

Answer 2

试试这个，

按如下方式更新您的功能，

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

然后点击，

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

如何获取选项的价值（基于API数据）并将其传递到同一页面

2 个答案: