JavaScript - prosty skrypt generujący formularz

Stronę tą wyświetlono już: 886 razy

Jakiś czas temu napisałem sobie mały skrypcik, który umożliwia dynamiczne generowanie formularza. Jego działanie można zobaczyć poniżej, natomiast skrypt jest dostępny na GitHub-ie.

Kod skryptu również i tutaj zamieszczam:

Listing 1
  1. function createTextElement(text, tagName = 'p') {
  2. let pElement = document.createElement(tagName);
  3. pElement.innerText = text;
  4. return pElement;
  5. }
  6. function Answer(answerControlType, questionText = '', questionName = '') {
  7. let answerType = answerControlType;
  8. let text = questionText;
  9. let extended;
  10. let extendedContainer;
  11. let name = questionName;
  12. let ans;
  13. this.getAnswerType = () => { return answerType; }
  14. this.createAnswerElement = (questionName, id, extendedA = null) => {
  15. if (questionName !== null) {
  16. name = questionName;
  17. }
  18. ans = document.createElement('input');
  19. ans.setAttribute('name', name);
  20. ans.setAttribute('id', id);
  21. ans.setAttribute('type', answerType);
  22. ans.setAttribute('value', text);
  23. ans.addEventListener('change', ($event) => {
  24. var radios = document.querySelectorAll('input[type=radio][name="' + name + '"]');
  25. for (var i = 0; i < radios.length; i++) {
  26. if (radios[i].value !== event.target.value) {
  27. let ext = document.querySelector('#' + radios[i].getAttribute('id') + "_ext");
  28. if (ext) {
  29. ext.parentElement.removeChild(ext);
  30. }
  31. } else {
  32. radios[i].parentElement.appendChild(extendedContainer);
  33. }
  34. }
  35. });
  36. let container = document.createElement('div');
  37. container.appendChild(ans);
  38. if (answerType === 'radio' || answerType === 'checkbox') {
  39. let label = document.createElement('label');
  40. label.innerText = questionText;
  41. label.setAttribute('for', id);
  42. container.appendChild(label);
  43. }
  44. extendedContainer = document.createElement('div');
  45. extendedContainer.setAttribute('id', id + '_ext');
  46. extendedContainer.setAttribute('class', 'extended');
  47. if (extendedA !== null) {
  48. extended = extendedA;
  49. extendedContainer.appendChild(extended);
  50. }
  51. return container;
  52. }
  53. }
  54. function Question(questionNumber, questionTitle) {
  55. let title = questionTitle;
  56. let number = questionNumber;
  57. let answers = [];
  58. let questionContainer;
  59. let answersContainer;
  60. let headerContainer;
  61. this.addAnswer = (answer, ext) => {
  62. let questionId = 'question-name-' + number
  63. if (ext) {
  64. container = answer.createAnswerElement(
  65. answer.getAnswerType() === 'radio' ? questionId : 'id-' + number + '-' + answers.length,
  66. 'id-' + number + '-' + answers.length,
  67. ext.createAnswerElement(
  68. null,
  69. 'id-' + number + '-' + answers.length
  70. )
  71. );
  72. } else {
  73. container = answer.createAnswerElement(
  74. answer.getAnswerType() === 'radio' ? questionId : 'id-' + number + '-' + answers.length,
  75. 'question-id-' + number + '-' + answers.length);
  76. }
  77. answersContainer.appendChild(container);
  78. answers.push(answer);
  79. }
  80. this.buildQuestion = (parentElement, questionId) => {
  81. questionContainer = document.createElement('fieldset');
  82. questionContainer.setAttribute('id', questionId + number);
  83. headerContainer = createTextElement((number + 1) + ' ' + title, 'legend');
  84. questionContainer.appendChild(headerContainer);
  85. answersContainer = document.createElement('div');
  86. answersContainer.setAttribute('class', 'radio-buttons-container');
  87. questionContainer.appendChild(answersContainer);
  88. parentElement.appendChild(questionContainer);
  89. }
  90. }
  91. let parentElement = document.querySelector('form');
  92. let question0 = new Question(0, "Podaj swój wiek:");
  93. question0.buildQuestion(parentElement, 'wiek');
  94. question0.addAnswer(new Answer('number', '', 'wiek'));
  95. let question1 = new Question(1, "Czy masz szczęście?");
  96. question1.buildQuestion(parentElement, 'firstOne');
  97. question1.addAnswer(new Answer('radio', 'Tak mam i to dużo (podaj ile)'), new Answer('number', '', 'NumerCzegosTam'));
  98. question1.addAnswer(new Answer('radio', 'Mam'));
  99. question1.addAnswer(new Answer('radio', 'Nie mam'));
  100. let question2 = new Question(2, "Czy coś tam coś tam?");
  101. question2.buildQuestion(parentElement, 'secondOne');
  102. question2.addAnswer(new Answer('radio', 'Tak'));
  103. question2.addAnswer(new Answer('radio', 'Nie'));
  104. let question3 = new Question(3, "Jakie kolory najbardziej lubisz?");
  105. question3.buildQuestion(parentElement, 'anotherone');
  106. question3.addAnswer(new Answer('checkbox', 'Pastelowe'));
  107. question3.addAnswer(new Answer('checkbox', 'Kolorowe'));
  108. question3.addAnswer(new Answer('checkbox', 'Marchewkowe'));
  109. let buttonElement = document.querySelector('#sendButton');
  110. buttonElement.addEventListener('click', () => {
  111. let w = new FormData(parentElement);
  112. for (var key of w.keys()) {
  113. console.log('key: ' + key + ' = ', w.get(key));
  114. }
  115. })
Propozycje książek

Komentarze