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

【问题标题】：get value from HTML form with Javascript and then display them on html使用 Javascript 从 HTML 表单中获取值，然后在 html 上显示它们
【发布时间】：2015-11-30 05:17:58
【问题描述】：

这是我第一次发帖！所以我目前正在在线学习前端Web开发。我遇到了一个问题！我正在尝试从用户 HTML 表单获取输入并将这些值显示回 HTML 文档。当我使用 javascript 工作时，但使用表单时却没有。

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

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

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

【问题讨论】：

在 javascript 中创建一个函数，并在使用 onsubmit() 方法提交表单时将表单传递给该函数。

标签： javascript html

【解决方案1】：

您只需要一个在提交表单期间调用的函数以获取当时的表单数据并将其显示在列表中

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 )
}

你需要这样称呼它

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

Fiddle

【讨论】：

非常感谢您的帮助！有效！我在正确的轨道上，但在错误的方向。再次感谢！