Can a single script be used for two or more Anchor button clicks?

Question

In my page there are two 'Conatct Selected' anchor button, one at the top having id as "selectAllLink" and other at the bottom having id as "selectAllLinkB" of the page. The top one working perfectly using the following script:

<script type="text/javascript">

$(function() {
    $('#selectAllLink').each(function() {
        var a = [];
        var n = $("td.title_listing input:checked");
        var s = "";

        n.each(function() {
            a.push(this.value);
        });
        s = a.join(',');

        if (a.length > 0)
            this.href = "/D_ContactSeller.aspx?property=" + s;
        else
            this.href = 'javascript:alert("Select at least one property to contact!");';
        return false;
    });
});

now for my bottom anchor button i tried to put it's id as 'selectAllLinkB' and changed the code like this:

    <script type="text/javascript">

    $(function() {
        $('#selectAllLink, selectAllLinkB').each(function() {
            var a = [];
            var n = $("td.title_listing input:checked");
            var s = "";
           .....
           .....
           .....
    });

Is there any simple method to call the script for both the anchor button event? waiting for the fast and good responce. Thanks in Advance...

Answer 1

You are quite close. The selector should be '#selectAllLink, #selectAllLinkB'.

However, you might want to use the click method instead of each to register a click event instead of setting the href attributes at load time. Now you are getting the checkboxes that are checked when the page loads, not when the link is clicked.

Answer 2

I'd change from the id to a class and so something like:

<script type="text/javascript"> 

$(function() { 
    $('.selectAllLink').each(function() { ...
    }
}

Answer 3

You've gone through the trouble of using unobtrusive JavaScript to modify the href, and you even have jQuery. There's really no reason to be using this method

this.href = 'javascript:alert("Select at least one property to contact!");';

Instead, you should consider using a more modern event registration method:

$(function() {
    $('#selectAllLink, #selectAllLinkB').click(function(e) {
        var a = [];
        $("td.title_listing input:checked").each(function() {
            a.push(this.value);
        });

        if ( a.length ) {
            this.href = "/D_ContactSeller.aspx?property=" + a.join(',');
        } else {
            e.preventDefault();
            alert("Select at least one property to contact!");
            return false;
        }
    });
});