Taking in an Input: In my own words

Since my last blog was about inputs, I thought I would follow up with an article on how to take in and console log the value from the form. In order to complete, we will write a function in JavaScript in order to take in the form values. jQuery is a JavaScript library of functions that have been created that will make make the job much easier.

Let’s start on the HTML file adding id’s to the inputs created last week. I also created a JS file (app.js) in the same folder as the HTML file. I removed the checkbox for now (I’ll discuss later). Can’t forget to link our JS file and jQuery to our html file using the script tag and source (src) attribute.

<body>
    <h3>Submit the form</h3>
    <form>
        <input id="name" type="text" name="name" placeholder="name"/><br>
        <input id="date" type ="date" name="birthdate"/><br>
        <input id="email" type="email" name="email" placeholder="name@email.com"/><br>
        <input id="submit" type ="submit" value="submit">
    </form>

    <script src="https://code.jquery.com/jquery.js"></script>
    <script src="app.js"></script>
</body>

We will add functions on the app.js file to take in the inputs. jQuery allows us to place a listener on a class or id using “$” as a method $(‘#id’). We can add the jQuery method .on() which takes in an event (action) and a handler (function) to be completed when the action is made on the id $(‘#id’).on(‘action’, function);.

For our purposes, I will add the listener to the submit input/button using the id ‘submit’; use ‘click’ as the action; and will create a function submitUser to take in the input values.

    $('#submit').on('click', submitUser);

So $('#submit').on('click', submitUser) calls the function submitUser and take in values when submit is clicked.

Next, I will create a function (submitUser) to take in the input values. Inside the function I set a constant (user) equal to an object. Inside the object, I set a property for each input and assigned keys “name, DOB and email.”

const submitUser = function() {
    const user = {
        name: $('#name').val(),
        DOB: $('#date').val(),
        email: $('#email').val()
    }
    console.log(user);
}

jQuery method .val() allows us to get values from form elements. $('#id') we add a listener to the id’s of each of the inputs and add the .val() method to take in each input $('#id').val() Inside the function, we add the console.log(user) to confirm the object has been captured.

If you open this page in a browser and the console and try using this function, you will notice that when submitting the data, it briefly appears in the console and disappears and the form resets. jQuery has another handy built in method preventdefault() that we can add to the function and pass in the event to keep the default action from occurring.

const submitUser = function(event) {
    event.preventDefault();

    const user = {
        name: $('#name').val(),
        DOB: $('#date').val(),
        email: $('#email').val()
    }
    console.log(user);
}

Now when we submit the form with the console open, we can see the object appears in the console. We can now store and manipulate this data as needed.