javascript code trouble with dialog box Adobe Acrobat

[Turan_Elkhan]

I have a PDF form with a text field named "Documents" and a button named "Button". When the button is clicked, a JavaScript window appears to select some values, click OK, the selected values should be returned to the text field named "Documents". This code works, but it does not return the selected values (Your ID Card,  Your Name) to the text field. Can someone please help me? I am an amateur 😞

var FormRouting =
{
    result:"cancel",
    DoDialog: function(){return app.execDialog(this);},
    bChk1:false,
    bChk2:false,
    initialize: function(dialog)
    {
        var dlgInit = 
        {
            "Chk1": this.bChk1,
            "Chk2": this.bChk2
        };
        dialog.load(dlgInit);
    },
commit: function(dialog)
{
    var thisForm = this.getField(this.name); // Add this line
    var oRslt = dialog.store();
    this.bChk1 = oRslt["Chk1"];
    this.bChk2 = oRslt["Chk2"];

    // Create a list of selected checkboxes
    var selectedValues = [];
    if (this.bChk1) selectedValues.push("Your ID Card");
    if (this.bChk2) selectedValues.push("Your Name");

    // Set the value of the "Documents" text field to the selected values
    var field = thisForm.getField("Documents"); // Modify this line
    if (field) {
        field.value = selectedValues.join(", ");
    }
},

    description:
    {
        name: "Select",
        elements:
        [
            {
                type: "view",
                elements:
                [
                    {
                        type: "view",
                        char_height: 10,
                        elements:
                        [
                            {
                                type: "static_text",
                                item_id: "stat",
                                name: "Select",
                                char_width: 15,
                                alignment: "align_fill",
                                font: "dialog",
                            },
                            {
                                type: "view",
                                char_width: 8,
                                char_height: 8,
                                align_children: "align_top",
                                elements:
                                [
                                    {
                                        type: "view",
                                        char_width: 8,
                                        char_height: 8,
                                        elements:
                                        [
                                            {
                                                type: "check_box",
                                                item_id: "Chk1",
                                                name: "Your ID Card",
                                            },
                                            {
                                                type: "check_box",
                                                item_id: "Chk2",
                                                name: "Your Name",
                                            },
                                        ]
                                    },
                                ]
                            },
                            {
                                type: "ok_cancel",
                            },
                        ]
                    }
                ]
            }
        ]
    }
};

FormRouting.bChk1 = false;
FormRouting.bChk2 = false;
if("ok" == FormRouting.DoDialog())
{
    console.println("Chk1:" + FormRouting.bChk1);
    console.println("Chk2:" + FormRouting.bChk2);
}

[Turan_Elkhan · Accepted solution]

Well, I finally got it to work. However, it does not return selected values when the checkboxes are more than 9 items.

Furthermore, on website you have this link 👍 with example buttons, which the last button helped me. 🤗

Now it looks ok

var dlg = {
	Chk1: false,
	Chk2: false,
	Chk3: false,
	Chk4: false,
	Chk5: false,
	Chk6: false,
	commit: function (dialog) {
		var results = dialog.store();
		this.Chk1 = results["Chk1"];
		this.Chk2 = results["Chk2"];
		this.Chk3 = results["Chk3"];
		this.Chk4 = results["Chk4"];
		this.Chk5 = results["Chk5"];
		this.Chk6 = results["Chk6"];
	},
	description: {
		name: "Select",
		elements: [
			{
				type: "view",
				elements: [
					{
						type: "view",
						char_height: 10,
						elements: [
							{
								type: "static_text",
								item_id: "stat",
								name: "Select",
								char_width: 15,
								alignment: "align_center",
								font: "dialog",
							},
							{
								type: "view",
								char_width: 8,
								char_height: 8,
								align_children: "align_top",
								elements: [
									{
										type: "cluster",
										name: "Identity",
										elements: [
											{
												type: "check_box",
												item_id: "Chk1",
												name: "Your Name",
											},
											{
												type: "check_box",
												item_id: "Chk2",
												name: "Your Surname",
											},
											{
												type: "check_box",
												item_id: "Chk3",
												name: "Your Nickname",
											},
										],
									},
									{
										type: "cluster",
										name: "Origin",
										elements: [
											{
												type: "check_box",
												item_id: "Chk4",
												name: "Your Country",
											},
											{
												type: "check_box",
												item_id: "Chk5",
												name: "Your City",
											},
											{
												type: "check_box",
												item_id: "Chk6",
												name: "Your Village",
											},
										],
									},
								],
							},
							{
								type: "ok_cancel",
							},
						],
					},
				],
			},
		],
	},
};

if (app.execDialog(dlg) === "ok") {
	var checkedValues = [];
	if (dlg.Chk1) {
		checkedValues.push("Your Name");
	}
	if (dlg.Chk2) {
		checkedValues.push("Your Surname");
	}
	if (dlg.Chk3) {
		checkedValues.push("Your Nickname");
	}
	if (dlg.Chk4) {
		checkedValues.push("Your Country");
	}
	if (dlg.Chk5) {
		checkedValues.push("Your City");
	}
	if (dlg.Chk6) {
		checkedValues.push("Your Village");
	}
	if (checkedValues.length > 0) {
		this.getField("Text1").richtext = true;
		this.getField("Text1").value = checkedValues.join("\r\n");
	} else {
		this.getField("Text1").value = "You have not made a selection!";
	}
}

[Thom Parker · Accepted solution]

That's how it's supposed to be done!! 🙂

However, there is not problem with having more then 9 checkboxes. Your mistake is that only 4 characters are allowed for the item_id of a dialog element. It's in the Acrobat JavaScript reference material for the dialog object. 

[Thom Parker]

Looks like you must have an old copy of the AcroDialogs plug-in. 

Nice modification of the dialog object code, but there is one major issue with it. In the commit function, the "thisForm" variable does not exist. This error would have been reported in the Console Window. What kind of debug have you done?

An easy fix is to define this variable before displaying the dialog. 

The real fix is move the added portion of the commit function code outside the dialog object, and into the "if" where the dialog is displayed. 

[Turan_Elkhan]

Thank you for your effort and the time you took to respond to my post. Unfortunately I am not able to fix it ☹️, since I am not a programmer, I can not also to fix it also using Google, search in the forums etc. Actually, I am willing to make a small donation with PayPal if someone would correct this code for me. Next step would be categories and subcategories. The selected Checkbox values should be returned or printed into the text field "Documents".

For Example:

1. under Personality "Your Name", "Your Country"

2. under Hobbies "Sport", "Cinema"

3. and so on...

I'm doing it for my friend, since I promised him I would create this form, even though I'm not able to. He actually has all these items in a list box that can be selected on each line. But I wanted to do it with a dialog box since I downloaded your sample file here https://acrobatusers.com/tutorials/popup_windows_part5/ 

I have also modified my code a little bit as below and I got errors:

TypeError: dialog.getField is not a functionMakeChoices.commit@Field:Mouse Up:13
MakeChoices.DoDialog@Field:Mouse Up:30
@Field:Mouse Up:81
TypeError: dialog.getField is not a function
13:Field:Mouse Up

var MakeChoices = {
  result: "cancel",
  bChk1: false,
  bChk2: false,
  initialize: function(dialog) {
    var dlgInit = {
      "Chk1": this.bChk1,
      "Chk2": this.bChk2
    };
    dialog.load(dlgInit);
  },
  commit: function(dialog) {
    var thisForm = dialog.getField(this.name);
    var oRslt = dialog.store();
    this.bChk1 = oRslt["Chk1"];
    this.bChk2 = oRslt["Chk2"];

    // Create a list of selected checkboxes
    var selectedValues = [];
    if (this.bChk1) selectedValues.push("Your ID Card");
    if (this.bChk2) selectedValues.push("Your Name");

    // Set the value of the "Documents" text field to the selected values
    var field = thisForm.getField("Documents");
    if (field) {
      field.value = selectedValues.join(", ");
    }
  },
  DoDialog: function() {
    return app.execDialog(this);
  },
  description: {
    name: "Select",
    elements: [{
      type: "view",
      elements: [{
        type: "view",
        char_height: 10,
        elements: [{
            type: "static_text",
            item_id: "stat",
            name: "Select",
            char_width: 15,
            alignment: "align_fill",
            font: "dialog",
          },
          {
            type: "view",
            char_width: 8,
            char_height: 8,
            align_children: "align_top",
            elements: [{
                type: "view",
                char_width: 8,
                char_height: 8,
                elements: [{
                    type: "check_box",
                    item_id: "Chk1",
                    name: "Your ID Card",
                  },
                  {
                    type: "check_box",
                    item_id: "Chk2",
                    name: "Your Name",
                  },
                ]
              },
            ]
          },
          {
            type: "ok_cancel",
          },
        ]
      }]
    }]
  }
};

MakeChoices.bChk1 = false;
MakeChoices.bChk2 = false;
if ("ok" == MakeChoices.DoDialog()) {
  // Access the value of the "Documents" text field
  var documentsField = this.getField("Documents");
  if (documentsField) {
    documentsField.value = MakeChoices.description.elements[0].elements[1].elements[0].elements[0].name +
      ": " + (MakeChoices.bChk1 ? "Checked" : "Unchecked") + "\n" +
      MakeChoices.description.elements[0].elements[1].elements[0].elements[1].name +
      ": " + (MakeChoices.bChk2 ? "Checked" : "Unchecked");
  }
}

[try67]

You need to either pass a reference to the Document object to the dialog (or use the parent property), or save the values from the Dialog to variables with a larger scope, and then apply them to the fields outside the Dialog object itself.

[Turan_Elkhan]

Thank you too for your effort and the time you took to respond to my post. II tried but without success 😞

var FormSelect = {
  result: "cancel",
  doDialog: function() {
    return app.execDialog(this);
  },
  bChk1: false,
  bChk2: false,
  bChk3: false,
  initialize: function(dialog) {
    dialog.load({
      Chk1: this.bChk1,
      Chk2: this.bChk2,
      Chk3: this.bChk3,
    });
  },
  commit: function(dialog) {
    var oRslt = dialog.store();
    this.bChk1 = oRslt.Chk1;
    this.bChk2 = oRslt.Chk2;
    this.bChk3 = oRslt.Chk3;
  },
};

var description = {
  name: "Your Hobbies!",
  elements: [
    {
      type: "view",
      elements: [
        {
          type: "view",
          char_height: 10,
          elements: [
            {
              type: "static_text",
              item_id: "stat",
              name: "Your Hobbies!",
              char_width: 15,
              alignment: "align_fill",
              font: "dialog",
            },
            {
              type: "view",
              char_width: 8,
              char_height: 8,
              align_children: "align_top",
              elements: [
                {
                  type: "view",
                  char_width: 8,
                  char_height: 8,
                  elements: [
                    {
                      type: "check_box",
                      item_id: "Chk1",
                      name: "☒ Sport",
                    },
                    {
                      type: "check_box",
                      item_id: "Chk2",
                      name: "☒ Cinema",
                    },
                    {
                      type: "check_box",
                      item_id: "Chk3",
                      name: "☒ Swimming",
                    },
                  ],
                },
              ],
            },
            {
              type: "ok_cancel",
            },
          ],
        },
      ],
    },
  ],
};

// Variables to store the dialog values with larger scope
var dialogResult = null;
var dialogChk1 = false;
var dialogChk2 = false;
var dialogChk3 = false;

FormSelect.bChk1 = false;
FormSelect.bChk2 = false;
FormSelect.bChk3 = false;

// Update the commit function to save the dialog values to variables
FormSelect.commit = function(dialog) {
  var oRslt = dialog.store();
  dialogChk1 = oRslt.Chk1;
  dialogChk2 = oRslt.Chk2;
  dialogChk3 = oRslt.Chk3;
};

if ("ok" == FormSelect.doDialog()) {
  // Save the dialog result
  dialogResult = "ok";

  // Apply the dialog values to fields outside the dialog
  FormSelect.bChk1 = dialogChk1;
  FormSelect.bChk2 = dialogChk2;
  FormSelect.bChk3 = dialogChk3;

  // Code to execute if the dialog result is "ok"
}

[Thom Parker]

There's no checkbox example in the "Popup Window Part 5" tutorial. And the modification in the original code posted is kinda sophisticated for someone who doesn't know anything about JavaScript.  

However, that example PDF does have a great sample showing how to move data from the dialog, and into a form field. None of your modifications come even close to the pattern shown in that example. I'd strongly suggest you study it. 

[Turan_Elkhan · Accepted solution]

Well, I finally got it to work. However, it does not return selected values when the checkboxes are more than 9 items.

Furthermore, on website you have this link 👍 with example buttons, which the last button helped me. 🤗

Now it looks ok

var dlg = {
	Chk1: false,
	Chk2: false,
	Chk3: false,
	Chk4: false,
	Chk5: false,
	Chk6: false,
	commit: function (dialog) {
		var results = dialog.store();
		this.Chk1 = results["Chk1"];
		this.Chk2 = results["Chk2"];
		this.Chk3 = results["Chk3"];
		this.Chk4 = results["Chk4"];
		this.Chk5 = results["Chk5"];
		this.Chk6 = results["Chk6"];
	},
	description: {
		name: "Select",
		elements: [
			{
				type: "view",
				elements: [
					{
						type: "view",
						char_height: 10,
						elements: [
							{
								type: "static_text",
								item_id: "stat",
								name: "Select",
								char_width: 15,
								alignment: "align_center",
								font: "dialog",
							},
							{
								type: "view",
								char_width: 8,
								char_height: 8,
								align_children: "align_top",
								elements: [
									{
										type: "cluster",
										name: "Identity",
										elements: [
											{
												type: "check_box",
												item_id: "Chk1",
												name: "Your Name",
											},
											{
												type: "check_box",
												item_id: "Chk2",
												name: "Your Surname",
											},
											{
												type: "check_box",
												item_id: "Chk3",
												name: "Your Nickname",
											},
										],
									},
									{
										type: "cluster",
										name: "Origin",
										elements: [
											{
												type: "check_box",
												item_id: "Chk4",
												name: "Your Country",
											},
											{
												type: "check_box",
												item_id: "Chk5",
												name: "Your City",
											},
											{
												type: "check_box",
												item_id: "Chk6",
												name: "Your Village",
											},
										],
									},
								],
							},
							{
								type: "ok_cancel",
							},
						],
					},
				],
			},
		],
	},
};

if (app.execDialog(dlg) === "ok") {
	var checkedValues = [];
	if (dlg.Chk1) {
		checkedValues.push("Your Name");
	}
	if (dlg.Chk2) {
		checkedValues.push("Your Surname");
	}
	if (dlg.Chk3) {
		checkedValues.push("Your Nickname");
	}
	if (dlg.Chk4) {
		checkedValues.push("Your Country");
	}
	if (dlg.Chk5) {
		checkedValues.push("Your City");
	}
	if (dlg.Chk6) {
		checkedValues.push("Your Village");
	}
	if (checkedValues.length > 0) {
		this.getField("Text1").richtext = true;
		this.getField("Text1").value = checkedValues.join("\r\n");
	} else {
		this.getField("Text1").value = "You have not made a selection!";
	}
}

[Thom Parker · Accepted solution]

That's how it's supposed to be done!! 🙂

However, there is not problem with having more then 9 checkboxes. Your mistake is that only 4 characters are allowed for the item_id of a dialog element. It's in the Acrobat JavaScript reference material for the dialog object. 

[Turan_Elkhan]

Following your recommendation, I downloaded the JavaScript for Acrobat® API Reference guide and achieved what I wanted. After setting the item_id 4 character, everything worked like a charm. Thank you very much for your advice. Give me, please 🙏 one last advice or example. How can I change font type, color, size of every checkbox and category elements in dialog window? I have tried but no success.

[Thom Parker · Accepted solution]

The custom JavaScript dialogs have a limited set of options. The fonts are the fonts that are setup on the OS for dialogs. There are some general variations, such as "dialog" and "palette", which are listed in the reference, and there are others such as "heading" and "title" that are undocumented.  But that's as specific as it gets and there are no color variations, except, for an undocumented function that sets text to red. 

All items on the dialog have height and width properties. But some things are fixed, such as checkboxes. 

So not much to work with.