Javascript - Retrieve input value from a selected checkbox and do something with it

Question

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:

If checkbox is ticked Get input value Use input value to open a link Base link is for example "http://example.com/" 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://example.com/001

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

Here is the Javascript function I attempted from different forums - 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>

EDIT: I completely forgot to mention that I would prefer not to have to enter each value in the javascript. If you can imagine 100+ checkboxes.. it would be a nightmare to have to keep updating the script.

Thanks!

Appreciate the assistance.

Moustafa

At Least show what script you have written to get input value and open a new tab, this will help you in learning — Iti Tyagi
– Iti Tyagi, Commented Mar 19, 2014 at 7:38
Hi Iti, I just updated the post to include the incomplete javascript function that i've been working with. thanks! — user3436467
– user3436467, Commented Mar 19, 2014 at 7:56
use a javascript framework! such as jquery (or other). it easier to get the value of elements — Oki E. Rinaldi
– Oki E. Rinaldi, Commented Mar 19, 2014 at 7:57
should you link look like ex.com?box=001&box=002.....&box=n according of checked inputs? — Evgeniy
– Evgeniy, Commented Mar 19, 2014 at 8:02
The final link will be to a CSV file to download, it uses link + ?csv=1 I completely forgot to mention that I would prefer not to have to enter each value in the javascript. If you can imagine 100+ checkboxes.. it would be a nightmare to have to keep updating the script. — user3436467
– user3436467, Commented Mar 19, 2014 at 8:24

Akash Thakare · Accepted Answer · 2014-03-19 09:43:55Z

1

Try this...

<html>
<head>

<script type="text/javascript">

function OpenAll()
{
alert("i am in");
var data = document.forms[0].box;
var i;
for (i=0;i<data.length;i++)
  {
  if (data[i].checked)
    {
    window.open(""+data[i].value);
    }
  }
}

</script>
</head>
<body>
 <form method="POST">
<input type="checkbox" name="box" value="http://www.google.com">Google<br/>  
<input type="checkbox" name="box" value="http://www.facebook.com">FaceBook<br/>  
<input type="submit" value="OPEN" onclick="OpenAll()"/>
</form>
</body>
</html>

edited Mar 19, 2014 at 9:43

answered Mar 19, 2014 at 8:26

Akash Thakare

23k11 gold badges64 silver badges89 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user3436467 Over a year ago

it works great on a new page but if i add the script to an existing page with other forms and checkboxes it doesnt work. I tried troubleshooting and I isolated it down to conflicts with other checkboxes. Will this javascript work with a specific form or any ideas why it may be failing? the alert pops up but just doesnt open the link.

user3436467 Over a year ago

If it helps.. Firefox debug displayed "Data is undefined"

user3436467 Over a year ago

I see. so if I have 3 forms and the one in question is my 3rd form then document.forms[2] 0,1,2,3.. and it worked! thank you again!!

Pim Verlangen · Accepted Answer · 2014-03-19 08:55:03Z

1

~~I'm not sure if it's possible to open multiple tabs/windows within one method, as window.open will stop the current JavaScript-method running.~~ It IS possible to open multiple windows, but there is a catch to it. You must enable pop-ups, which most people have disabled by default. Then there is the browser-issue: as a developer, you can't decide whether the browser opens up a new tab, or a new window. What you can do to show multiple tabs/windows, is use the piece of JavaScript I copied at the bottom of my answer. Note though, that while it works, it opens up only ONE tab, the rest are new 'pop-up'-windows (atleast in Chrome).

This code does work if you need to open one page, and one page only though.

Using jQuery might make your life a lot easier:

HTML

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">        </script>
        <script type="text/javascript" src="boxes.js"></script>
    </head>
    <body>
        <input type="checkbox" name="box1" value="box1" id="box1"><label>box1</label><br/>
        <input type="checkbox" name="box2" value="box2" id="box2"><label>box2</label><br/>
        <input type="checkbox" name="box3" value="box3" id="box3"><label>box3</label><br/>
        <input type="checkbox" name="box4" value="box4" id="box4"><label>box4</label><br/>

        <input type="button" value="Submit" name="submitButton" onclick="submit()">
    </body>
</html>

JavaScript (jQuery)

function submit() {
    var box1 = $('#box1');
    var box2 = $('#box2');
    var box3 = $('#box3');
    var box4 = $('#box4');

    if (box1.prop('checked')) {
        goToUrl('http://box1url.com');
        //Redirect by box1
    }
    if (box2.prop('checked')) {
        goToUrl('http://box2url.com');
        //Redirect by box2
    }
    if (box3.prop('checked')) {
        goToUrl('http://box3url.com');
        //Redirect by box3
    }
    if (box4.prop('checked')) {
        goToUrl('http://box4url.com');
        //Redirect by box4
    }
}

function goToUrl(url) {
    var win = window.open(url, '_blank');
    win.focus();
}

EDIT: WITHOUT JQUERY

Might you decide not to use jQuery, you could use this for JavaScript:

function submit() {
    var box1 = document.getElementById('box1');
    var box2 = document.getElementById('box2');
    var box3 = document.getElementById('box3');
    var box4 = document.getElementById('box4');

    if (box1.checked) {
        goToUrl('http://box1url.com');
        //Redirect by box1
    }
    if (box2.checked) {
        goToUrl('http://box2url.com');
        //Redirect by box2
    }
    if (box3.checked) {
        goToUrl('http://box3url.com');
        //Redirect by box3
    }
    if (box4.checked) {
        goToUrl('http://box4url.com');
        //Redirect by box4
    }
}

function goToUrl(url) {
    var win = window.open(url, '_blank');
    win.focus();
}

EDIT2: Added 'multi-url'

var urls = []; //Initialize empty array
if (box1.checked) {
    urls.push('http://box1url.com'); // If box is checked, push the url
}

urls.forEach(function(url) {
    goToUrl(url); //Go to all URLs in a for-each loop
});

EDIT3: Added more 'dynamic' URLs by values

If setting the URL as a value for the checkbox, you can retrieve it in the JavaScript afterwards:

HTML:

<input type="checkbox" name="box1" value="http://box1url.com" id="box1"><label>box1</label><br/>

JavaScript (no jQuery):

if (box1.checked) {
        urls.push(box1.value);
        //Redirect by box1
}

JavaScript (jQuery):

if (box1.prop('checked')) {
        urls.push(box1.value);
        //Redirect by box1
}

EDIT4: Full code

<html>
    <head>
        <meta charset="UTF-8">
        <title></title> 
        <script type="text/javascript" src="no-j-boxes.js"></script>
    </head>
    <body>
        <input type="checkbox" name="box1" value="http://box1url.com" id="box1"><label>box1</label><br/>
        <input type="checkbox" name="box2" value="http://box2url.com" id="box2"><label>box2</label><br/>
        <input type="checkbox" name="box3" value="http://box3url.com" id="box3"><label>box3</label><br/>
        <input type="checkbox" name="box4" value="http://box4url.com" id="box4"><label>box4</label><br/>

        <input type="button" value="Submit" name="submitButton" onclick="submit()">
    </body>
</html>

JavaScript:

function submit() {
    var box1 = document.getElementById('box1');
    var box2 = document.getElementById('box2');
    var box3 = document.getElementById('box3');
    var box4 = document.getElementById('box4');

    var urls = [];

    if (box1.checked) {
        urls.push(box1.value);
    }
    if (box2.checked) {
        urls.push(box2.value);
    }
    if (box3.checked) {
        urls.push(box3.value);
    }
    if (box4.checked) {
        urls.push(box4.value);
    }

    urls.forEach(function(url) {
        goToUrl(url);
    });
}

function goToUrl(url) {
    var win = window.open(url, '_blank');
}

edited Mar 19, 2014 at 8:55

answered Mar 19, 2014 at 8:02

Pim Verlangen

3871 silver badge11 bronze badges

5 Comments

user3436467 Over a year ago

Pim, wow, thanks for such a comprehensive reply and option to use Jquery. I have not played with jquery much but I will try it out. I am very sorry that I completely forgot to mention that I would prefer not to have to enter each value in the javascript. If you can imagine 100+ checkboxes.. it would be a nightmare to have to keep updating the script.

Pim Verlangen Over a year ago

I have added a way to retrieve the URL from the checkbox' value. Let's say you have a PHP script looping through the data needed to create the checkboxes, just let the loop set the value to the specific URL. You can then retrieve it using JavaScript afterwards by using box1.value. Hope this helped you :)

user3436467 Over a year ago

Pim, sorry what should the complete code look like.. I think you may have written what I am looking for but i am having trouble putting it all together. Can I trouble you to post the full code 'no jquery version' Also, will this work with a submit button that I have? reading your code it seems the URL will open by just checking the box.

Pim Verlangen Over a year ago

Another edit, although I might just clean the post up a little bit :). A tip to use if you want this to be more dynamic: use classes. Give your checkboxes a class, so you can forloop through those classes using document.getElementsByClassName(className); You can then forloop through the returned array with your checkboxes.

Pim Verlangen Over a year ago

Glad to have helped you :)

Collectives™ on Stack Overflow

Javascript - Retrieve input value from a selected checkbox and do something with it

2 Answers 2

3 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related