Question

I am working on a simple form demo and i would like the input to display in a below the form. Currently i have it populating in the console. How do i may it display in the div when i click the submit button?
My code:

$(document).ready(function() {
    $('.submitForm').on('click',function(event){
        event.preventDefault();     

        $('#firstName').val();
        $('#lastName').val();
        $('#phoneNumber').val();
        $('#address').val();    

        console.log($('#firstName').val());
        console.log($('#lastName').val());
        console.log($('#phoneNumber').val());
        console.log($('#address').val());
    });
});                 

Answer 1

Well, you’re currently not putting the values anywhere but into the console.log.

I would expect to see something like (let’s call your div you want the values to go to, “output”):

$(document).ready(function() {
    $('.submitForm').on('click',function(event){
        event.preventDefault();

        // Borrowing from another response, this is better
        // Putting these in variables protects you from 
        // 1) accidentally modifying your form values
        // 2) invalid input, if you add some basic checks, like
        //    testing to see if the length is > 0, doesn't contain
        //    bad characters, etc.
        var firstName = $('#firstName').val(),
            lastName  = $('#lastName').val(),
            phone     = $('#phoneNumber').val(),
            address   = $('#address').val();

        // get a reference to the div you want to populate
        var $out = $("#output");

        // This is a better way of dealing with this
        // because every call to .append() forces DOM
        // reparsing, and if you do this too often, it can cause
        // browser slowness. Better to put together one string
        // and add it all at once.
        $out.html("<p>" + firstName + "</p>" + 
                  "<p>" + $('#lastName').val() + "</p>" +
                  "<p>" + $('#phoneNumber').val() + "</p>" + 
                  "<p>" + $('#address').val() + "</p>");                    
    });
});