Gather input from a form and store it in an Object upon submission

Question

Gather input from a form and store it in an Object upon submission

I am facing a challenge as I do not have much experience with object-oriented JavaScript. My goal is to have a form submit details such as the first and last name to an object that I've created.

Here is the object I have:


function Person(firstName, lastName){
    this.firstName = firstName;
    this.lastName = lastName;   

    this.confirm = function(){
        alert('Thank you '+ this.firstName +'<br>'+ this.lastName + ' Your email has been received');
    }
}

function submit(){
    person1 = new Person(document.getElementById('firstName').value, document.getElementById('lastName').value);
    person1.confirm();
}

And here is my form:

<input type="text" id="firstName" value="First Name"/></br>
<input type="text" id="lastName" value="Last Name"/></br>
<input type="text" value="Email Address"/></br>
<input type="Submit" value="Submit" onSubmit="submit()"/>

If someone could assist me in getting this to work properly, it would be greatly appreciated. Thank you.

javascript object

Answer 1

Answer №1

To create a constructor in JavaScript, you typically need to use the keyword new. Here is an example of how you can achieve this:

var user = new User("Alice", "Smith");
user.confirm();

If you prefer not to use the new keyword, you can approach it like this:

function User(firstName, lastName) {
    var obj = {
        firstName: firstName,
        lastName: lastName,
        confirm: function() {
            alert('Thank you ' + this.firstName + '<br>' + this.lastName + '. Your form has been submitted.');
        }
    };
    return obj;
}

Answer 2

To create a constructor in JavaScript, you typically need to use the keyword new. Here is an example of how you can achieve this:

var user = new User("Alice", "Smith");
user.confirm();

If you prefer not to use the new keyword, you can approach it like this:

function User(firstName, lastName) {
    var obj = {
        firstName: firstName,
        lastName: lastName,
        confirm: function() {
            alert('Thank you ' + this.firstName + '<br>' + this.lastName + '. Your form has been submitted.');
        }
    };
    return obj;
}

Answer 3

Answer №2

When utilizing a Constructor function, remember to include the new keyword
To execute a method, make sure to call it explicitly.
For retrieving data from a form, access the DOM elements representing the form controls and retrieve their value properties

Example:

var user = new User(
                        document.getElementById('username').value,
                        document.getElementById('password').value
                       );
user.login();

Answer 4

When utilizing a Constructor function, remember to include the new keyword
To execute a method, make sure to call it explicitly.
For retrieving data from a form, access the DOM elements representing the form controls and retrieve their value properties

Example:

var user = new User(
                        document.getElementById('username').value,
                        document.getElementById('password').value
                       );
user.login();

Answer 5

Answer №3

In order to instantiate the object within the event handler using data from the form, you can utilize the following syntax:

<input type="Submit" value="Submit" onSubmit="var obj = new Object(document.getElementById('first').value, document.getElementById('last').value);"/>

After creating the object, it is essential to perform an action with it to trigger any effects, such as invoking obj.execute();.

Edit:

If you want to encapsulate the code in a function, incorporating your edit, you can do this:

function submit() {
  var obj = new Object(document.getElementById('first').value, document.getElementById('last').value);
  obj.execute();
}

Answer 6

In order to instantiate the object within the event handler using data from the form, you can utilize the following syntax:

<input type="Submit" value="Submit" onSubmit="var obj = new Object(document.getElementById('first').value, document.getElementById('last').value);"/>

After creating the object, it is essential to perform an action with it to trigger any effects, such as invoking obj.execute();.

Edit:

If you want to encapsulate the code in a function, incorporating your edit, you can do this:

function submit() {
  var obj = new Object(document.getElementById('first').value, document.getElementById('last').value);
  obj.execute();
}

Gather input from a form and store it in an Object upon submission

Answer №1

Answer №2

Answer №3

Edit:

Similar questions

The type '{ children: Element[]; }' does not include the properties 'location' and 'navigator' that are present in the 'RouterProps' type

Spin the item around the axis of the universe

Encountering an NPM error while attempting to initiate a new React application

APNS functionality is supported by APN providers, but it is not compatible with NodeJS in a production

What is the best way to create a slideshow that automatically starts upon loading and pauses when hovered over?

Transferring information through AJAX to the current page using a foreach loop in Laravel 5

Is the JSON data not matching the file's content during validation?

Unraveling JavaScript using regular expressions in Python

Switch positions of two objects in JavaScript

Securing AJAX Requests: Encrypting GET and POST Requests in JavaScipt using Node.js

Tips for showcasing content on a jQuery calendar

Only consider valid values for input and ignore any zeros

Decrease initial loading time for Ionic 3

What steps are necessary to integrate expo-auth-session with Firebase?

Using discord.js within an HTML environment can add a whole new level of

AngularJS Toggle Directive tutorial: Building a toggle directive in Angular

`Multiple Autocomplete feature that allows rendering of previously selected items`

Eliminate placeholder text when the tab key is pressed

How to choose multiple images in Ionic framework

The input-group-btn is positioned to the right of the field, appearing to float