如何根據下拉菜單中的選擇結果相乘

Question

我正在使用一個Wordpress插件，試圖根據自己的需要進行自定義，但是我對Javascript還是很陌生。 該插件計算兩個郵政編碼之間的距離，即$ distance是什么。 我創建了一個下拉菜單，根據車輛大小使用不同的值。 我要做的是顯示距離乘以分配給每種車輛尺寸的值（即每英里成本）。 任何幫助，將不勝感激。 謝謝。

<?php
/**
* Plugin Name: WP Distance Calculator
* Plugin URI: http://phpcodingschool.blogspot.com/
* Description: This plugin claculates distance between two near by locations.
* Version: 1.0.0
* Author: Monika Yadav
* Author URI: http://phpcodingschool.blogspot.com/
* License: GPL2
*/

class DistanceWPCalculator
{
public function __construct()
{       //action definations
        add_shortcode( 'distance_calculator',  array( &$this, 'distanceWPfrontend' ) ); 

        add_action( 'wp_ajax_nopriv_distancewpcalculator', array( &$this, 'distancewpcalculator_calculate' ) );
        add_action( 'wp_ajax_distancewpcalculator', array( &$this, 'distancewpcalculator_calculate' ) );

        add_action( 'init', array( &$this, 'init' ) );
}

public function init()
{
    wp_enqueue_script( 'distancewpcalculator', plugin_dir_url( __FILE__ ) . 'js/calculatedistance.js', array( 'jquery' ) );
    wp_localize_script( 'distancewpcalculator', 'DistanceCalculator', array(
        'ajaxurl' => admin_url( 'admin-ajax.php' )
    ) );
    ?>
    <script>
    var ajaxurl =  "<?php echo admin_url('admin-ajax.php'); ?>";
    </script>
    <?php
    wp_enqueue_style( 'DistanceWPCalculator-Style', plugin_dir_url( __FILE__ ) . 'css/style.css', array(), '0.1', 'screen' );
}

public function distancewpcalculator_calculate()
{   
    // The $_POST contains all the data sent via ajax
    if ( isset($_POST) ) {

    $from = urlencode($_POST['from']);
    $to = urlencode($_POST['to']);
    $data = file_get_contents("http://maps.googleapis.com/maps/api/distancematrix/json?origins=$from&destinations=$to&language=en-EN&sensor=false");
    $data = json_decode($data);
    $time = 0;
    $distance = 0;
        foreach($data->rows[0]->elements as $road) {
            $time += $road->duration->value;
            $distance += $road->distance->value;
        }
        $time =$time/60;
        $distance =round($distance/1609.344);

        //Output
        if($distance!=0){

        echo "<div id='result_generated'>";
        echo "From: ".$data->origin_addresses[0];
        echo "<br/>";
        echo "To: ".$data->destination_addresses[0];
        echo "<br/>";
        echo "Time: ".gmdate("H:i", ($time * 60))." hour(s)";
        echo "<br/>";
        echo "Distance: ".$distance." mile(s)";
        echo "</div>";         
        }else{
        echo "Sorry only nearby distance can be calculated."; 
        }                
       }

die();

}

//Function to display form on front-end
public function distanceWPfrontend( $atts ) {

?>  
    <form method ="post" id="calculator" >
        <div class="DC_title">Distance Calculator</div>
        <input type="text" id="from" name="from" placeholder="From.."></br>
        <input type="text" id="to" name="to" placeholder="To.."></br>
        <select id="carType" onchange="carsize()">
            <option value=".45">Motorcycle</option>
            <option value=".6">Small Sedan</option>
            <option value=".65">Large Sedan</option>
            <option value=".7">Wagon/Hatchback</option>
            <option value=".7">Small SUV</option>
            <option value=".8">Large SUV</option>
            <option value=".8">Minivan</option>
            <option value=".75">Small Truck</option>
            <option value=".8">Large Truck</option>
        </select>
        <input type="button" id="calculate" name="calculate" value="Calculate">
    </form></br>
    <div id="result"></div> 
    <?php
}

}

$distancewpcalculator = new DistanceWPCalculator();

?>

Answer 1

這實際上是PHP。 在distancewpcalculator_calculate()函數中，您將根據Google Maps API返回的結果計算距離。 您將計算出的距離存儲在$distance變量中（特別是$distance =round($distance/1609.344);) 。 在該分配中，您將記錄的$distance值從Km轉換為Mi。

您應該將HTML選擇標記和值修改為如下形式：

<select id="carType" name="carType">
  <option value=".45">Motorcycle</option>
  <option value=".6">Small Sedan</option>
  <option value=".65">Large Sedan</option>
  <option value=".7">Wagon/Hatchback</option>
  <option value=".7">Small SUV</option>
  <option value=".8">Large SUV</option>
  <option value=".8">Minivan</option>
  <option value=".75">Small Truck</option>
  <option value=".8">Large Truck</option>
</select>

這樣做將在$_POST數據中包含“ carType”值。 現在它已在發布數據中，您可以通過執行$_POST['carType']獲得所選值。 現在已經記錄了數據，我們可以將距離值乘以所選的carType。

public function distancewpcalculator_calculate()
{
    // The $_POST contains all the data sent via ajax
    if (isset($_POST)) {
        ...
        $distance = round($distance / 1609.344);

        $carType = $_POST['carType'];
        $cost = $carType * $distance;

        //Output
        if ($distance != 0) {
            ...
            echo "Distance: " . $distance . " mile(s)";
            echo "<br />";
            echo "Cost: {$cost}";
            echo "</div>";
        } else {
            ...
        }
    }
}

計算出的$cost是所選車輛類型（ $carType ）與兩個位置之間的計算出的距離（ $distance ）的乘積；