I have a vf page that creates multiple records on an object.

The page has rows with text and date fields in for each record to be created.

I want to update a hidden inpuit field on each row but cannot figure out how to do this for multiple rows.

The page works well at the moment for inserting multiple records but only the first record gets the hidden field updated.

I'm using JS with [data-html-fields] to set the value of the hidden field. The insert, delete functions are handled by a controller extension.

I'm also getting Uncaught ReferenceError: updatehidden is not defined in the console which I think will be something to do with this issue.

Can anyone suggest the correct way to do this?

<script type="text/javascript">

function updateHidden() {
    var sellist = document.querySelectorAll("[data-sellist]"),
        inpfield = document.querySelectorAll("[data-inpfield]"),
        inpnew = document.querySelectorAll("[data-inpnew]");

    for (var i = 0; i < {!rowNum}; i++)
      inpnew[i].value = sellist[i].value + ' - ' + inpfield[i].value;

<apex:form >
    <apex:variable var="rowNum" value="{!0}"/>
    <apex:pageBlock >            
        <apex:sectionHeader subtitle="Add Event Delegates"/>
        <apex:variable var="rowNum" value="{!0}"/>
        <apex:pageBlockTable value="{!DelegateList}" var="del" style="width:100%">
            <apex:facet name="footer">
                <apex:commandLink value="Add" action="{!insertDelRow}"/>
            <apex:column headerValue="Name" style="width:10%">
                <apex:inputField style="width:98%" value="{!del.Name__c}" id="inpfield" required="true" html-data-inpfield="1" onKeyUp="updatehidden()"/>
            <apex:column headerValue="Phone" style="width:10%">
                <apex:inputField style="width:98%" value="{!del.Phone__c}" id="phone"/>
            <apex:column headerValue="Email" style="width:12%">
                <apex:inputField style="width:98%" value="{!del.Email_Address__c}" id="email" required="true"/>
            <apex:column headerValue="Job Role" style="width:10%">
                <apex:inputField style="width:98%" value="{!del.Job_Role__c}" id="jobrole"/>
            <apex:column headerValue="Company Name" style="width:12%">
                <apex:inputField style="width:85%" value="{!del.Company_Name__c}" id="companyname" required="true"/>
            <apex:column headerValue="Event Type" style="width:11%">
            <apex:actionRegion >
            <apex:selectList style="width:98%" value="{!selectedType}" multiselect="false" html-data-sellist="1" size="1" id="sellist" onchange="updateHidden()">
            <apex:selectOption itemValue="TechTalk" itemLabel="Tech-Talk"/>
            <apex:selectOption itemValue="Scotland Roadshow" itemLabel="Scotland Roadshow"/>
            <apex:selectOption itemValue="NICEIC/ELECSA Live" itemLabel="NICEIC/ELECSA Live"/>
            <apex:actionSupport event="onchange" reRender="venue"/>
            <apex:column headerValue="Venue" style="width:20%">
                <apex:selectList value="{!del.Venue__c}" style="width:98%" size="1" id="venue">
                    <apex:selectOptions value="{!venues}"/>
            <apex:column headerValue="Date" style="width:8%">
                <apex:inputField value="{!del.Event_Date__c}" style="width:98%" required="true"/>
            <apex:column headerValue="FOC?">
                <apex:inputcheckbox value="{!del.FOC__c}" id="foc"/>
            <apex:column headerValue="Delete" style="width:3%">
                <apex:commandLink style="font-size:15px; font-weight:bold; padding-left:30%; color:red;" value="X" action="{!delDelRow}" immediate="true">
                    <apex:param value="{!rowNum}" name="index"/>
                <apex:variable var="rowNum" value="{!rowNum+1}"/>
                <apex:inputHidden value="{!del.Name}" html-data-inpnew="1" id="inpnew"/>
        <apex:pageBlockButtons location="bottom">
            <apex:commandButton value="Save" action="{!insertDelegates}"/>
            <apex:commandButton value="Back" action="{!cancelDelegates}" immediate="true"/>

2 Answers 2


updatehidden and updateHidden are two different things in JavaScript. Pay attention to the case of variables and function names.

apex:variable is not officially supported inside an iterator, you should avoid using this syntax.

{!rowNum} won't be updated in your script. Instead, just use NodeList.length:

for(var i = 0; i < sellist.length; i++) {
  // ... 
  • Of course!!! I didnt even notice the case of the function. Doh! Thank you, works perfectly now.
    – Joe Hayes
    Commented Aug 22, 2019 at 12:38

Your {!rowNum} (in the JS function) on the VF page is rendered only once in the page load. It will always get 0 as the initial value.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .