CODEWITHSUNDEEP
javascriptjqueryhtmlforms
Agbogidi Michael
Agbogidi Michael

Reputation: 137

I can't get the value of my select element when i have a hidden field that is revealed if an option is selected

I have a select form element with various options. One of the options is "other". So when "other" is selected a hidden field is displayed for the user to enter the value not on the list. All that works fine. The problem is when a user selects any of the other options and submits the form, the value is not passed. Whereas, if the "other" option is selected and fills the text box then submits the form, the value of the text box is passed.

this is the select and the hidden text field: 

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

and this is JavaScript:

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

I am sure i am missing something small but can't figure out what it is.

Upvotes: 0

Views: 428

Answers (1)

KarelG
KarelG

Reputation: 5244

Here is a visual example of a small workaround. What I did was simply changing the name attribute of each element. I have added a CSS rule that displays the element with name="memo" as blue. The element that is blue will be sent to the server.

I have also expanded the javascript code so that you can test it out here on SO. You don't have to include the code after // added for testing purpose in your code. Click on "run code snippet" and try the submit button.

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>

Upvotes: 1

Related Questions