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>

然后我想使用一个从表单中获取Name的函数，然后显示所有填写该表单的名称，如Guestbook。到现在为止，我只是打电话给一个叫“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 Formular

2 个答案: