Как я могу получить значение текстовой области? - PullRequest
Новая
       1

Как я могу получить значение текстовой области?

1 голос
/ 14 ноября 2011

Это продолжение до моего другого вопроса .Я спрашиваю снова, потому что это кажется больше вопросом javascript, чем вопросом Google App Engine.

У меня есть форма 

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

, но я получил "undefined" для значения "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>""")

ОБНОВЛЕНИЕ

См. Ответ Аарона Дюфура для решения.

Ответы [ 4 ]

4 голосов
/ 14 ноября 2011

choice_form - это <form>, а не <textarea>.
Вам нужно дать <textarea> идентификатор и использовать вместо него этот идентификатор.

3 голосов
/ 14 ноября 2011

Вы можете получить доступ к форме формально, используя: 

document.forms['choice_form']

или также: 

document.forms.choice_form

Каждая форма имеет коллекцию elements , которая является всеми элементами управления формой. Вы можете получить к ним доступ практически таким же образом: 

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

или 

document.choice_form.choice

при условии, что имена соответствуют правилам для допустимых идентификаторов JavaScript. Если это не так, вам нужно использовать квадратную скобку: 

document['choice_form']['choice']

все возвращают ссылку на элемент с именем 'choice' в форме с именем 'choice_form'. Итак, чтобы получить значение: 

document.choice_form.choice.value
2 голосов
/ 14 ноября 2011

(Некоторые отличные ответы здесь, но я не видел ни одного, который бы связывал это с тем, что у вас есть ...)

Поскольку форма может иметь более одного ввода, вам необходимо получить доступ к valueконкретный.Есть несколько способов сделать это, но самым простым может быть использование свойства elements формы (это есть только у форм!): 

document.getElementById("choice_form").elements.choice.value
1 голос
/ 14 ноября 2011

Как уже говорили другие, вы получаете доступ к form, когда нужные вам данные находятся в textarea. Если вы дадите textarea идентификатор, это, вероятно, самый простой способ получить его значение.

После долгих обсуждений мы решили, что вам вообще не нужен 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;
};
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...