Javascript Checkbox Array with multiple selection results

Question

I have a javascript array code my co-worker built. I've fixed it up so depending on the checkbox you select it will go to a designated page (zero.html. zeroone.html etc). What I want to accomplish now is to make it so when you select multiple checkboxes, it will go to another page based on the checkboxes selected.

Here is our code:

<script language="javascript">
<!-- Activate Cloaking Device -->

// Set in dataBase() function - used as array index.
var recnum="";
// Used to initialize arrays.
function initArray()
    {
this.length = initArray.arguments.length;
for (var i = 0; i < this.length; i++)
    { this[i] = initArray.arguments[i]; }
}
// Creating the arrays
var rcrd = new initArray();
var address = new initArray();
address[0] = "zero.html";
address[1] = "one.html";
address[2] = "two.html";
address[0,1] = "zeroone.html";
address[0,2] = "zerotwo.html";
address[1,2] = "onetwo.html";
address[0,1,2] = "zeroonetwo.html";

// Called by onClick for each checkbox button - determines & displays url in full window
function dataBase(leapto)
{
for (var i = 0; i < 4; i++)
    {
    if (leapto.buttons[i].checked)
        { recnum = leapto.buttons[i].value; }
    }
if ( (rcrd[recnum] !=null) && (rcrd[recnum] != "") )
    { document.leapto.display.value = rcrd[recnum]+"\r\n\r\n"+address[recnum]; }
}
// Called by Search Now button - Loads preselected page.

function leapTo()
{
if ( (address[recnum] !=null) && (address[recnum] != "") && (recnum != "") )
window.location= address[recnum];
else 
    alert("\nYou must make a selection first.");
}
// Deactivate Cloaking
</script>
</head>
<body>
<form name="leapto">
<input type="checkbox" name="buttons" value="0" onclick="dataBase(this.form)" /> Zero<br />
<input type="checkbox" name="buttons" value="1" onclick="dataBase(this.form)" /> One<br />
<input type="checkbox" name="buttons" value="2" onclick="dataBase(this.form)" /> Two<br />
<input type="button" class="classname" width="400" height="50" border="0" value="Search Now" onclick="leapTo()" /></form>
<script>
function myFunction(){var x;if (name!=null)  {document.getElementById("demo").innerHTML=x;}}
</script>
</body>

BTW, we haven't needed  script cloaking since about 1997.

Senad Meškin · Answer 1 · 2013-02-01 21:05:45Z

I'm thinking how to make it more simple.

HTML

<div id="our-checkboxes">
     <input type="checkbox" value="zero"/>
     <input type="checkbox" value="one"/>
     <input type="checkbox" value="two"/>
     <input type="button" value="Click me to go to page" id="btn-to-click" />
</div>

ok so that is HTML, now I would write Javascript using jQuery library

JavaScript

$(document).ready(function(){
    $('#btn-to-click').click(function(){
       var _page = "";
       if($('#our-checkboxes input[type="checkbox"]:checked').length == 0)
       {
           alert('you need to select at least one!');
           return false;
       }
       $('#our-checkboxes input[type="checkbox"]:checked').each(function(){
          _page += $(this).val();
       });
       _page += ".html";
       alert('this is your page');
    });
});

I hope this helps.

Thanks Senad. Unfortunately my javascript knowledge is very low on the totem pole. Could you elaborate more? Thanks for your reply

Moisés Márquez · Answer 2 · 2013-02-01 21:24:26Z

I think that you can write it in this way, using JQuery:

var address = [["1","one.html"],["2","two.html"],["1-2","otherpage.php"]];

var toRespondToEventAfterTheSelection = function(){
  var selection = '';
  $("#parentOfInputs input:checked").each(function(i,e){
    if (selection != '') selection += "-";
    selection += $(e).val();
  });
  if (selection != ''){
    var page = '';
    for (dir in address) {
      if (address[dir][0] == selection){
        page = address[dir][1];
        break;
      }
    }
    if (page != '') document.location = page;
  }
});

Another alternative solution is, after getting the string with the selection, you can create a file in the server that respond to this string sending the user to the corresponding page of showing an error.

Thanks Moises, unfortunately we don't have access to the server and PHP isn't enabled (why we're not sure).
In that case, this Javascript can be a solution. You can adapt easily the values, and the number, of the checkboxes without changing the counters.

mark1178 · Accepted Answer · 2013-02-06 22:40:41Z

up vote 0 down vote accepted

Thanks everyone for the help, after going through the items here I got a friend who knows jquery pretty well and got it working with the ideas from both of you guys.

Here is my code: http://cdpn.io/zLuDC

answered Feb 6 at 22:40

mark1178
113

Here's my code in jsfiddle jsfiddle.net/mark1178/D4HxK – mark1178 Feb 6 at 22:50

asked	2 months ago
viewed	460 times
active	2 months ago

Javascript Checkbox Array with multiple selection results

3 Answers

Your Answer

Not the answer you're looking for? Browse other questions tagged javascript arrays select checkboxes or ask your own question.

Javascript Checkbox Array with multiple selection results

3 Answers

Your Answer

Sign up or log in

Post as a guest

Not the answer you're looking for? Browse other questions tagged javascript arrays select checkboxes or ask your own question.

Related