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

[Coleman_1211]

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.]

[jane-e]

Hi @Coleman_1211 

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

~ Jane

[Thom Parker]

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;
}

[elainer38412449]

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]

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

[elainer38412449]

Thank you and I went ahead and ran the code through the debug console and it came back with below:

ReferenceError: x is not defined

13:Console:Exec

undefined

[try67]

It's an error in the code. Replace x and y in the call to the addField method with xPos and yPos.

[elainer38412449]

You're referring to 'rctFld' (line 13) correct? I changed "x,y..." to "xPos,yPos..." and still getting the error.

I change it to "xPos, nYPos.." (on line 6 it has "var xPos, nYPos, rctFld ;") and again, same error.

[elainer38412449]

I changed the rest of the line to be xPos,yPos and now getting the 'NaN' error

[Bernd Alheit]

Assign a value to yPos.

[try67]

Add this line:

yPos=nYStart;

[elainer38412449]

Sorry, that didn't work.

[elainer38412449]

and I tried with how you wrote it and changed it to have the 'yPos=nYPos'

[Bernd Alheit]

Set yPos before the first for-loop. 

[elainer38412449]

It Worked! But it only creates 1 row, it won't create any other rows after that:

Below is the script:

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;
yPos=nYStart;
for (var nCol=1; nCol<=4; nCol++)
{
rctFld = [xPos,yPos,xPos+nFldWidth, yPos-nFldHeight];
var f = this.addField("Row" + nRow + ".Col" + nCol, "text", 0, rctFld );
xPos += nHorzGap + nFldWidth;
}
yPos -= nVertGap + nFldHeight;
}

[Bernd Alheit]

Your script creates all fields at the same y-position.

You have not set yPos before the first for-loop. 

[ClaireJohn220]

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]

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

[elainer38412449]

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?

[elainer38412449]

I was able to figure out to make the rows go vertically down and it linebreaks after 4 columns by adding a "-1" to the rowCounter (line 22):

rowCounter += -1;

Is there a way to limit the number of text fields/rows? I tried adding below, but it just makes the script stop working.

if(rowCounter >=5);

return ;

[ClaireJohn220]

It looks like there's a slight syntax issue in your attempted addition of a limit to the number of text fields/rows. The correct way to implement this would be to use an if statement without a semicolon after the condition. Here's the corrected portion:

if (rowCounter >= 5) {
    return;
}

Ensure that this statement is placed before the line where you increment rowCounter. This modification should help limit the number of text fields/rows to 5.

[ClaireJohn220]

Certainly! To prevent the fields from going overboard and to add a line break after creating four columns, you can modify the addRow() function. After each set of four text fields, adjust the coordinates variable to start a new line. Here's an updated version of the code:

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 w = 144;
    var h = 18;
    var wGap = 6;

    for (var j = 0; j < 2; j++) {  // Adjust the number of rows per line (here set to 2 for 4 columns)
        var coordinates = [10, 136 + (rowCounter * 24)]; // Adjust the vertical position for each new row
        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();

In this modification, the outer loop (for (var j = 0; j < 2; j++)) controls the number of rows per line. After creating each set of four text fields, it adjusts the coordinates to start a new line. Feel free to adjust the loop conditions to match your specific requirements.

[elainer38412449]

Hi Claire,

Thank you for adjusting, the original code you wrote worked beautifully though with the minor alteration of a '-1' rather than '1' on Ln 24, Col 24. I needed to place a cap on the number of rows it creates and no matter how I edit your script by adding the "if" condition, the script would either ignore it and create text fields infinitely or stop working all together. It just needs to randomly create 1 to 5 rows - possibly even delete a blank row if accidentally adding more than needed. Lol, I promise that's it 🙂