CODEWITHSUNDEEP
javascripthtmlcheckbox
user3436467
user3436467

Reputation: 1775

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

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

Upvotes: 1

Views: 7536

Answers (2)

Akash Thakare
Akash Thakare

Reputation: 22972

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>

Upvotes: 1

Pim Verlangen
Pim Verlangen

Reputation: 387

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');
}

Upvotes: 1

Related Questions