如何根据下拉菜单中的选择结果相乘

Question

I'm using a Wordpress plugin that I'm trying to customize for my needs but I'm very new to Javascript. The plugin calculates the distance between two zip codes which is what $distance is. I created a drop down menu with different values based on vehicle size. What I want to do is display the distance multiplied by the value assigned to each vehicle size (which is the cost per mile). Any help would be appreciated. Thank you.

<?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

This is actually PHP. In your distancewpcalculator_calculate() function you calculate the distance based on the results that the Google Maps API returns. You store the calculated distance in the $distance variable (specifically $distance =round($distance/1609.344);) . In that assignment you convert the recorded $distance value from Km to Mi.

You should modify your HTML select tag and values to something like this:

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

Doing this will include the "carType" value in the $_POST data. Now that it is in the post data, you can get the value selected by doing $_POST['carType'] . Now that data is recorded we can multiply the value of the distance by the carType selected.

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 {
            ...
        }
    }
}

The calculated $cost is a product of the selected vehicle type ( $carType ) and the calculated distance between the two locations ( $distance );