2011-11-14 5 views
1

다음은 최대 my other question입니다. 이 질문은 Google App Engine 질문보다 javascript 질문이 더 많으므로 다시 묻습니다.텍스트 영역의 가치를 얻으려면 어떻게해야합니까?

나는 내가이 textarea의 값을 가지고 formData와 응용 프로그램에 보낼 형태를

<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> 

있습니다. 나는 이것을 시도했다

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

그러나 나는 "선택"의 값으로 "undefined"를 얻는다. 내가 도대체 ​​뭘 잘못하고있는 겁니까?

또한 올바르게 이해하면 /g/choicehandler은 양식에서 한 번, XHR에서 한 번 두 번 호출됩니다. 어떻게 수정해야합니까?

이 솔루션 Aaron Dufour's answer 참조

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 : 다음은 핸들러입니다.

답변

1

, 당신은 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> 

그리고 지금, 우리는 양식을 편집 할 자바 스크립트 함수를 사용합니다 :

var count = 0; 

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

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

감사합니다. 이것은 처음으로 테스트 해 보았습니다. 그러나 두 번째와 세 번째로 모든 가치는 다시 결석했습니다. 내가 도대체 ​​뭘 잘못하고있는 겁니까? – Zeynel

+0

또한 로그에서 xhr 및 양식 데이터를 볼 수 있습니다. – Zeynel

+0

@Zeynel 잘 모르겠습니다. 범인이 될 수있는 코드로 업데이트 할 수 있습니까? 새로운 페이지를 갖기 위해 열심히 새로 고침하십시오. –

4

choice_form<textarea>이 아니라 <form>입니다.
<textarea>에게 ID를 부여하고 대신 해당 ID를 사용해야합니다.

+2

또는 텍스트 영역의 이름 사용'document.choice_form을 여기에 양식이 어떻게 보일지입니다 .choice.value'가됩니다. – RobG

+0

감사합니다. 질문의 두 번째 부분에 대한 의견? hxr는 무엇이 잘못 되었습니까? 나는 그것을 테스트 해왔다. 그리고 한 두번 나는 값을 애플리케이션에서 xhr로 보냈지 만 모든 시도에서 폼이 보낸 값은 항상 존재한다. 내가 도대체 ​​뭘 잘못하고있는 겁니까. – Zeynel

+0

@Zeynel : 기본 동작을 방지하기 위해 제출 처리기에서'false '를 반환해야합니다. – SLaks

3

는 다음을 사용하여 정식 양식에 액세스 할 수 있습니다 또한

document.forms['choice_form'] 

또는 :

document.forms.choice_form 

각 양식은 모든 폼 컨트롤 인 요소 컬렉션이 있습니다.

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

또는

document.choice_form.choice 

는 이름이 유효한 자바 스크립트 식별자에 대한 규칙을 따라야 제공 : 당신은 그들에게 거의 같은 방식으로 액세스 할 수 있습니다.
document['choice_form']['choice'] 

모든

이름 'choice_form'와 형태로 '선택'이라는 요소에 대한 참조를 반환 : 그렇지 않은 경우, 당신은 대괄호 표기법을 사용해야합니다. 그래서 값을 얻을 수 있습니다 :

document.choice_form.choice.value 
2

(여기에 몇 가지 큰 응답을,하지만 난 함께 당신이 무슨과를두고 한 ... 보지 못했다)

을 한 형태가 하나 개 이상의 입력을 가질 수 있기 때문에, 특정 번호의 value에 액세스해야합니다. (단 형태이있다!)가이 작업을 수행 할 수있는 몇 가지 방법이 있지만 가장 간단한 양식의 elements 속성을 사용하는 수 있습니다 :

다른 사람이 말했듯이
document.getElementById("choice_form").elements.choice.value 
관련 문제