如何使用javascript从表单获取信息？
[英]how do i get the info from a form using javascript?
问题描述
i have a form which user enters some data, could be checkboxes, radio buttons, textfields, etc 
我有一个用户输入一些数据的表格，可以是复选框，单选按钮，文本字段等
when user click submit button, i want to refresh the page with whatever data that was entered 当用户单击提交按钮时，我想使用输入的任何数据刷新页面
<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>
my guess this is not working is because the page refreshes then tries to fetch the element by id which is not there anymore.. whats the correct way of doing this?? 我的猜测这是行不通的，是因为页面刷新然后尝试通过不再存在的id来获取元素..这样做的正确方法是什么？
3 个解决方案
解决方案1
5 已采纳 2011-10-07 21:58:01
You're confusing objects with their properties. 您正在将对象及其属性混淆。 Here, you're getting the HTMLInputElement instance for the "age" field: 在这里，您将获得“年龄”字段的HTMLInputElement实例：
var ag = document.getElementById('age');
But here you're using that object as though it were a simple value: 但是在这里，您使用的对象就像一个简单的值：
a.innerHTML = "Your age is: " + ag;
The HTMLInputElement object has a value field you can use for that: HTMLInputElement对象具有一个可用于该value字段：
a.innerHTML = "Your age is: " + ag.value;
Separately, you're completely destroying the page by doing this: 另外，您通过执行以下操作完全破坏了页面：
var o = document.getElementById('ref');
o.innerHTML = '';
...because you've given the body element the ID "ref". ...因为您已给body元素指定ID“ ref”。 Completely replacing the body element completely replaces the body element, so you can't rely on objects that only exist as subordinates of that element. 完全替换body元素会完全替换body元素，因此您不能依赖仅作为该元素下属存在的对象。
The usual thing is to have an element to fill in, and (optionally) to remove the elements you no longer need. 通常的事情是要填充一个元素，并（可选）删除不再需要的元素。 For instance ( live copy ): 例如（ 实时复制 ）：
HTML: 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>
(Note I moved the button into the form for convenience.) （请注意，为方便起见，我将按钮移到了表单中。）
JavaScript: 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;
}
There, when the button is pressed, I remove the form and fill in the "result" div. 在那里，当按下按钮时，我删除了表格并填写“结果” div。
You could add the "result" div dynamically if you wanted ( live copy ): 您可以根据需要动态添加“结果” div（ 实时复制 ）：
HTML: 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: 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);
}
You can access the fields using a briefer and somewhat more natural syntax if you change your id values to name values instead ( live copy ): 如果您将id值改为name值（ 实时复制 ），则可以使用更简短，更自然的语法访问字段：
HTML: 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: 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);
}
Further reading: 进一步阅读：
解决方案2
1 2011-10-07 22:00:45
If you want to update your html using java-script only , you may use ".value" attribute of the input; 如果只想使用java-script更新html，则可以使用输入的“ .value”属性；
var a = document.createElement('p').value;
var ag = document.getElementById('age').value;
Usually the Form information is processed using server-side code , this is done by specifying the action attribute of the form: 通常，表单信息是使用服务器端代码处理的，这是通过指定表单的action属性来完成的：
<form action="processuserinfo.aspx">
...
</form>
解决方案3
0 2011-10-07 21:53:46
I'm pretty sure this isn't doable javascript alone. 我很确定这不是单独使用javascript即可实现的。 You'll need to use a server-side language like php. 您将需要使用像php这样的服务器端语言。 Try to google php forms, and you should get some good results. 尝试谷歌的PHP形式，你应该得到一些很好的结果。 :) :)
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.