オプションが選択された場合に表示される非表示のフィールドがある場合、私のselect要素の値を取得できません

Question

私はさまざまなオプションを持つ選択フォーム要素を持っています。オプションの1つは「その他」です。したがって、「その他」を選択すると、ユーザがリストにない値を入力するための隠しフィールドが表示されます。すべてうまく動作します。問題は、ユーザーが他のオプションのいずれかを選択してフォームを送信したときに値が渡されない場合です。一方、「その他」オプションが選択され、テキストボックスを塗りつぶしてからフォームを送信すると、テキストボックスの値が渡されます。

が、これは選択と非表示のテキストフィールドです：

<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）。 name="memo"の要素を青色で表示するCSSルールを追加しました。青色の要素はサーバーに送信されます。

私はまた、あなたがここでそれをテストできるように、javascriptコードを展開しました。コードに// added for testing purposeの後にコードを含める必要はありません。 "run code snippet"をクリックし、送信ボタンを押してください。

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>