CODEWITHSUNDEEP
javascript
Marco
Marco

Reputation: 1205

getting input id in js using getElementById or querySelectorAll in js

I have a form with different group of options for an item. User needs to select from each group of option a specific number of options. I organized my form by options type which I don't have control over how it was organized as it comes from db. The option type has an id. Option types are (minimum , maximum and exactly) so user would be required to choose minimum of options, maximum number of options or exactly the specific # of options.

Originally had the form options grouped by class="classname" and running the js function :

let exactlylimit = 0
function Validateexactly(limit) { 
  exactlylimit = limit
  var checks = document.querySelectorAll(".exactly");   
  for (var i = 0; i < checks.length; i++)
    checks[i].onclick = selectiveCheck;
  function selectiveCheck (event) {  
    var checkedChecks = document.querySelectorAll(".exactly:checked");
    if (checkedChecks.length >= exactlylimit + 1)
      return false;
  } 
}

With the form inputs

{#if option['rules'] == "exactly"}

{#each option.optiongroupitems as optionitem, index} 
<li style="list-style : none;">
 
<label>
    <input  type="checkbox" class="exactly" bind:group={values.exactly} value={[{"name" : optionitem.name},{ "price" : optionitem.price }, {"rule" : option.rules}, {"number" : option.rulesnumber.number}]} on:click={()=> Validateexactly(option.rulesnumber.number)} >
     {optionitem.name} : {optionitem.price}
</label>
</li>
{/each}

{/if}

And it was working fine. Then I discovered that some of the items have multiple groups of option types. So one item has minimum1 group options and minimum2 group options, so I decided to add the id of each option group type. So I organized my groups as this:

So I grouped option groups by the id:

{#if option['rules'] == "exactly"}
<p>Exactly id : {option._id}</p>
<fieldset name={option._id}>
 
  <legend><span style="color : red;">{option.groupheader}</span></legend>
{#each option.optiongroupitems as optionitem, index} 

<li style="list-style : none;">
<label>
    <input  type="checkbox" class={option._id} bind:group={values.exactly} on:click={()=> Validateexactly(option.rulesnumber.number, option._id)} >
     {optionitem.name} : {optionitem.price}
</label>
</li>

{/each}
</fieldset>

Basically changed the class from just a name to the id of the option group.

Now in my js - I'm using svelte - I have the function validateexactly :

function Validateexactly(limit, id) { 
  console.log(">>>", limit + "  options group id : "+ id )
  let getid = id 
  exactlylimit = limit
  var checks = document.getElementById('getid');  
  console.log("checks log :", checks) 
  for (var i = 0; i < checks.length; i++)
    checks[i].onclick = selectiveCheck;
  function selectiveCheck (event) {  
    var checkedChecks = document.getElementById(getid['checked']);
    if (checkedChecks.length >= exactlylimit + 1){
      return false;
    }
  }

As you can see in

var checkedChecks = document.getElementById(getid['checked']) 
or 
var checkedChecks = document.getElementById('getid : checked')

So my question is how to reference the id in getElementById or I could use the querySelectorAll but don't know how to reference the id in there either.
I tried template literals(template string) and I keep getting error that can't read property of "null" (reading "length") so checkedChecks is null which indicates that I'm not getting the checked inputs.

My question how to reference the id in my js getElementById or querySelectorAll I passed to my validateexactly :

function Validateexactly(limit, id)

I tried many ways but it looks like I need some education here as I keep error in the console log that checkedChecks is null and unable to get the length, rendering the whole code useless.

Upvotes: 0

Views: 63

Answers (1)

Jack_Hu
Jack_Hu

Reputation: 1379

To access the ID from querySelectorAll, you would just reference it the same way as in CSS, with the # symbol.

So, something like:

document.querySelectorAll(`#${getid}[type="checkbox"]:checked`);

Should get you all of the checkboxes in the DOM that match <input type="checkbox" id="<whatever-the-id-is>" checked>, that is to say:

  • All the checkboxes that have the given id (there should only really be one of those, as it's an id - so you may want to use document.querySelector() instead).
  • That are currently checked.

If I'm understanding you correctly?

Upvotes: 1

Related Questions