javascript only working on first row of pageBlockTable

Question

I have a vf table allowing people to add multiple records, it is basically a booking for to book people onto an event.

I have some js that populates the record.Name field using two of the other fields.

<apex:selectList value="{!selectedType}" multiselect="false" html-data-sellist="1" size="1" id="sellist">
<apex:inputField value="{!del.Name__c}" id="inpfield" required="true" html-data-inpfield="1" onchange="updatehidden()"/>

<apex:inputHidden value="{!del.Name}" html-data-inpnew="1" id="inpnew"/>

<script>
function updatehidden() {
    var sellist = document.querySelector("[data-sellist]").value,
        inpfield = document.querySelector("[data-inpfield]").value,
        inpnew = document.querySelector("[data-inpnew]");
    inpnew.value = sellist + ' - ' + inpfield
}
</script>

The js only seems to run on the first row of the table, not sure why.

I have a command link button at the bottom of the page that will List.add(new delegate__c()) which then adds a blank row to the table. However I'd have thought that the onchange() would also be invoked on the second, third row etc.

When multiple rows are added it saves fine but creates the record with the id as the record.name.

Does anyone have any idea why?

Thanks

Answer 1

Although this question is not related to Salesforce but here you go.

As per QuerySelector docs

The querySelector() method returns the first element that matches a specified CSS selector(s) in the document.

Note: The querySelector() method only returns the first element that matches the specified selectors. To return all the matches, use the querySelectorAll() method instead.

So what you need here is querySelectorAll(). Also make sure you are passing correct data as parameter.

For your second question creates the record with the id as the record.name when we perform DML using APEX and don't provide value in Name field SF by default Populate ID in that. Once you solve the above error this thing will also solve.

Answer 2

Ended up with this which works a treat,

<script>
function updatehidden() {
    var sellist = document.querySelectorAll("[data-sellist]"),
        inpfield = document.querySelectorAll("[data-inpfield]"),
        inpnew = document.querySelectorAll("[data-inpnew]");
    for (var i = 0; i < inpfield.length; i++)
      {
      inpnew[i].value = sellist[i].value + ' - ' + inpfield[i].value;
          console.log(sellist[i].value + ' - ' + inpfield[i].value);
      }
  }
</script>

Thank you Tushar Sharma