javascript - 当我有一个隐藏字段(如果选择一个选项时会显示该字段)时，我无法获取选择元素的值

Question

我有一个带有各种选项的选择表单元素。其中一个选项是“其他”。因此，当选择“其他”时，会显示一个隐藏字段，供用户输入列表中没有的值。一切都很好。问题是当用户选择任何其他选项并提交表单时，该值不会被传递。然而，如果选择“其他”选项并填充文本框然后提交表单，则传递文本框的值。

这是选择和隐藏文本字段:

<select name="memo" required class="newtxtbox" id="memo" onchange='checkvalue()'>
  <option disabled="disabled" selected="selected">Select</option>
  <option value="Donation for Bulletin">Bulletin</option>
  <option value="Donation for Care Ministry">Care Ministry</option>
  <option value="Donation for Cathedral Choir">Cathedral Choir</option>
  <option value="Donation for Other">Other - (please specify below) </option>
</select>

<input type="text" style="display:none" name="memo" id="other">

这是 JavaScript:

function checkvalue()       
{
    if(document.getElementById('memo').value == 'Donation for Other') {
               document.getElementById('other').style.display='block';
    }
    else {
       document.getElementById('other').style.display='none'; 
    }
}

我确信我错过了一些小东西，但不知道它是什么。

Answer 1

这是一个小型解决方法的直观示例。我所做的只是更改每个元素的 name 属性。我添加了一条 CSS 规则，将 name="memo" 元素显示为蓝色。蓝色元素将被发送到服务器。

我还扩展了 javascript 代码，以便您可以在此处进行测试。您不必在代码中的 //添加用于测试目的 之后包含代码。单击“运行代码片段”并尝试提交按钮。

function checkvalue() {
  var select = document.getElementById('memo');
  var input = document.getElementById('other');

  if (select.value == 'Donation for Other') {
    document.getElementById('other').style.display = 'block';
    select.name = '';
    input.name = 'memo'; // form `memo` will now contain this input 
  } else {
    document.getElementById('other').style.display = 'none';
    select.name = 'memo';
    input.name = '';
  }
}

// added for testing purpose
document.getElementById('test').addEventListener('submit', function(e) {
  e.preventDefault(); // no no submit

  // FormData is HTML5 js object that contains ... data from the form ...
  var fd = new FormData(this);

  // .entries() isn't widely supported yet.
  for (var tuple of fd.entries()) {
    console.log(tuple[0] + ' contains value "' + tuple[1] + '"');
  }
});

/* 
   added this for visibility of changes
    element that is blue is being sent
*/

input[name="memo"],
select[name="memo"] {
  background-color: lightblue;
}

<form id="test">
  <select name="memo" required class="newtxtbox" id="memo" onchange='checkvalue()'>
  <option disabled="disabled" selected="selected">Select</option>
  <option value="Donation for Bulletin">Bulletin</option>
  <option value="Donation for Care Ministry">Care Ministry</option>
  <option value="Donation for Cathedral Choir">Cathedral Choir</option>
  <option value="Donation for Other">Other - (please specify below) </option>
</select>

  <input type="text" style="display:none" id="other">

  <input type="submit" value="submit" />
</form>