Сохранение HTML ввода формы как объекта с использованием класса конструктора и имени переменной c динамического типа (Plain JS)

Question

<form id="projectForm" onsubmit="return ptitle.value = new Project(this);">
                <div class="form-row">
                <label for="ptitle">Title: </label>
                <input type="text" id="ptitle" name="ptitle"><br>
                </div>
                <div class="form-row">
                <label for="pdescription">Discription: </label>
                <input type="text" id="pdescription" name="pdescription"><br>
                </div>
                <div class="form-row">
                <label for="pdueDate">Due Date</label>
                <input type="date" id="pdueDate" name="pdueDate"><br>
                </div>
                <div class="form-row">
                <label for="high">High</label>
                <input type="radio" id="high" name="priority">
                <label for="low">Low</label>
                <input type="radio" id="low" name="priority"><br>
                <input id="submit" type="submit" value="submit">
                </div>
            </form>

Итак, я хотел бы взять данные, отправленные из этой формы, и вызвать метод конструктора в классе Projects. Я также хотел бы иметь возможность динамически генерировать имя переменной из значения заголовка формы. Вот код JavaScript. Мне нужно будет использовать простой JS, так как это то, что требуется для проекта! Нам также необходимо использовать класс-конструктор или фабричную функцию для создания проектов. Как видите, я пытался нанести удар, но, к сожалению, это не сработало. Заранее спасибо.

class Project {


    constructor(form) {
        this.title = form.ptitle.value;
        this.description = form.pdescription.value;
        this.dueDate = form.pdueDate.value;
        this.priority = form.priority.value;
    }

    todoList = {};

    addTodoList(value, description) {

        this.todoList[value] = description;
    }

    removeTodoList(key) {
        delete this.todoList[key];
    }

}

Еще раз спасибо !!!

Answer 1

I'd also like to be able to dynamically generate the variable name from the title value of the form Звучит как ужасная идея ...

Ну вот вы go

class Project {


    constructor(form) {
        this.title = form.ptitle.value;
        this.description = form.pdescription.value;
        this.dueDate = form.pdueDate.value;
        this.priority = form.priority.value;
    }

    todoList = {};

    addTodoList(value, description) {

        this.todoList[value] = description;
    }

    removeTodoList(key) {
        delete this.todoList[key];
    }

}

<form id="projectForm" onsubmit="window[ptitle.value] = new Project(this);return false">
                <div class="form-row">
                <label for="ptitle">Title: </label>
                <input type="text" id="ptitle" name="ptitle"><br>
                </div>
                <div class="form-row">
                <label for="pdescription">Discription: </label>
                <input type="text" id="pdescription" name="pdescription"><br>
                </div>
                <div class="form-row">
                <label for="pdueDate">Due Date</label>
                <input type="date" id="pdueDate" name="pdueDate"><br>
                </div>
                <div class="form-row">
                <label for="high">High</label>
                <input type="radio" id="high" name="priority">
                <label for="low">Low</label>
                <input type="radio" id="low" name="priority"><br>
                <input id="submit" type="submit" value="submit">
                </div>
            </form>