CODEWITHSUNDEEP
javascripthtml
art
art

Reputation: 313

Disable href of HTML using javascript

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.

Upvotes: 2

Views: 19119

Answers (8)

Oriol
Oriol

Reputation: 288610

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

Upvotes: 0

Rahul Tripathi
Rahul Tripathi

Reputation: 172578

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';
    }
    }

Upvotes: 0

Martin
Martin

Reputation: 3286

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();
        }
    });
});

Upvotes: 2

kgd
kgd

Reputation: 1665

Why don't you use JQuery?

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

JsFiddle

Upvotes: 0

Simon Staton
Simon Staton

Reputation: 4505

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)"
}

Upvotes: -1

ajiang
ajiang

Reputation: 1722

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()

Upvotes: 0

Matt Indeedhat Holmes
Matt Indeedhat Holmes

Reputation: 725

add onclick="return false;"

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

Upvotes: 1

LDJ
LDJ

Reputation: 7324

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...

Upvotes: 0

Related Questions