attach HTML-Select to Inputs and store them values once user click Save button

Question

i am dealing with got the values using plain Javascript from a list of checkboxes with a select field related to each one.

I have this HTML ( with three checkboxes samples )

  <section class="options-list">
    <div>
      <input type="checkbox" class="cb" value="valueForCheckbox-01" id="cb-01" name="checkboxStatus"/>
      <label for="cb-01">Page Load Time</label>

      <select id="type-01" name="optionSelected">
        <option value="001">001</option>
        <option value="002">002</option>
        <option value="003">003</option>
        <option value="004">004</option>
      </select>
    </div>

    <div>
      <input type="checkbox" class="cb" value="valueForCheckbox-02" id="cb-02" name="checkboxStatus"/>
      <label for="cb-02">DB Query</label>

      <select id="type-02" name="optionSelected">
        <option value="001">001</option>
        <option value="002">002</option>
        <option value="003">003</option>
        <option value="004">004</option>
      </select>
    </div>

    <div>
      <input type="checkbox" class="cb" value="valueForCheckbox-03" id="cb-03" name="checkboxStatus"/>
      <label for="cb-03">Server Response Time</label>

      <select id="type-03" name="optionSelected">
        <option value="001">001</option>
        <option value="002">002</option>
        <option value="003">003</option>
        <option value="004">004</option>
      </select>
    </div>

    <input type="button" id="save-data" value="Save" onclick="userChoice('checkboxStatus', 'optionStatus')"/>
  </section>

And the following JS working to got the checked elements

var checkboxes = [];

function userChoice(checkboxName, options) {

  checkboxes = document.querySelectorAll('input[name="' + checkboxName + '"]:checked'), cbSelected = [];

  Array.prototype.forEach.call(checkboxes, function(el) {
    cbSelected.push(el.value);
    return cbSelected;
  });

  return cbSelected;
}

I'm not sure if that is the best way, but the piece remaining is get the options value and link to the checkbox.

And to end i'm not sure the best way to store these data, what do you suggest ? an array of arrays ?... [[checkboxSelected.value, option.value][checkboxSelected.value, option.value]]

...An array of object... [{state: "checked", option: value}{state: "checked", option: value}]

..or maybe another idea

Shilly · Accepted Answer · 2015-12-15 11:04:18Z

1

You can get the select by referencing from each checkbox. Something like cbSelected.parentNode.querySelector('select'). I'd personally use an array of objects to store the data, but an array of arrays is possible, or an object used as a map.

var model1 = [
    {
        'type' : 'checkbox',
        'id' : '01',
        'checked' : true
    },
    {
        'type' : 'select',
        'id' : '01',
        'value' : 002
    }
];

var model2 = {
    '01' : {
        'checkbox' : true,
        'option' : '002'
    },
    '02' : {
        'checkbox' : false,
        'option' : 'default'
    }
};

answered Dec 15, 2015 at 11:04

Shilly

8,5991 gold badge20 silver badges24 bronze badges

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

5 Comments

Héctor León Over a year ago

Thanks for your reply, this way just can have one HTML select sibling right ? Can i use getElementsByClassName or ById with the parentNode instead use querySelector ? Its just i don't know if i gonna need another <select> in the future, but in that case i just want to avoid all crash :D

Shilly Over a year ago

You can use any selector you want, but I've gotten into the habit of using querySelector and querySelectorAll for everything, instead of getElementByXXX, since the css selectors you can use in querySelector are just way more expressive. This allowed me to remove alot of ids and classes I used to need just for the sake of efficiently selecting a node.

Héctor León Over a year ago

but with querySelector(" ") we're targeting all the tags right? as in TagName, so its dangerous i think ( probably i'm wrong )

Shilly Over a year ago

querySelector gives you the first node that matches, querySelectorAll will give you a nodeList (array-like object) with all the matches. So querySelectorAll('.my-name') will fetch all the elements that have the class 'my-name', and hence is equivalent to getElementsByClassName('my-name') The difference is that getElementXXX gives a live htmlcollection and querySelector will accept complex css selectors like 'table.myClass td:first-child > span.otherClass' etc, so you can use the selectors you use in your css files. More info: developer.mozilla.org/nl/docs/Web/API/Document/querySelector

Héctor León Over a year ago

Awesome ! i didn't know i could use css pseudo selectors. Thanks you so much.

Collectives™ on Stack Overflow

attach HTML-Select to Inputs and store them values once user click Save button

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related