我如何從使用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的窗體獲取信息？

回答

相關問題