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.

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.

• javascript
• html

• 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 Commented Aug 29, 2013 at 14:17

8 Answers 8

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

add onclick="return false;"

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

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

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

Why don't you use JQuery?

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

JsFiddle

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

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

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

JSFIDDLE HERE: http://jsfiddle/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)"
}