我如何从使用JavaScript的窗体获取信息？

我有用户输入一些数据的形式，可以是复选框，单选按钮，文本框等我如何从使用JavaScript的窗体获取信息？

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

<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获取元素，这是不存在了..什么是这样做的正确方法？

来源

2011-10-07 iCodeLikeImDrunk

你让对象与他们的属性混淆。在这里，你得到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。

您可以添加格设置动态的，如果你想要的 “结果”（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（支持越来越）

来源

2011-10-07 21:58:01

否定的。 DOM通过document.forms和元素提供了方便的访问，所以不需要反复调用gebi，只需要'document.theForm.age.value ='42'' –

@Downvoterstepintothelight：谢谢你发表评论。不，'document.theForm.age'因OP的标记而失败，因为表单和字段没有*名称*;他们有* ids *。（人们可以通过'window'对象访问它们，但它太拥挤了，除非你小心你的命名，否则就会有麻烦。）如果我们更改OP的标记，那么我们可以做到这一点。但我们如何进入这些领域与OP的主要问题基本上无关。 –

@ T.J.克罗德，啊，我站在名称属性缺席的情况下纠正，没有注意到你和原始片段之间的差异。你是指通过'window'访问什么？看起来我没有删除我的downvote :-(你可以请'触摸'的帖子 –

-1

我敢肯定，这是不可行的JavaScript独自。你需要使用像php这样的服务器端语言。尝试谷歌的PHP形式，你应该得到一些好的结果。 :)

来源

2011-10-07 21:53:46 RylandAlmanza

理由即时通讯使用，这是因为我试图JSP，但我的公司serlvets等等引起的参数“消失”，每当新的页面加载..即时通讯实习生顺便说一句，只是tryna图一些事情=/ – iCodeLikeImDrunk

是的，它可以。如果你愿意，你可以完全重写整个页面。 –

没关系，我知道了..得到的元素之前，我改变了HTML的身体..谢谢你的帮助，但！ – iCodeLikeImDrunk

如果你想使用Java脚本而已，你可以使用“.value的”输入的属性来更新您的HTML;

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

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

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

来源

2011-10-07 22:00:45

我如何从使用JavaScript的窗体获取信息？

回答

相关问题