javascript - 使用 Javascript HTML 公式

Question

我可能首先有不同的问题，对于所有想知道您的名字和姓氏的人来说这很正常(这是德语，但我希望这很重要)

<form name="formular" action="" onsubmit="">
<p>
<label for="vorname">Vorname:</label>
<input value="" type="text" name="vorname" id="vorname" size="25">
</p>
<p>
<label for="nachname">Nachname:</label>
<input type="text" name="nachname" id="nachname" size="25">
</p>
    <p><input type="button" value="Absenden" onclick="doFunction();" /></p>
</form>

然后我想使用一个从表单中获取姓名的函数，然后显示所有填写该表单的姓名，如留言簿。直到现在，我才成功地调用了一个提示“Hallo”，但我什至不知道如何将表单输入用作变量。

我希望你能帮助我，请只使用 JS 和 HTML。

Answer 1

您可以捕获字段并将它们添加到数组中，然后将该数组打印到页面上。这是一个 Fiddle包含我的代码。现有的添加按钮附加到表单上方的 ul 元素，并将名称保存到全局数组。我还添加了清除和加载按钮，以便您了解如何从数组填充列表。

<ul id="guestList">

</ul>
<form name="formular" action="" onsubmit="">
    <p>
        <label for="vorname">Vorname:</label>
        <input value="" type="text" name="vorname" id="vorname" size="25"/>
    </p>
<p>
    <label for="nachname">Nachname:</label>
    <input type="text" name="nachname" id="nachname" size="25"/>
</p>
<p>
    <input type="button" value="Absenden" onclick="storeVals();" />
    <input type="button" value="Clear List" onclick="clearList();" />
    <input type="button" value="Load List" onclick="loadList();" />
</p>
</form>

和javascript:

var names = []; //global scope

function storeVals() //declare function to store the input
{
    //document.getElementById finds the element with the 
    //corresponding ID. In this case I'm getting the objects 
    //behind each of the input boxes, and retrieving their value properties 
    //(the text entered in them). I'm also concatenating them together with
    //the plus sign (+) operator, and adding a space between them with the ' '
    //I'm storing the result of all that in a variable called name.
    var name = document.getElementById('vorname').value + ' ' +     document.getElementById('nachname').value;

    //I'm accessing the names array I declared above. The elements in the
    //array are accessed using an index which counts from 0.
    //So to get the first element, I would do names[0].
    //In this case I'm using names.length instead of a number, as it will return
    //the number of elements currently in the array. When there are zero, it will return 0.
    //When there is one, it will return 1, which happens to be the index for the second element.
    //The means I'm always assigning the name to the element after the last existing one.
    names[names.length] = name;
    alert(names); //just to help see what's going on. Remove this when you don't need it anymore.

    //Uses document.getElementById again, this time to get the object behind my ul list.
    //And calls my appendToList function below, passing it my name variable and a 
    //reference to the list object.
    appendToList(name, document.getElementById('guestList')); 
}

function appendToList(name,ulist){
    //this constructs a <li> object and stores it in a variable.
    var li = document.createElement("li");
    //this adds the text of the name inside the <li>
    //so if name is equal to "john smith", I've built:
    //<li>john smith</li>
    li.appendChild(document.createTextNode(name));
    //adds the li as a child of my existing list object.
    //so:
    //   <ul id="guestList"><li>john smith</li></ul>
    ulist.appendChild(li);
}

function clearList(){
    //gets my ul list object with the id "guestList"
    //sets its innerHTML (all of its contents) to an empty string
    //so regardless of what's inside, it becomes <ul id="guestList"></ul>
    document.getElementById('guestList').innerHTML = '';
}

function loadList(){
    //got my ul list object by id again.
    var list = document.getElementById('guestList');
    //for loop - essentially this means start the variable i at 0
    //keep looping while i < names.length, and increment i by 1
    //each time we iterate through the loop.
    for(i=0;i < names.length; i++){
        //call the appendToList function above, and pass it names[i] and my list object
        //so essentially, loop over every name in the array and call that function with
        //it to add the name to the list.
        appendToList(names[i],list);
    }
}

这里有一些我做过的一些事情的具体引用资料。

• > Arrays
• > ul DOM object
• > the document object
• > document.getElementById

但您需要注意，如果您只是使用客户端 javascript，此数据不会在页面刷新后继续存在，并且如果访问该页面则该数据将不可用来自另一个浏览器。