Question

我有一个用户输入一些数据的表格，可以是复选框，单选按钮，文本字段等

当用户点击提交按钮时，我想用输入的任何数据刷新页面

<html>
    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
    </head>
<body id="ref">
<form>
    Please enter your name:<input type="text" id="name" />
    Please enter your age:<input type="text" id="age" />
</form>
<input type="button" onclick="c()" value="submit">

<script type="text/javascript">

function c() 
{
    var o = document.getElementById('ref');
    o.innerHTML = '';

    var n = document.createElement('p');
    var nam = document.getElementById('name');
    n.innerHTML = "Your name is: " + nam;
    o.appendChild(n);

    var a = document.createElement('p');
    var ag = document.getElementById('age');
    a.innerHTML = "Your age is: " + ag;
    o.appendChild(a);

    //how do i get the info from the form? because both nam and ag are coming up null

}

</script>
</body>
</html>

我的猜测这不起作用是因为页面刷新然后尝试通过id获取元素，而不再存在...那么这样做的正确方法是什么？

Answer 1

您将对象与其属性混淆。在这里，您将获得“年龄”字段的HTMLInputElement个实例：

var ag = document.getElementById('age');

但是你在这里使用的对象好像是一个简单的值：

a.innerHTML = "Your age is: " + ag;

HTMLInputElement对象有一个value字段可供您使用：

a.innerHTML = "Your age is: " + ag.value;

另外，你通过这样做完全破坏了网页：

var o = document.getElementById('ref');
o.innerHTML = '';

...因为你给了body元素ID“ref”。完全替换body元素完全取代body元素，因此您不能依赖仅作为该元素的下属存在的对象。

通常情况下要填充一个元素，并（可选）删除不再需要的元素。例如（live copy）：

HTML：

<form id="theForm">
    Please enter your name:<input type="text" id="name" />
    Please enter your age:<input type="text" id="age" />
    <input type="button" onclick="c()" value="submit">
</form>
<div id="result">
</div>

（注意我为方便起见将按钮移动到表格中。）

JavaScript的：

function c() {
  var form = document.getElementById("theForm"),
      nameField = document.getElementById("name"),
      ageField = document.getElementById("age"),
      result = document.getElementById("result");

  form.parentNode.removeChild(form);
  result.innerHTML =
    "Your name is " + nameField.value +
    " and your age is " + ageField.value;
}

在那里，当按下按钮时，我删除表格并填写“结果”div。

您可以根据需要动态添加“结果”div（live copy）：

HTML：

<form id="theForm">
    Please enter your name:<input type="text" id="name" />
    Please enter your age:<input type="text" id="age" />
    <input type="button" onclick="c()" value="submit">
</form>

JavaScript的：

function c() {
  var form = document.getElementById("theForm"),
      nameField = document.getElementById("name"),
      ageField = document.getElementById("age"),
      result;

  result = document.createElement("div");
  result.innerHTML =
    "Your name is " + nameField.value +
    " and your age is " + ageField.value;
  form.parentNode.insertBefore(result, form);
  form.parentNode.removeChild(form);
}

如果您将id值更改为name值（live copy），则可以使用更简洁，更自然的语法访问字段：

HTML：

<form name="theForm">
    Please enter your name:<input type="text" name="name" />
    Please enter your age:<input type="text" name="age" />
    <input type="button" onclick="c()" value="submit">
</form>

JavaScript的：

function c() {
  var form = document.theForm,
      nameField = form.name,
      ageField = form.age,
      result;

  result = document.createElement("div");
  result.innerHTML =
    "Your name is " + nameField.value +
    " and your age is " + ageField.value;
  form.parentNode.insertBefore(result, form);
  form.parentNode.removeChild(form);
}

进一步阅读：

DOM2 Core（得到大多数现代浏览器的支持）
DOM2 HTML
DOM3 Core（越来越支持）

Answer 2

如果您只想使用java-script更新html，可以使用输入的“.value”属性;

 var a = document.createElement('p').value;
 var ag = document.getElementById('age').value;

通常使用服务器端代码处理表单信息，这可以通过指定表单的action属性来完成：

<form action="processuserinfo.aspx">
...
</form>

Answer 3

我很确定这不是单独的javascript。你需要使用像php这样的服务器端语言。尝试google php表单，你应该得到一些好的结果。：）

如何使用javascript从表单中获取信息？

3 个答案: