使用Javascript从HTML表单获取价值，然后在html上显示它们

Question

This is my first post ever! 这是我有史以来的第一篇文章！ So I am currently studying front end web development online. 因此，我目前正在在线学习前端Web开发。 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. 我正在尝试从用户HTML表单获取输入，并将这些值重新显示在HTML文档中。 When I do it using javascript work but when using the form it dont. 当我使用javascript工作时，但使用表单时却没有。

see my code in codepen : http://codepen.io/kevin1616/pen/KdOvwy 在codepen中查看我的代码： http ://codepen.io/kevin1616/pen/KdOvwy

My html 我的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

// 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

Answer 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 小提琴

使用Javascript从HTML表单获取价值，然后在html上显示它们

问题描述

1 个解决方案

解决方案1
1 已采纳 2015-11-30 05:28:51

使用Javascript从HTML表单获取价值，然后在html上显示它们

问题描述

1 个解决方案

解决方案1 1 已采纳 2015-11-30 05:28:51

解决方案1
1 已采纳 2015-11-30 05:28:51