0

I have a form that has multiple select boxes and inputs with a array like name. So I have multiple select boxes with a name personroom[]. I would like to get these using this

 var personroom=document.querySelectorAll("input[name='personsroom[]']");

            alert(personroom.length)

it gives me null ("0"). But with the same way I can select all input (text) fields. Strange. Can anyone help me?

Azer Qurbanov
  • 17
  • 6
  • Please show the HTML. If you are trying to get "select boxes", then why are you using `input` in your call to `querySelectorAll`? –  Jan 24 '17 at 15:50
  • Duplicate of http://stackoverflow.com/questions/13987979/how-to-properly-escape-attribute-values-in-css-js-attribute-selector-attr-value –  Jan 25 '17 at 11:22

2 Answers2

2

The issue seemed to have been related to the exact target of the selector. the original selector "input[name='personsroom[]']" didn't work but according to OP comments dropping the input worked "[name='personsroom[]']"

A note on escaping [] characters. In this specific case, that was not the issue as the query string used inline single quotes ► "[name='personsroom[]']"

Using this "input[name=personsroom[]]" , with no single quotes, you need to escape the [] like this "input[name=personsroom\\[\\]]"

// The below will fail with "Uncaught SyntaxError..." during execution
//var personroom = document.querySelectorAll("[name=personsroom[]]");

//The below works as we are escaping the special characters
var personroom = document.querySelectorAll("[name=personsroom\\[\\]]");
console.log("1.) personroom.length", personroom.length);

//Also, when using inline quotes, you do not need to escape any characters
var personroom = document.querySelectorAll("[name='personsroom[]']");
console.log("2.) personroom.length", personroom.length);
<input type='textbox' name='personsroom[]' />
<input type='textbox' name='personsroom[]' />
<input type='textbox' name='personsroom[]' />
<input type='textbox' name='personsroom[]' />
Nope
  • 22,147
  • 7
  • 47
  • 72
  • I did it. no results – Azer Qurbanov Jan 24 '17 at 15:36
  • @AzerQurbanov Just updated it with code example. If you have different markup can you add it to your question please, maybe it has to do with that? – Nope Jan 24 '17 at 15:38
  • 1
    @AzerQurbanov With select tags it works just the same. Just replace `input` with `select` or only `document.querySelectorAll("[name='selectpersonsroom\[\]']")` without the tag if needed. – Nope Jan 24 '17 at 15:48
  • Can you point to a reference explaining why the backslashes are necessary in this case? I've run your snippet without the backslashes and it works exactly the same way. –  Jan 24 '17 at 15:52
  • i did it like this document.querySelectorAll("[name='personsroom\[\]']"); – Azer Qurbanov Jan 24 '17 at 15:56
  • @torazaburo I removed the explanation as I don't know what the correct explanation is. You seem to know the correct explanation though and as I'm in no position to confirm that information please feel free to add it yourself. I have no issue if you would like to do that. Thank you. – Nope Jan 25 '17 at 10:20
  • This might help: http://stackoverflow.com/questions/41083216/css-attribute-selector-for-css-height-style/41136181#41136181 –  Jan 25 '17 at 11:20
0

If you are using select boxes, then you are using <select></select>, correct? Change input to select in your query:

var personroom=document.querySelectorAll("select[name='personsroom[]']");

        alert(personroom.length)
Matt Spinks
  • 6,380
  • 3
  • 28
  • 47