get array of checkboxes checked, and only if seletced in a specific order, then go to URL

user_14900647 0
Viewed 291

First time asking here. I tried a number of topics for this, and I currently use a code for checkboxes, but it's for gathering into a mailform and sending to me via php. I can't seem to find exactly what I need for the following scenario.

I am reworking some Flash puzzles to be all html and javascript (or jquery). One puzzle requires the player to enter a code (to open a safe). In Flash they clicked buttons with code symbols on them, so I thought, Checkboxes displayed as images could work...

  1. I have 9 checkboxes. Each has a value from 1 to 9. In the layout they are mixed up (they are not positioned on the page in sequential order) and I use images to represent the checkboxes.

  2. I want to find out if all the boxes are selected, and if they are selected in the exact order of 1-9.

  3. If the checkboxes are checked in the correct order according to their value (1,2,3,4,5,6,7,8,9) then on clicking the Submit button, the player is taken to the next webpage.

I can also do this with names or Ids, whatever works. Or php. I was hoping to keep it simple, because I am not savvy with the javvy. I probably know enough to be dangerous to myself and others :)

Thanks in advance for any help, or links to a topic that could point me in the right direction.

Here's my html code.

    <form name="checklist" method="post" action="My-Page.php">
      <label>
        <input type="checkbox" value="8">
        <img src="btn_8.png"></label>
      <label>
        <input type="checkbox" value="3">
        <img src="btn_3.png"></label>
      <label>
        <input type="checkbox" value="9">
        <img src="btn_9.png"></label>
      <label>
        <input type="checkbox" value="2">
        <img src="btn_2.png"></label>
      <label>
        <input type="checkbox" value="5">
        <img src="btn_5.png"></label>
      <label>
        <input type="checkbox" value="4">
        <img src="btn_4.png"></label>
      <label>
        <input type="checkbox" value="7">
        <img src="btn_7.png"></label>
      <label>
        <input type="checkbox" value="1">
        <img src="btn_1.png"></label>
      <label>
        <input type="checkbox" value="6">
        <img src="btn_6.png"></label>
      <input type="submit" value="Open">
    </form>

Here's the js I found that gets the values, but I don't know how to make it get the values in that specific order, and then go to a URL, or alert the user to an error.

var array = []
var checkboxes = document.querySelectorAll('input[type=checkbox]:checked')
for (var i = 0; i < checkboxes.length; i++) {
  array.push(checkboxes[i].value)
}

  • Update. I struggled with this, and finally asked a friend to help. What took me 8 days, he did in like 1 hour, from scratch.

  • I do appreciate those who took time to give me some hints, and this site is great for learning.

checkbox arrays html javascript
2 Answers

Here is one way to do it in JavaScript. You maintain a selected array that you either add to or remove items from as the checkboxes are clicked. Then, when the form is submitted, you do a couple checks: first you see if all boxes have been checked. Next, you see if all of the numbers in the selected array are in order.

const form = document.querySelector("#form");
let selected = [];
const numberOfCheckboxes = document.querySelectorAll("#form input").length;

form.addEventListener("click", function(e) {
  if (e.target.nodeName !== "INPUT") return;
  if (e.target.checked) {
    selected.push(parseInt(e.target.value));
  } else {
    selected = selected.filter(el => el != e.target.value);
  }
})

function check(e) {
  console.log(selected);
  if (selected.length !== numberOfCheckboxes) {
    e.preventDefault();
    alert("You didn't select all the boxes");
  }
  const inOrder = selected.every((el, i, arr) => i === 0 || el === arr[i-1] + 1);
  if (!inOrder) {
    e.preventDefault();
    alert("Wrong order!");
  }
}
<form id="form" onsubmit="return check(event)">
  <label>
    <input type="checkbox" value="1" /> 1
  </label>
  <label>
    <input type="checkbox" value="2" /> 2
  </label>
  <label>
    <input type="checkbox" value="3" /> 3
  </label>
  <button>submit</button>
</form>

user_65257240

As you didn't share code , I will not help you fix it. I can give you some hints and you can try to implement that.

  1. Call onClick function on each checkbox selection.

  2. Create an array and push the selected checkbox's values into it.

    // example: checkedArr = [1,2,3,4];

  3. maintain a final order of values with another array

    // expectedArr = [1,2,3,4];

  4. Deep compare those 2 arrays and depending on their result, proceed with your business logic. Comparing two array with their order

    var is_same_arr = (checkedArr.length == expectedArr.length) && checkedArr.every(function(element, index) {
      return element === expectedArr[index]; 
});
user_40749800
Related