因此,我修改了一段代码,其中包括对Google距离矩阵API的调用。
我希望它只计算出到特定地址的距离。但我现在还想在不同的页面上使用它。
我创建了第二个短代码,它在隐藏字段中创建了第二个具有不同邮政编码的表单,但虽然第一个表单工作正常,但第二个表单没有任何作用。
有人能帮忙吗?
删除地址和API密钥的以下代码
<?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_shortcode( \'distance_calculator_LC\', array( &$this, \'distanceWPfrontendLC\' ) );
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("https://maps.googleapis.com/maps/api/distancematrix/json?units=imperial&origins=$from&destinations=$to&key=");
$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/1000);
//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." miles";
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="hidden" id="to" name="to" value="Postcode 1">
<input type="text" id="from" name="from" placeholder="From.."></br>
<input type="button" id="calculate" name="calculate" value="Calculate" class="wpcf7-form-control wpcf7-submit btn btn-accent btn-lg">
</form></br>
<div id="result"></div>
<?php
}
public function distanceWPfrontendLC( $atts ) {
?>
<form method = "post" id="calculator" >
<div class="DC_title">Distance Calculator</div>
<input type="hidden" id="to" name="to" value="Postcode2">
<input type="text" id="from" name="from" placeholder="From.."></br>
<input type="button" id="calculate" name="calculate" value="CalculateLC" class="wpcf7-form-control wpcf7-submit btn btn-accent btn-lg">
</form></br>
<div id="result"></div>
<?php
}
}
$distancewpcalculator = new DistanceWPCalculator();
?>
JS
jQuery(文档)。就绪(函数(){
jQuery("#calculate").click( function(){
// This does the ajax request
var from = jQuery(\'#from\').val();
var to = jQuery(\'#to\').val();
jQuery.ajax({
url : ajaxurl,
type : \'POST\',
data: {
\'action\':\'distancewpcalculator\',
\'from\' : from,
\'to\' : to
},
success:function(data) {
// This outputs the result of the ajax request
jQuery(\'#result\').html(data);
},
error: function(errorThrown){
console.log(errorThrown);
}
});
});
});
最合适的回答,由SO网友:Jacob Peattie 整理而成
问题是,如果JavaScript引用的是表单和输入的ID,那么如果两者都在同一页面上,脚本将只使用第一个表单的值运行。
最简单的解决方案是为每个短代码中的元素使用不同的ID,但更好的永久解决方案是让您基于类编写脚本,并使用提交表单中的值,而不是全局ID。
所以改变你的表格,在form
要素:
<form class="distance-calculator">
<input type="hidden" name="to" value="Postcode2">
<input type="text" name="from">
<input type="submit" value="Calculate">
</form>
<div class="result"></div>
为了清楚起见,我删除了与问题无关的所有内容。我还删除了
method="post"
因为POST不适合获取值。我还将result div更改为使用类。
然后将JavaScript更新为目标提交.distance-calculator
窗体,并使用from
和to
值仅来自提交的表单。然后仅使用.result
在表单之后。
jQuery( \'.distance-calculator\' ).on( \'submit\', function( event ) {
event.preventDefault();
var form = this;
var from = form.from.value;
var to = form.to.value;
jQuery.ajax( {
url : ajaxurl,
type : \'GET\',
data: {
\'action\' : \'distancewpcalculator\',
\'from\' : from,
\'to\' : to
},
success: function( data ) {
jQuery.next( \'.result\' ).html( data );
},
error: function( errorThrown ) {
console.log(errorThrown);
}
} );
} );
我还更改了
POST
到
GET
在这里正如我之前提到的
POST
不适用于此类型的请求。
POST
应仅用于创建或更新资源,而
GET
应用于检索数据。这只意味着您需要更新PHP才能使用
$_GET
而不是
$_POST
.