在 cakephp 中有 1 个用于保存和调用 JS 函数的按钮

Question

我有一个 cakephp 网站，在下面的视图中，我的表单上有 2 个按钮。我想要做的只是按下“继续”按钮并调用 JS 函数。目前，我单击计算按钮调用 JS 函数，然后单击此表单上的继续按钮（单击 2 次按钮）。我只想为这个过程做 1 个按钮。

   <input type="button" value="calculate" id="calculate_address_lat_long" class="btn btn-info btn-block waves-effect waves-light">

    <div class="mute" id="formated_address_lat_long"></div> 
  ...

  <?php     echo $this->Form->button(__('Continue'))

  //this didnt work
   $options = array('label' => 'Continue', 'id' => 'calculate_address_lat_long',  'onclick' => 'calculate_address_lat_long()');
                                       echo $this->Form->button($options);


  //jquery


$(document).on('click', '#calculate_address_lat_long', function () {
        var address = '';
        address += $('#street').val();
        address += ' ' + $('#suburb').val();
        address += ' ' + $('#postcode').val();
        address += ' ' + $('#state').val();

     //  alert( $('#street').val());
         alert( address);

             alert(google.maps.GeocoderStatus.OK);

        geocoder.geocode( { 'address': address}, function(results, status) {

            if (status == google.maps.GeocoderStatus.OK) {


             //     alert('asdasd');
                  console.log(results); 
                var latitude = results[0].geometry.location.lat();
                var longitude = results[0].geometry.location.lng();
                $('#lat').val(latitude);
                $('#long').val(longitude);
                $('#formated_address_lat_long')
                    .html('<div class="alert alert-success">' + results[0].formatted_address + '</div>')
                    .fadeTo(100, 0.1).fadeTo(250, 1)
                    .css({"position": "relative","top": "15px"});
           // alert($('#lat').val(latitude));

            } else {
                //  alert('qqqasdasd');

             //     alert($('#lat').val(latitude));
           // alert($('#long').val(longitude));
                $('#formated_address_lat_long')
                    .fadeTo(100, 0.1).fadeTo(250, 1)
                    .html('<div class="alert alert-error">Address Not Found</div>')
                    .css({"position": "relative","top": "15px"});
            }
        });
        // alert('1111qqqasdasd');

    });

Answer 1

button function的第一个参数是标题，选项是第二个参数。试试这个：

$options = array('id' => 'calculate_address_lat_long',  'onclick' => 'calculate_address_lat_long()');
echo $this->Form->button('Continue', $options);

Answer 2

我需要在控制器中编写 php 中的代码并在服务器端执行

  if ($this->request->is(['patch', 'post', 'put'])) {
            $data = $this->request->data;
          $address=$data['address_street'] .'+'. $data['address_suburb'] .'+'. $data['address_postcode'] .'+'. $data['address_state'] ;
          $address = str_replace(" ", "+", $address);


              $json = file_get_contents("https://maps.googleapis.com/maps/api/geocode/json?address='.$address.'&key=mykey");

             $json = json_decode($json);
             $lat='';
             $long='';   

            if ($json->{'results'}!=null){
             $lat = $json->{'results'}[0]->{'geometry'}->{'location'}->{'lat'};
             $long = $json->{'results'}[0]->{'geometry'}->{'location'}->{'lng'};
            //   debug($lat);
            //  debug($long); 
            }

Answer 3

根据HTML方法，在一个页面上，必须只有一个唯一ID。在您的例子中，HTML 按钮 id="calculate_address_lat_long" 和 CakePHP 生成按钮 id="calculate_address_lat_long"。因此，尝试使用 class 代替。

在 cakephp 中有 1 个用于保存和调用 JS 函数的按钮

have 1 button for a save and invoke JS function in cakephp

jquery

cakephp