Currently remove a html-link from an image

Question

situation:

• I have an image with a link around it.
• The link destination is generated by a PHP script.
• when the page loads, the link should be disabled. Later on, (when some forms are filled by user) the link should be enabled again.
• when the link is disable, I dont want any link behaviour (no mouse pointer change on hover etc. ...)

Code

    <a class="link" href="destination_generated_by_php_script">
        <img src="image_source_path">
    </a>

When I'm hiding the link, It'll hide the image as well (what i dont want). I thought about, to just display the image and wrap the anchor around it later on. But I guess, there's an easier answer.

Answer 1

use this function in you document accroding to your need.

event.preventDefault();

like you can use it as below

$('#link').click(function(event){
    if( form is not filled ){
        event.preventDefault();
    }
    else{
         //do nothing
    }
})

Answer 2

You can solve this by removing the href from the link. That way it won't appear as a link to the eye but CSS will still apply. If you do so, remember to save it somewhere so it can be properly restored.

var href;
href = $(".link").attr("href");

//remove href attribute and store it in data
$(".link").removeAttr("href").data("href", href); 

When you want to activate the link again, you can do so like this

var href;
href = $(".link").data("href");
$(".link").attr("href", href);

The data can be removed as well (via removeData()) but is not necessary.

Answer 3

You can try like:

<a class="link" href="destination_generated_by_php_script">
    <img src="image_source_path">
</a>

and the jQuery script as:

var flag = false; //Global (Page Scope)
$('.link').click(function(e){
   if(flag){
     window.location.href = $(this).attr('href');
   }else{
     e.preventDefault();
  }
});

Now when you want the click to work, just do:

flag = true;