Skip to main content
Coleman_1211
Participant
December 21, 2021
Question

Have a button in adobe [Acrobat] that adds a row of columns, then adds another row below it.

  • December 21, 2021
  • 3 replies
  • 4939 views

I am trying to get a button on a fillable PDF Form that will keep adding new rows of 4 text fields below the ones it prevously made. 

 

My code for my first row is:

var myRows = new Array();

myRows[0] = "Row1.Column1";
myRows[1] = "Row1.Column2";
myRows[2] = "Row1.Column3";
myRows[3] = "Row1.Column4";
var coordinates= [10,136];
var w = 144;
var h = 18;
var wGap = 6;
var afields= [coordinates[0], coordinates[1], coordinates[0]+w, coordinates[1]-h];
this.addField(myRows[0], "text", 0, afields);
for (var i=1; i<myRows.length; i++)
{
    afields[0] += (w+wGap);
    afields[2] += (w+wGap);
    var f = this.addField(myRows[i], "text", 0, afields);
}

 

This code makes 4 text fields in a straight line across the page. I would like to click the same button a second time to add the same number of fields below them, and have it so the more you click on it, it just keeps adding a row of fields again and again. 

 

Is this possible, or should I approach this another way?

 

 

["Acrobat" added to title for clarity, as "Adobe" is a company. Post tagged with PDF Forms and JavaScript.]

 

 

This topic has been closed for replies.

3 replies

ClaireJohn220
Participating Frequently
November 21, 2023

 

Certainly, to achieve the desired functionality of adding a new row of text fields each time the button is clicked, you can modify your code as follows:

 

var myRows = new Array();
var rowCounter = 1;

function addRow() {
    myRows[rowCounter - 1] = "Row" + rowCounter + ".Column1";
    myRows[rowCounter] = "Row" + rowCounter + ".Column2";
    myRows[rowCounter + 1] = "Row" + rowCounter + ".Column3";
    myRows[rowCounter + 2] = "Row" + rowCounter + ".Column4";

    var coordinates = [10, 136 + (rowCounter * 24)]; // Adjust the vertical position for each new row
    var w = 144;
    var h = 18;
    var wGap = 6;
    var afields = [coordinates[0], coordinates[1], coordinates[0] + w, coordinates[1] - h];

    for (var i = 0; i < myRows.length; i++) {
        this.addField(myRows[i], "text", 0, afields);
        afields[0] += (w + wGap);
        afields[2] += (w + wGap);
    }

    rowCounter += 1;
}

// Call this function when the button is clicked
addRow();

 

This modification introduces a function addRow() that updates the myRows array and dynamically adjusts the vertical position for each new row. The rowCounter variable keeps track of the current row number. When the button is clicked, call the addRow() function to add a new row of text fields.

elainer38412449
Participating Frequently
November 21, 2023

In the console it shows as 'undefined', but is that because he 'addRow();' isn't used?

 

 

elainer38412449
Participating Frequently
November 21, 2023

Whoa, this is awesome...so I tried your code and it worked! But is there a way so the fields don't go overboard and add a linebreak when it creates 4 columns?

 

 

Thom Parker
Community Expert
Community Expert
December 21, 2021

Yes, you can do this by restructuring the code to make the field names and the positioning programmable. 

 

For example, the loop needs to be setup to count rows and columns, then the field names will be built dynamically based on the row/column. Same for the field rectangle.

 

This code is untested. I just wrote it as an example of how it can be done. You'll need to do debug.

 

var nXStart = 10, nYStart = 136;
var nFldWidth = 144;
var nFldHeight = 18;
var nHorzGap = 6;
var nVertGap = 6;
var xPos, nYPos,rctFld ;
var nMaxRows = 4;
for(var nRow=1;nRow<=nMaxRows;nRow++)
{
     xPos=nXStart;
     for (var nCol=1; nCol<=4; nCol++)
     {
          rctFld = [x,y,x+nFldWidth, y-nFldHeight];
          var f = this.addField("Row" + nRow + ".Col" + nCol, "text", 0, rctFld );
          xPos += nHorzGap + nFldWidth;
     }
     yPos -= nVertGap + nFldHeight;
}

  

Thom Parker - Software Developer at PDFScriptingUse the Acrobat JavaScript Reference early and often
elainer38412449
Participating Frequently
November 20, 2023

Hello,

I'm not very fluent in javascript, so please excuse me on not being able to make this work. This is exactly what I need on a PDF form, but for some reason the code I placed in the button 'action' isn't working and I'm not sure how to debug.  Can I please get a bit more detail on how to make this work?

 

Thanks!

Thom Parker
Community Expert
Community Expert
November 20, 2023

You can start the debug process with the Console Window:

Here's a video tutoial on it:

https://www.pdfscripting.com/public/images/video/AcroJSIntro/AcroJSIntro_ConsoleWindow.cfm

 

Thom Parker - Software Developer at PDFScriptingUse the Acrobat JavaScript Reference early and often
jane-e
Community Expert
Community Expert
December 21, 2021

Hi @Coleman_1211 

Since your question is about Adobe Acrobat, I have moved this from the "Using the Community" forum where you posted.

~ Jane