logo
Ask your WordPress questions! Pay money and get answers fast! (more info)

Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.

If the asker does not get an answer then they have 10 days to request a refund.

$6
javascript onClick on image should activate checkbox

I use the following code on mapsmarker.com plugin to show marker icons on admin backend:

<?php

foreach ($iconlist as $row)

  echo '<div><img value="'.$row.'" id="iconpreview" src="' . LEAFLET_PLUGIN_ICONS_URL . '/' . $row . '" /><br/><input onchange="updateicon(this.value);" type="radio" name="icon" value="'.$row.'"'.($row == $icon ? ' checked' : '').'></div>';

?>


The code for updateicon() looks like this:

function updateicon(newicon) {

  if(newicon) {

  marker.setIcon(new L.Icon('<?php echo LEAFLET_PLUGIN_ICONS_URL . '/' ?>' + newicon));

  }

  if(!newicon) {

  marker.setIcon(new L.Icon('<?php echo LEAFLET_PLUGIN_URL . 'leaflet-dist/images/marker.png' ?>'));

  }

}


To improve usability, I want the user to be able to select the icon by clicking on the image too. So I started adding the javascript function onClick="updatecheckedicon(this.value);" to the image-tag:

<?php

foreach ($iconlist as $row)

  echo '<div><img onClick="updatecheckedicon(this.value);" value="'.$row.'" id="iconpreview" src="' . LEAFLET_PLUGIN_ICONS_URL . '/' . $row . '" /><br/><input onchange="updateicon(this.value);" type="radio" name="icon" value="'.$row.'"'.($row == $icon ? ' checked' : '').'></div>';

?>


Unfortunately, I didnt get this function to work. If the user clicks on the image, the according checkbox should be checked.

Does anyone know how this function must look like?

This question has been answered.

Robert Harm | 08/05/12 at 5:13pm Edit


(2) Possible Answers Submitted...

See a chronological view of answers?

Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.

  • avatar
    Last edited:
    08/05/12
    5:29pm
    Francisco Javier Carazo Gil says:

    You can do it using jQuery.

    Firstly you have to add classes or identifiers to relate each one. For example:
    * img class = clickable
    * img add an attribute mycheck = id_checkbox
    * checkbox id = id_checkbox

    You will have related img and checkbox with the the new attribute and then you can make a listener with your class.

    You can add after the loop this one:


    
$(".clickable").click(function () {
    
      $("#" + this.attr("mycheck")).prop("checked", true);
    
    });

    • 08/05/12 5:31pm

      Francisco Javier Carazo Gil says:

      Modify the loop to get the news classes and identifiers:


      
<?php
      
$i = 0; // to have a valid identifier
      
foreach ($iconlist as $row)
      
{
      
$i++;
      
  echo '<div><img class="clickable" mycheck="check' + $i + '" value="'.$row.'" id="iconpreview" src="' . LEAFLET_PLUGIN_ICONS_URL . '/' . $row . '" /><br/><input id="check' + $i + '" onchange="updateicon(this.value);" type="radio" name="icon" value="'.$row.'"'.($row == $icon ? ' checked' : '').'>
      
}</div>';
      

      
?>

  • avatar
    Last edited:
    08/05/12
    8:02pm
    Gabriel Reguly says:

    Hi Robert,

    Why not use <label> html tag?


    
<?php
    

    
foreach ( $iconlist as $row ) {
    
  echo '
    
    <div>
    
       <label "iconpreview_"'.$row.'">
    
         <img value="'.$row.'" id="iconpreview_"'.$row.'" src="' . LEAFLET_PLUGIN_ICONS_URL . '/' . $row . '" /><br/>
    
         <input onchange="updateicon(this.value);" type="radio" name="icon" value="'.$row.'"'.($row == $icon ? ' checked' : '').'>
    
      </label>
    
   </div>';
    
}
    
?>


    IMO that would be the best approach.

    Regards,
    Gabriel

    • 08/06/12 3:19pm

      Robert Harm says:

      that was the right approach thanks!

      for the record - if anyone tries to copy the code above - it had some errors - here is the right one:

      <?php
      
foreach ( $iconlist as $row ) {
      
  echo '
      
    <div>
      
       <label for="iconpreview_'.$row.'">
      
         <img value="'.$row.'" src="' . LEAFLET_PLUGIN_ICONS_URL . '/' . $row . '" />      </label>
      
<br/>
      
         <input id="iconpreview_'.$row.'" onchange="updateicon(this.value);" type="radio" name="icon" value="'.$row.'"'.($row == $icon ? ' checked' : '').'>
      
   </div>';
      
}
      
?>

This question has expired.



Gabriel Reguly had additional discourse to offer.

Hai Bui, Arnav Joy, Manoj Raj, Robert Harm voted on this question.



Current status of this question: Completed



Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.

If the asker does not get an answer then they have 10 days to request a refund.