如何獲得textarea的價值？

這是一個跟進my other question。我再次問，因爲這似乎更多的JavaScript問題比谷歌App Engine的問題。如何獲得textarea的價值？

我有一個表格

<form name="choice_form" id="choice_form" method="post" action="/g/choicehandler" onsubmit="writeToStorage()"> 
    <textarea name="choice" rows="7" cols="50"></textarea><br /> 
    <input type="submit" value="submit your choice"> 
</form>

我想借此textarea的價值，並將其與formData發送到應用程序。我試過這個

var choice = document.getElementById("choice_form").value;

但我得到「未定義」爲「choice」的值。我究竟做錯了什麼？

而且，如果我理解正確，則/g/choicehandler被表單調用一次，XHR調用一次。我如何解決這個問題？下面是處理：

class Choice(webapp.RequestHandler): 
    def get(self): 
     self.response.out.write(""" 
<html> 
    <head> 
<script type="text/javascript"> 

var count = 0; 

function writeToStorage() 
{ 
    var user = "user" + count; 
    count++; 
    localStorage.setItem("chooser", user); 
    var choice = document.getElementById("choice_form").value; 

    var formData = new FormData(); 
    formData.append("chooser", user); 
    formData.append("choice", choice); 

    var xhr = new XMLHttpRequest(); 
    xhr.open("POST", "http://localhost:8086/g/choicehandler", true); 
    xhr.onreadystatechange = function (aEvt) { 
    if (xhr.readyState == 4 && xhr.status == 200){ 
     console.log("request 200-OK"); 
    } 
    else { 
     console.log("connection error"); 
    } 
    }; 
    xhr.send(formData); 
    //added this per Aaron Dufour's answer 
    return 0; 
}; 

</script> 

    </head> 
    <body> 

//changed onsubmit like this: onsubmit="return writeToStorage(); as per Aaron Dufour's answer 
<form name="choice_form" id="choice_form" action="/g/choicehandler" method="post" onsubmit="writeToStorage()"> 
    <textarea name="choice" rows="7" cols="50"></textarea><br /> 
    <input type="submit" value="submit your choice"> 
</form> 

    </body> 
</html>""")

UPDATE

見Aaron Dufour's answer的解決方案。

來源

2011-11-14 Zeynel

正如其他人說，你所訪問的form，當你想要的數據在textarea。如果您給textarea一個ID，那可能是最容易獲得其價值的方法。

經過多次討論，我們確定你根本不需要XHR。這是你的形式應該是什麼樣子：

<form name="choice_form" id="choice_form" action="/g/choicehandler" method="post" onsubmit="writeToStorage()"> 
    <textarea name="choice" rows="7" cols="50"></textarea><br /> 
    <input type="hidden" name="chooser" id="form_chooser" /> 
    <input type="submit" value="submit your choice"> 
</form>

而現在，我們使用的JavaScript功能編輯的形式允許它被提交前：

var count = 0; 

function writeToStorage() 
{ 
    var user = "user" + count; 
    count++; 
    localStorage.setItem("chooser", user); 

    document.getElementById("form_chooser").value = user; 
};

來源

2011-11-14 02:50:25

謝謝。這是我第一次測試它。但第二次和第三次所有的價值都再次缺席。我究竟做錯了什麼？ – Zeynel

此外，我仍然在日誌中看到xhr和表單數據。 – Zeynel

@Zeynel我不確定。你能用可能是罪魁禍首的代碼更新嗎？確保你做了一個硬刷新，所以你有新的頁面。 –

choice_form是<form>而不是<textarea>。
您需要給<textarea>一個ID並使用該ID。

來源

2011-11-14 02:07:47 SLaks

或者使用的textarea的名字：'document.choice_form .choice.value'會做。 – RobG

謝謝。關於問題第二部分的任何評論？ hxr有什麼問題？我一直在測試它，並且一次或兩次得到了應用程序中由xhr發送的值，但在每次嘗試中，表單發送的值始終存在。我究竟做錯了什麼。 – Zeynel

@Zeynel：您需要從提交處理程序返回false以防止默認操作。 – SLaks

可以使用正式訪問的形式：

document.forms['choice_form']

，或者也：

document.forms.choice_form

每種形態都有一個元素的集合，是所有的表單控件。您可以訪問他們幾乎相同的方式：

document.forms['choice_form'].elements['choice']

或

document.choice_form.choice

提供的名稱遵循有效的JavaScript標識符的規則。如果他們不這樣做，你需要使用方括號：

document['choice_form']['choice']

都返回一個參考名爲「choice_form」形式命名爲「選擇」的元素。因此，要獲得該值：

document.choice_form.choice.value

來源

2011-11-14 02:27:42 RobG

（這裏一些偉大的答案，但我還沒有看到一個讓這與你有什麼在一起......）

由於形式可以有多個輸入，您需要訪問特定的value。有幾個方法可以做到這一點，但最直接的可能是使用窗體的elements財產（只有形式有這個！）：

document.getElementById("choice_form").elements.choice.value

來源

2011-11-14 02:33:14 s4y

如何獲得textarea的價值？

回答

相關問題