Disable href of HTML using javascript

Question

How do I disable an href based on data? Below, there is a table that will display the data. When the Clik Here is clicked, the data will be sent to the database.

<table>
   <thead>
     <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Address</th>
        <th>Button</th>
     </tr>
   </thead>
   <tbody>
     <tr>
       <td>Mr.XX</td>
       <td>20</td>
       <td>Street XX</td>
       <td><a name=sendName id=sendId href="#" >Clik Here</a></td>
     </tr>
   </tbody>
</table>

However, when the age cell is not equal to 20, the href for Click Here should be disabled, so that the user cannot send that data to the database.

Can you please add more information (f.e. a jsFiddle). Is the table from php, asp or whatever? does the table always have only one entry? how will the age be changed? — Martin
– Martin, Commented Aug 29, 2013 at 14:17

Martin · Accepted Answer · 2013-08-29 13:58:40Z

2

I think you can do something like: jsFiddle

HTML:

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Address</th>
            <th>Button</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Mr.XX</td>
            <td>
                <input id="ageInput" type="text" value="20" />
            </td>
            <td>Street XX</td>
            <td><a name="sendName" id="sendId" href="#">Clik Here</a>
            </td>
        </tr>
    </tbody>
</table>

JS:

$(document).ready(function () {
    $('#ageInput').keyup(function (e) {
        var age = $(this).val();
        if (age != 20) {
            // anything what should happend if its not 20 f.e.:
            $('#sendId').hide();
        } else {
            // anything what should happend if it is 20 f.e.:
            $('#sendId').show();
        }
    });
});

answered Aug 29, 2013 at 13:58

Martin

3,3461 gold badge29 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Martin Over a year ago

If you think you have to downvote it would be good to leave a comment.

art Over a year ago

I dont have idea why people downvote for this answer.This is almost what I want .Thanks for help :)

Martin Over a year ago

No problem. You asked you get the answer you needed -> everything i wanted ;)

Matt Indeedhat Holmes · Accepted Answer · 2013-08-29 13:46:44Z

1

add onclick="return false;"

<a name=sendName id=sendId href="#" onclick="return false;" >Clik Here</a>

answered Aug 29, 2013 at 13:46

Matt Indeedhat Holmes

7255 silver badges18 bronze badges

Comments

LDJ · Accepted Answer · 2013-08-29 13:46:09Z

0

In your click handler for the link, get the age value, perform the test and simply return false from the handler if you dont want it to do anything (i.e. !== 20), else return true to persist the data...

answered Aug 29, 2013 at 13:46

LDJ

7,36411 gold badges59 silver badges91 bronze badges

Comments

ajiang · Accepted Answer · 2013-08-29 13:46:53Z

0

if the data format is going to be consistent, you should add an id attribute to the table cell that will display the data. this way javascript can access it using the method .getElementById()

answered Aug 29, 2013 at 13:46

ajiang

1,7222 gold badges12 silver badges12 bronze badges

1 Comment

art Over a year ago

yes .that is what actually I do ,but I dont want to show the code here because it too long .So I just make a simple and easy to explain :)

kgd · Accepted Answer · 2013-08-29 13:56:38Z

0

Why don't you use JQuery?

$("#sendId").on("click", function(){
    if ($("#age").text() != 20) {
        return false;   
    }
});

JsFiddle

answered Aug 29, 2013 at 13:56

kgd

1,6752 gold badges11 silver badges15 bronze badges

Comments

Rahul Tripathi · Accepted Answer · 2013-08-29 14:01:07Z

0

Try may be this:-

function disableLink()
    {
    if(document.getElementById(".age").innerHTML != 20)
    {
    document.getElementById('YourLink').disabled=true;
    document.getElementById('YourLink').removeAttribute('href');    
    document.getElementById('YourLink').style.textDecoration = 'none';
    document.getElementById('YourLink').style.cursor = 'default';
    }
    }

edited Aug 29, 2013 at 14:01

answered Aug 29, 2013 at 13:46

Rahul Tripathi

173k33 gold badges292 silver badges341 bronze badges

3 Comments

PeeHaa Over a year ago

Didn't downvote, but generally speaking using inline JS is terrible practice.

Rahul Tripathi Over a year ago

@PeeHaa:- Ok got your point.!!! Updated my answer with another option!!! Does this seems good ??:)

Rahul Tripathi Over a year ago

It is a request for downvoters if they can leave a comment for the reasoon for downvoting... IT WOULD BE GREAT

Oriol · Accepted Answer · 2014-07-12 19:16:09Z

0

You can try HTML5 validation:

<form>
    Mr.XX
    <input id="ageInput" type="number" value="20" min="20" max="20" />
    Street XX
    <input type="submit" name="sendName" id="sendId" value="Clik Here" />
</form>

If the age is not a number, or if it's less than 20, or greater than 20, the form won't be valid and the browser won't send it.

Demo

answered Jul 12, 2014 at 19:16

Oriol

291k71 gold badges459 silver badges535 bronze badges

Comments

Simon Staton · Accepted Answer · 2013-08-29 13:55:16Z

-1

Make it change the href to javascript: void(0) if the value is not 20

JSFIDDLE HERE: http://jsfiddle.net/NBuxW/

Using JQuery:

if($(".age").text() != 20) {
    $('.my-link').attr("href", "javascript: void(0)");
}

Using Javascript:

if(document.getElementById(".age").innerHTML != 20) {
    document.getElementById(".age").href = "javascript: void(0)"
}

edited Aug 29, 2013 at 13:55

answered Aug 29, 2013 at 13:50

Simon Staton

4,5054 gold badges32 silver badges50 bronze badges

2 Comments

Simon Staton Over a year ago

What is the reason for the negative vote the second I posted?

Simon Staton Over a year ago

I hate it when people downvote a valid answer for no reason without explanation, luckily someone upvoted to 0 :(

Collectives™ on Stack Overflow

Disable href of HTML using javascript

8 Answers 8

3 Comments

Comments

Comments

1 Comment

Comments

3 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

3 Comments

Comments

Comments

1 Comment

Comments

3 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related