get value from HTML form with Javascript and then display them on html

Question

This is my first post ever! So I am currently studying front end web development online. I have come across a problem! I am trying to get input from a user HTML form and display those values back on the HTML document. When I do it using javascript work but when using the form it dont.

see my code in codepen : http://codepen.io/kevin1616/pen/KdOvwy

My html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Contact List</title>
</head>

<body>

<header>
<h1> ContactBook.com </h1>
</header>

<section id="body">

    <form method="post">

        <input type="text" id="name" ><br>
        <input type="text" id="last" ><br>
        <input type="text" id="phone" ><br>
        <input type="text" id="address" ><br>
        <input type="submit" id="create_new_contact" >
    </form>

    <ol id="people">
    </ol>


</section>




<script src="js.js"></script>
</body>
</html>

my javascript

// JavaScript Document


// CONTACTS CONTRUCTOR OBJECT
var contacts = function ( ) {

    this.name = [];
    this.lastName= [];
    this.phoneNumber = [];
    this.address= [];

};


contacts.prototype.add = function(name, last, number, address) {// Add method to add contacts


    this.name.push(name);

    this.lastName.push(last);

    this.phoneNumber.push(number);

    this.address.push(address);

}

contacts.prototype.toHTML = function (i) {// toHTML method formats how html will be displayed 


    var htmlString ="<li>";
        htmlString +="<p>" + this.name[i] + "<p>";
        htmlString +="<p>" + this.lastName[i] + "<p>";
        htmlString +="<p>" + this.phoneNumber[i] + "<p>";
        htmlString +="<p>" + this.address[i]+ "<p>";
        htmlString +="</li>";

    return htmlString;

};


contacts.prototype.renderElement = function (list) {// method for sending input to html


    for ( var i=0;  i < this.name.length; i++) {
        list.innerHTML+= this.toHTML(i);

    }
};




var addingContact = new contacts();// creating new instance of contructor
addingContact.add("Kevin", "Silvestre" ,"781 582 4449", "26 endicott st");// using the add method to add contacts to my list
var itemsTorender = document.getElementById("people");// select where in the html the elemtents will be rendered
addingContact.renderElement(itemsTorender);// render elements to html

Create a function in javascript & pass the form to this function when you submit the form using onsubmit() method. — Abhash Upadhyaya
– Abhash Upadhyaya, Commented Nov 30, 2015 at 5:23

Shailendra Sharma · Accepted Answer · 2015-11-30 05:28:51Z

1

You Just Need A function which call during submit form to get form data that time and show it in list

function saveData(){
    var name =  document.getElementById("name").value;
    var last =  document.getElementById("last").value;
    var phone =  document.getElementById("phone").value;
    var address =  document.getElementById("address").value;
    addingContact.add(name,last ,phone, address);// using
    var itemsTorender = document.getElementById("people");// select where in the html
    addingContact.renderElement(itemsTorender);// render elements to html

    return false; // this will stop default submit of form (because by default form submit on "action" url if no action is define than on same page )
}

and you need to call it like

<form method="post" action="#" onsubmit="return saveData()">

Fiddle

answered Nov 30, 2015 at 5:28

Shailendra Sharma

6,9922 gold badges30 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kevin Silvesttre Over a year ago

Thanks very much for your help! It worked! I was on the right track but on the wrong direction. thanks again!

Collectives™ on Stack Overflow

get value from HTML form with Javascript and then display them on html

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related