Add support for textFields with the same fieldName, i.e., TextFieldGroups

Author: imjosh

examples/js/acroforms.js

@@ -8,72 +8,145 @@ var {
   TextField,
   PasswordField,
   RadioButton,
-  Appearance
+  Appearance,
+  TextFieldGroup
 } = jsPDF.AcroForm;
 
 doc.setFontSize(12);
-doc.text("ComboBox:", 10, 105);
-
-var comboBox = new ComboBox();
-comboBox.fieldName = "ChoiceField1";
-comboBox.topIndex = 1;
-comboBox.Rect = [50, 100, 30, 10];
-comboBox.setOptions(["a", "b", "c"]);
-comboBox.value = "b";
-comboBox.defaultValue = "b";
-doc.addField(comboBox);
-
-doc.text("ListBox:", 10, 115);
-var listbox = new ListBox();
-listbox.edit = false;
-listbox.fieldName = "ChoiceField2";
-listbox.topIndex = 2;
-listbox.Rect = [50, 110, 30, 10];
-listbox.setOptions(["c", "a", "d", "f", "b", "s"]);
-listbox.value = "s";
-doc.addField(listbox);
-
-doc.text("CheckBox:", 10, 125);
-var checkBox = new CheckBox();
-checkBox.fieldName = "CheckBox1";
-checkBox.Rect = [50, 120, 30, 10];
-doc.addField(checkBox);
-
-doc.text("PushButton:", 10, 135);
-var pushButton = new PushButton();
-pushButton.fieldName = "PushButton1";
-pushButton.Rect = [50, 130, 30, 10];
-doc.addField(pushButton);
-
-doc.text("TextField:", 10, 145);
-var textField = new TextField();
-textField.Rect = [50, 140, 30, 10];
-textField.multiline = true;
-textField.value =
-  "The quick brown fox ate the lazy mouse The quick brown fox ate the lazy mouse The quick brown fox ate the lazy mouse"; //
-textField.fieldName = "TestTextBox";
-doc.addField(textField);
-
-doc.text("Password:", 10, 155);
-var passwordField = new PasswordField();
-passwordField.Rect = [50, 150, 30, 10];
-doc.addField(passwordField);
-
-doc.text("RadioGroup:", 50, 165);
-var radioGroup = new RadioButton();
-radioGroup.value = "Test";
-radioGroup.Subtype = "Form";
-
-doc.addField(radioGroup);
-
-var radioButton1 = radioGroup.createOption("Test");
-radioButton1.Rect = [50, 170, 30, 10];
-radioButton1.AS = "/Test";
-
-var radioButton2 = radioGroup.createOption("Test2");
-radioButton2.Rect = [50, 180, 30, 10];
-
-var radioButton3 = radioGroup.createOption("Test3");
-radioButton3.Rect = [50, 190, 20, 10];
-
-radioGroup.setAppearance(Appearance.RadioButton.Cross);
+var margin = 12;
+let yPos = 20;
+
+addComboBox();
+addListBox();
+addCheckBox();
+addPushButton();
+addTextField();
+addPasswordField();
+addRadioGroups();
+addTextFieldGroup();
+
+function addComboBox() {
+  doc.text("ComboBox:", 10, yPos);
+  var comboBox = new ComboBox();
+  comboBox.fieldName = "ComboBox1";
+  comboBox.topIndex = 1;
+  comboBox.Rect = [50, yPos - 5, 30, 10];
+  comboBox.setOptions(["a", "b", "c"]);
+  comboBox.value = "b";
+  comboBox.defaultValue = "b";
+  doc.addField(comboBox);
+  yPos += margin;
+}
+
+function addListBox() {
+  doc.text("ListBox:", 10, yPos);
+  var listbox = new ListBox();
+  listbox.edit = false;
+  listbox.fieldName = "ListBox1";
+  listbox.topIndex = 2;
+  listbox.Rect = [50, yPos - 5, 30, 10];
+  listbox.setOptions(["c", "a", "d", "f", "b", "s"]);
+  listbox.value = "s";
+  doc.addField(listbox);
+  yPos += margin;
+}
+
+function addCheckBox() {
+  doc.text("CheckBox:", 10, yPos);
+  var checkBox = new CheckBox();
+  checkBox.fieldName = "CheckBox1";
+  checkBox.Rect = [50, yPos - 5, 30, 10];
+  doc.addField(checkBox);
+  yPos += margin;
+}
+
+function addPushButton() {
+  doc.text("PushButton:", 10, yPos);
+  var pushButton = new PushButton();
+  pushButton.fieldName = "PushButton1";
+  pushButton.Rect = [50, yPos - 5, 30, 10];
+  doc.addField(pushButton);
+  yPos += margin;
+}
+
+function addTextField() {
+  doc.text("TextField:", 10, yPos);
+  var textField = new TextField();
+  textField.Rect = [50, yPos - 5, 40, 10];
+  textField.multiline = true;
+  textField.value =
+    "The quick brown fox ate the lazy mouse The quick brown fox ate the lazy mouse The quick brown fox ate the lazy mouse";
+  textField.fieldName = "TestTextBox";
+  doc.addField(textField);
+  yPos += margin;
+}
+
+function addPasswordField() {
+  doc.text("Password:", 10, yPos);
+  var passwordField = new PasswordField();
+  passwordField.Rect = [50, yPos - 5, 40, 10];
+  doc.addField(passwordField);
+  yPos += margin;
+}
+
+function addRadioGroups() {
+  var boxDim = 10;
+  doc.text("RadioGroups:", 10, yPos);
+
+  // First radio group
+  var radioGroup = new RadioButton();
+  radioGroup.value = "RadioGroup1Option3";
+  radioGroup.fieldName = "RadioGroup1";
+  doc.addField(radioGroup);
+  yPos -= 5;
+
+  var radioButton1 = radioGroup.createOption("RadioGroup1Option1");
+  radioButton1.Rect = [50, yPos, boxDim, boxDim];
+
+  var radioButton2 = radioGroup.createOption("RadioGroup1Option2");
+  radioButton2.Rect = [62, yPos, boxDim, boxDim];
+
+  var radioButton3 = radioGroup.createOption("RadioGroup1Option3");
+  radioButton3.Rect = [74, yPos, boxDim, boxDim];
+  radioButton3.AS = "/RadioGroup1Option3";
+
+  radioGroup.setAppearance(Appearance.RadioButton.Cross);
+  yPos += boxDim + 5;
+
+  // Second radio group
+  var radioGroup2 = new RadioButton("RadioGroup2");
+  radioGroup2.value = "RadioGroup2Option3";
+  radioGroup2.fieldName = "RadioGroup2";
+
+  doc.addField(radioGroup2);
+
+  var radioButton21 = radioGroup2.createOption("RadioGroup2Option1");
+  radioButton21.Rect = [50, yPos, boxDim, boxDim];
+
+  var radioButton22 = radioGroup2.createOption("RadioGroup2Option2");
+  radioButton22.Rect = [62, yPos, boxDim, boxDim];
+
+  var radioButton23 = radioGroup2.createOption("RadioGroup2Option3");
+  radioButton23.Rect = [74, yPos, boxDim, boxDim];
+  radioButton23.AS = "/RadioGroup2Option3";
+
+  radioGroup2.setAppearance(Appearance.RadioButton.Circle);
+  yPos += margin + boxDim;
+}
+
+function addTextFieldGroup() {
+  doc.text("TextField Group:", 10, yPos);
+
+  const txtDate = new TextFieldGroup();
+  txtDate.fieldName = "Date";
+  txtDate.value = new Date().toLocaleDateString("en-US");
+  doc.addField(txtDate);
+
+  const txtDate1 = txtDate.createChild();
+  txtDate1.Rect = [50, yPos - 5, 40, 10];
+
+  yPos += margin;
+
+  const txtDate2 = txtDate.createChild();
+  txtDate2.Rect = [50, yPos - 5, 40, 10];
+}