Home/ Questions/Q 452833
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-12T22:06:43+00:00

I have a requirement to click on multiple links (selecting them) and then click

  • 0

I have a requirement to click on multiple links (selecting them) and then click a button that will open all selected links in new windows or tabs. This will of course be dependent upon the browser behaviour.

My plan is to use Javascript to add the selected links to an array and then upon clicking the submit button, the javascript will run through the array and open a new window for each item. I will probably do this in jQuery.

Has anyone done anything similar? Are there alternatives?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I think you are right.

    The best way to achieve what you are describing IMHO is to place URL’s of links you want to open in new windows into an array, using return false; in order to prevent actually opening link and then to use some sort of loop to open all of them.

    I took a liberty of putting together few lines of jQuery code that will do what you have described:

    $(document).ready(function() {
    var $hash = new Array(); // We create new Array 
    $('a').click( function(){ // On each click to <a> element
        if ( $(this).attr("data-pack") == "true" ) { // check wether this is one of the links we use
            $hash[$(this).attr("id")] = $(this).attr("href"); // We add href value into $hash object
            $(this).css("color","green"); // Way to mark selected ones
            $(this).attr("data-pack", "selected"); // Change data-pack property value to selected
            return false; // We don't want to execute this yet
        } else if ( $(this).attr("data-pack") == "selected" ) { // In case you change your mind and want to unselect
            $(this).attr("data-pack", "true"); // Change data-pack property back, thanks to Ambrosia pointing it out in the comment
            $(this).css("color","red"); // We mark it as unset
            delete $hash[$(this).attr("id")]; // Remove it from hash
            return false;
        }
    });

    $("form").submit( function(){ // After we submit
        for (var i in $hash) { // Go trough $hash
            window.open($hash[i]); // And open window for each member
        }
        return false; // We don't actually want to submit form, just open new windows :)
    } );    
});

    HTML would look something like:

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Page Title</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript" charset="utf-8" async defer></script>
    <script src="application.js" type="text/javascript" charset="utf-8" async defer></script>
</head>
<body>
    <a href="#link1" data-pack="true" id="link1">data</a>
    <a href="#link2" data-pack="true" id="link2">data</a>
    <a href="#link3" data-pack="true" id="link3">data</a>
    <a href="#link4" data-pack="true" id="link4">data</a>
    <a href="#">ordinary link</a>

    <form>          
        <input type="submit" value="submit">
    </form>
</body>
</html>
    • 0