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
  • 256 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Alberto Bucur
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 http://www.example.com/001

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.