javascript - 提交时Textarea字段返回空

作为表格的一部分，我有一个简单的问题。如果用户回答"is"，则可以选择输入更多详细信息。

当用户确实回答"is"，并在textarea中输入更多详细信息时，在提交时返回空。我不知道为什么。我觉得这可能是我所缺少的小东西。

示例:https://jsfiddle.net/sq8awxyk/

HTML

<form>
  <div id="name-form">
    <label for="name"><strong>Is this the correct name?</strong></label>
    <input type="radio" value="yes" name="name-choice" />Yes
    <input type="radio" value="no" name="name-choice" />No
  </div>
  <input id="submit" type="submit" value="submit" />
</form>

jQuery

// Name Input
var nameFormLimit = 20;
var nameInput = 'input[name=name-choice]';
var nameInputValue = $('input[name=name-choice]:checked').val();
var response;

$(nameInput).on('click', function(e) {
  var nameInputValue = $('input[name=name-choice]:checked').val();
  if (nameInputValue === 'yes') {
    var nameDiv = document.getElementById('name-form');
    nameDiv.innerHTML = '<label for="name"><strong>Please type the correct name:</strong></label> ' +
      '<textarea id="textarea" name="name" rows="1" maxlength="' + nameFormLimit + '"></textarea> <div id="textarea_feedback"></div>';
    $('#textarea_feedback').html(nameFormLimit + ' characters remaining');
    $('#textarea').keyup(function() {
      var text_length = $('#textarea').val().length;
      var text_remaining = nameFormLimit - text_length;
      $('#textarea_feedback').html(text_remaining + ' characters remaining');
    });
    response = $('#textarea').val();
  } else if (nameInputValue === 'no') {
    response = nameInputValue;
  }
});

$('#submit').on('click', function(e) {
  alert(response);
  e.preventDefault();
});

最佳答案

您需要再次阅读文本区域的内容，并将其设置为Submit事件中的response变量，然后再使用它。

var response="";
$('#submit').on('click', function(e) {
  response = $('#textarea').val();
  alert(response);
  e.preventDefault();
});

Here是一个可工作的jsFiddle

或者您需要在文本区域的键入事件上设置响应变量值。

$(document).on("keyup","#textarea",function() {
  var text_length = $('#textarea').val().length;
  var text_remaining = nameFormLimit - text_length;
  $('#textarea_feedback').html(text_remaining + ' characters remaining');
  response = $('#textarea').val();
});

进行此更改后，您无需再次在Submit事件中读取它。

Here是一个有效的示例。

关于javascript - 提交时Textarea字段返回空，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34303262/