Member Avatar for emortals

Hello all,

I am new to javascript and looking for some help. I have searched around different forums but my skills have not served me well to build a working script.

I have a simple form with 4 checkboxes and a submit button. Each checbox has a unique value. The value is part of a URL for which when the submit button is clicked the value of the selected checkbox is used to build the link. It should also open the link in a new window.

Here is my HTML

<form name="Form">  
    <input type="checkbox" name="box" value="001"><label>box1</label><BR>  
    <input type="checkbox" name="box" value="002"><label>box2</label><BR>  
    <input type="checkbox" name="box" value="003"><label>box3</label><BR>
    <input type="checkbox" name="box" value="004"><label>box4</label><BR>
    <br>
    <input type="button" value="submit" name="butt" onclick="submit()">
</form>

Here is what I need the Javascript to do:

  1. If checkbox is ticked
  2. Get input value
  3. Use input value to open a link
  4. Base link is for example "http://localhost/"
  5. If multiple checkboxes are ticked and i click submit i would like it to open the links

The final action would be for example if I checked box1 and clicked submit to open the link in new window i.e. http://localhost/001

Or if I checked multple boxed and clicked submit it would open all the links seperately.

Thanks!

Appreciate the assistance.

Moustafa

Edited by emortals because: wrong link
  • 2 Contributors
  • 8 Replies
  • 275 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Alberto Bucur

Dani AI

Generated

Short summary of what worked in the thread and a more scalable, robust pattern.

asked for a way to open one or more links built from a common base plus each checkbox’s value. ’s mapping and hidden-element ideas are valid, but both either duplicate URL data or require extra markup maintenance. A cleaner approach is to keep the base URL in one place (the script) and let each checkbox provide only a suffix or an optional full URL via a data attribute. Use an unobtrusive event listener (not a function named submit) and build each URL with encodeURIComponent. Open links with anchors that include rel="noopener noreferrer" to avoid window.opener issues.

Example pattern (replace BASE_URL and set data-full-url on an input if a full URL is needed):

const base = 'https://BASE_URL/'; // single place to change
document.getElementById('openBtn').addEventListener('click', () => {
  const checked = document.querySelectorAll('input[name="box"]:checked');
  checked.forEach(cb => {
    const url = cb.dataset.fullUrl || (base + encodeURIComponent(cb.value));
    const a = document.createElement('a');
    a.href = url;
    a.target = '_blank';
    a.rel = 'noopener noreferrer';
    document.body.appendChild(a);
    a.click();
    a.remove();
  });
});

Notes and troubleshooting

  • Avoid naming functions submit (it shadows the form API). Use addEventListener on a button instead of inline onclick.
  • Multiple programmatic opens can trigger pop‑up blockers in some browsers; for large selections, open one new window/tab that lists the links for the user to open, or render the links in-page as a fallback.
  • Always encodeURIComponent checkbox values when appending to a URL.
  • Use proper labels (for + id) for accessibility and type="button" on the opener to avoid accidental form submits.

This keeps URL logic central, avoids repeating full URLs in labels, and is easy to maintain as the checkbox list grows.

Recommended Answers

All 8 Replies

Member Avatar for Alberto Bucur

Hi,
Try this, but change the urls with yours:

function BoxRedirect()
        {
            var b = document.getElementsByName("box");
            var len = b.length;
            for(var i = 0; i < len; i++)
            {
                if(b[i].checked)
                {
                    if(b[i].value == "001")
                    {
                        window.open("http://www.google.com","_blank");
                    }
                    if(b[i].value == "002")
                    {
                        window.open("http://www.yahoo.com","_blank");
                    }
                    if(b[i].value == "003")
                    {
                        window.open("http://localhost","_blank");
                    }
                    if(b[i].value == "004")
                    {
                        window.open("http://www.daniweb.com","_blank");
                    }    

                }
            }
        }
commented: Hi albucurus. Thank you for your reply. I prefer not to specify the value in the javascript if possible. If you can imagine 100+ checkboxes, i dont want to have to update the javascript for each one. My apologies, I should have mentioned that in my origin +0
Member Avatar for emortals

Here is the the incomplete javascript function that i've been working with. It's missing bits and pieces and probably needs rewriting.

<script type="text/javascript">
function submit(){

var boxes = document.getElementsByName('box');
var url = "http://www.example.com/";

if ( box.checked === true ) {

}

var box;
for (var i = 0, length = boxes.length; i < length; i++) {
  if (boxes[i].checked) {
    // do whatever you want with the checked radio
    box = labels[i].innerHTML;
    window.alert(url + input-value-goes-here );
  }
}
}
</script>
Member Avatar for emortals

Hi albucurus. Thank you for your reply. I prefer not to specify the value in the javascript if possible. If you can imagine 100+ checkboxes, i dont want to have to update the javascript for each one. My apologies, I should have mentioned that in my original request.

Member Avatar for Alberto Bucur

Ok, here my solution

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="content-type" content="text/html" />
    <meta name="author" content="Administrator" />
    <title>Lets play with D3</title>  
    <script type="text/javascript">

        function BoxRedirect()
        {
            var b = document.getElementsByName("box");
            var len = b.length;
            var url = "";
            for(var i = 0; i < len; i++)
            {
                if(b[i].checked)
                {
                    url = document.getElementById("box"+b[i].value).innerHTML;
                    window.open(url,"_blank");
                }
            }
        }

</script>

</head>

<body style="background-color: aliceblue;">

        <form name="Form">
        <input type="checkbox" name="box" value="001"/><label id="box001">http://www.google.com</label><br />
        <input type="checkbox" name="box" value="002"/><label id="box002">http://www.yahoo.com</label><br />
        <input type="checkbox" name="box" value="003"/><label id="box003">http://localhost</label><br />
        <input type="checkbox" name="box" value="004"/><label id="box004">http://www.daniweb.com</label><br />
        <br />
        <input type="button" value="Redirect" name="butt" onclick="BoxRedirect()"/>
        </form>

</body>


</html>
Member Avatar for emortals

Hi albucurus,

I think we are almost there! but I cannot have the label be the URL as the Label will be text. Is there anyway to update the code to have the static link in the javascript i.e. "http://www.example.com/" and then use the input value to complete the link

var url = "http://www.example.com/"
window.alert(url + input-value-goes-here );

result is

Your way did work but I cannot have the URL in the label!

Again, appreciate your assistance.

Member Avatar for Alberto Bucur

Hi,
You can use a hiidden paragraph in html, like this:

<input type="checkbox" name="box" value="001"/><label>Google</label><p id="box001" hidden="hidden">http://www.google.com</p><br />
Member Avatar for emortals

Okay. I didnt realise I could use hidden fields. Thanks for your assistance!

Member Avatar for Alberto Bucur

Hi,
Put this in solved mode, please.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.