使 Select 下拉设置 session 变量以设置链接目标 PHP

Question

I would like to give the user the option via drop down to have the links on an image map open in either a new page or an iframe which is on the same page just below the image map.

With the code I have both things are happening when either option is selected.

The session variable is set correctly by the dropdown and when I view source, the HTML is adjusted with the target coming from the session variable.

I'm using a PHP MVC.

Select box(tour.php);

<select id="dropdown1" class="select" tabindex="2" onchange="run(this)">
  <option value="select">Please Select</option>
  <option value="iframe_tour">Open Tour Below Map</option>
  <option value="_blank">Open Tour in New Tab</option>
</select>
<input id="mapoption" name="mapoption" id="mapoption" value="<?=$_POST['mapoption']?>" hidden /> 

Section of image map(tour.php);

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2808 1670">
  <image width="2808" height="1670" xlink:href="<?php echo URLROOT; ?>/public/img/map-v2.png"></image>

  <a xlink:href="<?php echo URLROOT; ?>/public/tours/beta/index.html#POI_50" id="map_link" target="<?php echo($_SESSION['mapoption']); ?>">
   <rect x="2282" y="430" fill="#fff" opacity="0" width="50" height="50"></rect>
  </a>

  <a xlink:href="<?php echo URLROOT; ?>/public/tours/beta/index.html#POI_111" id="map_link" target="<?php echo($_SESSION['mapoption']); ?>">
    <rect x="1428" y="1242" fill="#fff" opacity="0" width="50" height="50"></rect>
  </a>
</svg>

Page controller(Pages.php);

public function tour(){
    if(!isLoggedIn()){
        redirect('users/login');
    }
    if($_SERVER['REQUEST_METHOD'] == 'POST'){
        $_SESSION['mapoption'] = $_POST['mapoption'];

    } else {

        $data = [
            'menuPleaseChoose' => 'Please Choose from the options',
            'menuOptionViewTour' => 'View Tour',
            'backToMap' => 'Back To Map'
        ];

        $this->view('pages/tour', $data);
    }
}

Answer 1

you can create a function which will be called on click & pass image url into this as parameter

<a href="javascript:void(0)" onclick="openImage(<image_url>)"></a>

<iframe id="iframeId"></iframe>


<script>
 function openImage(url){
    $("#iframeId").attr("src", $(this).attr("href"));
 }
 </script>