使用 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);
    }
}

下面是我做过的一些事情的具体参考资料。

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

Answer 2

您要做的是实现 JavaScript 函数来获取名称。这是一个例子：

function doFunction()
{
  var name = document.getElementById('vorname').value;
  alert("hallo " + name);
}

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

现在你可以用这个名字做点什么了。也许你可以像这样将它存储为一个全局变量：

var name = "Guest";
function doFunction()
{
  name = document.getElementById('vorname').value;
  //do something here
}

然后您在同一页面上更改网站的内容。但是您不能从该页面导航；否则您可能需要使用本地存储或服务器端脚本语言。

使用 Javascript HTML 公式

using Javascript HTML Formular

html

javascript

forms

onclick

button