JavaScript - prosty skrypt generujący formularz

Autor podstrony: Krzysztof Zajączkowski

Stronę tą wyświetlono już: 2013 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:

function createTextElement(text, tagName = 'p') { let pElement = document.createElement(tagName); pElement.innerText = text; return pElement; } function Answer(answerControlType, questionText = '', questionName = '') { let answerType = answerControlType; let text = questionText; let extended; let extendedContainer; let name = questionName; let ans; this.getAnswerType = () => { return answerType; } this.createAnswerElement = (questionName, id, extendedA = null) => { if (questionName !== null) { name = questionName; } ans = document.createElement('input'); ans.setAttribute('name', name); ans.setAttribute('id', id); ans.setAttribute('type', answerType); ans.setAttribute('value', text); ans.addEventListener('change', ($event) => { var radios = document.querySelectorAll('input[type=radio][name="' + name + '"]'); for (var i = 0; i < radios.length; i++) { if (radios[i].value !== event.target.value) { let ext = document.querySelector('#' + radios[i].getAttribute('id') + "_ext"); if (ext) { ext.parentElement.removeChild(ext); } } else { radios[i].parentElement.appendChild(extendedContainer); } } }); let container = document.createElement('div'); container.appendChild(ans); if (answerType === 'radio' || answerType === 'checkbox') { let label = document.createElement('label'); label.innerText = questionText; label.setAttribute('for', id); container.appendChild(label); } extendedContainer = document.createElement('div'); extendedContainer.setAttribute('id', id + '_ext'); extendedContainer.setAttribute('class', 'extended'); if (extendedA !== null) { extended = extendedA; extendedContainer.appendChild(extended); } return container; } } function Question(questionNumber, questionTitle) { let title = questionTitle; let number = questionNumber; let answers = []; let questionContainer; let answersContainer; let headerContainer; this.addAnswer = (answer, ext) => { let questionId = 'question-name-' + number if (ext) { container = answer.createAnswerElement( answer.getAnswerType() === 'radio' ? questionId : 'id-' + number + '-' + answers.length, 'id-' + number + '-' + answers.length, ext.createAnswerElement( null, 'id-' + number + '-' + answers.length ) ); } else { container = answer.createAnswerElement( answer.getAnswerType() === 'radio' ? questionId : 'id-' + number + '-' + answers.length, 'question-id-' + number + '-' + answers.length); } answersContainer.appendChild(container); answers.push(answer); } this.buildQuestion = (parentElement, questionId) => { questionContainer = document.createElement('fieldset'); questionContainer.setAttribute('id', questionId + number); headerContainer = createTextElement((number + 1) + ' ' + title, 'legend'); questionContainer.appendChild(headerContainer); answersContainer = document.createElement('div'); answersContainer.setAttribute('class', 'radio-buttons-container'); questionContainer.appendChild(answersContainer); parentElement.appendChild(questionContainer); } } let parentElement = document.querySelector('form'); let question0 = new Question(0, "Podaj swój wiek:"); question0.buildQuestion(parentElement, 'wiek'); question0.addAnswer(new Answer('number', '', 'wiek')); let question1 = new Question(1, "Czy masz szczęście?"); question1.buildQuestion(parentElement, 'firstOne'); question1.addAnswer(new Answer('radio', 'Tak mam i to dużo (podaj ile)'), new Answer('number', '', 'NumerCzegosTam')); question1.addAnswer(new Answer('radio', 'Mam')); question1.addAnswer(new Answer('radio', 'Nie mam')); let question2 = new Question(2, "Czy coś tam coś tam?"); question2.buildQuestion(parentElement, 'secondOne'); question2.addAnswer(new Answer('radio', 'Tak')); question2.addAnswer(new Answer('radio', 'Nie')); let question3 = new Question(3, "Jakie kolory najbardziej lubisz?"); question3.buildQuestion(parentElement, 'anotherone'); question3.addAnswer(new Answer('checkbox', 'Pastelowe')); question3.addAnswer(new Answer('checkbox', 'Kolorowe')); question3.addAnswer(new Answer('checkbox', 'Marchewkowe')); let buttonElement = document.querySelector('#sendButton'); buttonElement.addEventListener('click', () => { let w = new FormData(parentElement); for (var key of w.keys()) { console.log('key: ' + key + ' = ', w.get(key)); } })
Propozycje książek
tytuł: JavaScript i jQuery. Interaktywne strony WWW dla każdego. Podręcznik Front-End Developera  autor: Jon Duckett

Tytuł:

JavaScript i jQuery. Interaktywne strony WWW dla każdego. Podręcznik Front-End Developera

Autor:

Jon Duckett

tytuł: JavaScript od pierwszej linii kodu. Błyskawiczna nauka pisania gier, stron WWW i aplikacji internetowych autor: Laurence Lars Svekis, Maaike van Putten, Rob Percival

Tytuł:

JavaScript od pierwszej linii kodu. Błyskawiczna nauka pisania gier, stron WWW i aplikacji internetowych

Autor:

Laurence Lars Svekis, Maaike van Putten, Rob Percival

tytuł: JavaScript funkcyjnie. Zrównoważone, pragmatyczne programowanie funkcyjne w JavaScript autor: Kyle Simpson

Tytuł:

JavaScript funkcyjnie. Zrównoważone, pragmatyczne programowanie funkcyjne w JavaScript

Autor:

Kyle Simpson

tytuł: JavaScript dla dzieci dla bystrzaków autor: Chris Minnick, Eva Holland

Tytuł:

JavaScript dla dzieci dla bystrzaków

Autor:

Chris Minnick, Eva Holland

tytuł: Modularny JavaScript dla zaawansowanych autor: Nicolas Bevacqua

Tytuł:

Modularny JavaScript dla zaawansowanych

Autor:

Nicolas Bevacqua

tytuł: JavaScript w praktyce. Stwórz twitterowego bota, system sygnalizacyjny LED i inne projekty z użyciem Node.js i Raspberry Pi autor: Lynn Beighley

Tytuł:

JavaScript w praktyce. Stwórz twitterowego bota, system sygnalizacyjny LED i inne projekty z użyciem Node.js i Raspberry Pi

Autor:

Lynn Beighley

tytuł: Matematyka dla programistów JavaScript autor: Jacek Piechota

Tytuł:

Matematyka dla programistów JavaScript

Autor:

Jacek Piechota

tytuł: JavaScript i jQuery. Interaktywne strony WWW dla każdego. Podręcznik Front-End Developera autor: Jon Duckett

Tytuł:

JavaScript i jQuery. Interaktywne strony WWW dla każdego. Podręcznik Front-End Developera

Autor:

Jon Duckett

tytuł: ECMAScript 6. Przewodnik po nowym standardzie języka JavaScript autor: Nicholas C. Zakas

Tytuł:

ECMAScript 6. Przewodnik po nowym standardzie języka JavaScript

Autor:

Nicholas C. Zakas

tytuł: JavaScript i wzorce projektowe. Programowanie dla zaawansowanych. Wydanie II autor: Simon Timms

Tytuł:

JavaScript i wzorce projektowe. Programowanie dla zaawansowanych. Wydanie II

Autor:

Simon Timms

W związku z tym, że firma Helion nie wywiązuje się z swoich zobowiązań naliczania prowizji za każdą zakupioną książkę a kontakt z ową frmą jest nie możliwy autor strony zmuszony został do zablokowania linkowania książek. Za wszelkie niedogodności z tym związane z góry przepraszam i obiecuję włączenie linkowania gdy tylko sprawa zostanie wyjaśniona