'When Select Option is selected and submitted, it shows all option in hidden all the hidden text area text

I'm encountering two problems,

I have made a request form for my clients but when I submit the form and I get the email(testing the form) I see all the hidden text area text in the HTML email. For example, if I select the GM option from the select and submit it, in the email I will see the GM option plus the AGM option.
When I select and submit another category request from the form, I will get the hidden textarea text option in email too

Is there a fix for these two problems in encountering?

Here are the two codes from my send_mail.php

$usersGMGroup = nl2br($_POST["acc_GMGroup"]);                                       
$usersAGMGroup = nl2br($_POST["acc_AGMGroup"]);

Im using nl2br for making the codes in hidden textarea go in the next line.

$(function() {
  $("#groups").change(function() {
    //GM Group
    {
      if ($(this).val() == "GM") {
        $("#groups_GM").show();
        $("#acc_GMGroup").show();
      } else {
        $("#groups_GM").hide();
        $("#acc_GMGroup").hide();
      }
    }
    //AGM Group
    {
      if ($(this).val() == "AGM") {
        $("#groups_AGM").show();
        $("#acc_AGMGroup").show();
      } else {
        $("#groups_AGM").hide();
        $("#acc_AGMGroup").hide();
      }
    }
  });
});
$('#groups').trigger('change');

html,
body {
  min-height: 100%;
}

body,
div,
form,
input,
label {
  padding: 0;
  margin: 0;
  outline: none;
  font-family: Roboto, Arial, sans-serif;
  font-size: 15px;
  color: #666;
  line-height: 19px;
}

legend {
  color: #fff;
  background-color: #095484;
  padding: 3px 5px;
  font-size: 20px;
}

h1 {
  position: absolute;
  margin: 0;
  font-size: 36px;
  color: #fff;
  z-index: 2;
}

.testbox {
  display: flex;
  justify-content: center;
  align-items: center;
  height: inherit;
  padding: 20px;
}

form {
  width: 75%;
  padding: 20px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 0 50px 0 #095484;
}

.banner {
  position: relative;
  height: 300px;
  background-image: url("/New_Website/Walgreens Logo's/Walgreens New Logo/banner.png");
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.banner::after {
  content: "";
  background-color: rgba(0, 0, 0, 0.6);
  width: 100%;
  height: 100%;
}

input {
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 3px;
  font-size: 17px;
  font-weight: bold;
}

input {
  width: calc(100% - 10px);
  padding: 5px;
}

select {
  width: 100%;
  padding: 3px 0;
  background: transparent;
  font-size: 17px;
  font-weight: bold;
}

.hiddenField {
  display: none;
}

table.tb {
  border-collapse: collapse;
  width: 650px;
}

.tb th,
.tb td {
  padding: 6px;
  border: solid 1px #262626;
}

.tb th,
.tb td {
  color: #262626;
}

.tb th {
  background-color: lightblue;
}

textarea {
  white-space: pre;
  text-align: left;
  width: 650px;
}

span {
  text-decoration: underline;
}

div.a {
  text-indent: 50px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-6">
  <label for="userReqEmp">Requestor Name</label>
  <input type="text" class="form-control w-100" id="userReqEmp" name="userReqEmp" placeholder="Type Here...">
</div>
<div class="col-6">
  <label for="userNameEmp">Full Name</label>
  <input type="text" class="form-control w-100" id="userNameEmp" name="userNameEmp" placeholder="Type Here...">
</div>
<div class="col-6">
  <label for="userComEmp">Comments (Optional)</label>
  <textarea type="text" class="form-control w-100" id="userComEmp" name="userComEmp" rows="7" placeholder="Type Here..."></textarea>
</div>
<div class="col-6">
  <div class="row">
    <label class="col-12" for="userEIDEmp">Employee ID</label>
  </div>
  <div class="row">
    <div class="col-12">
      <input type="text" class="form-control w-100" id="userEIDEmp" name="userEIDEmp" placeholder="Type Here...">
    </div>
  </div>
  <div class="row">
    <label class="col-12" for="userOIDEmp">One ID</label>
  </div>
  <div class="row">
    <div class="col-12">
      <input type="text" class="form-control w-100" id="userOIDEmp" name="userOIDEmp" placeholder="Type Here...">
    </div>
  </div>
  <div class="row">
    <label class="col-12" for="userDateEmp">Start Date</label>
  </div>
  <div class="row">
    <div class="col-12">
      <input type="date" class="form-control w-100" id="userDateEmp" name="userDateEmp" placeholder="Type Here...">
    </div>
  </div>
</div>
<div class="col-6">
  <!-- style="visibility:hidden;" -->
  <!-- acc means account -->
  <!-- GM Group -->
  <textarea style="visibility:hidden;" class="textarea" id="acc_GMGroup" name="acc_GMGroup" rows="2">
            <u>Domain Group Access</u>
            AP
            FunctionManagers
            Managers

            <u>Distribution List</u>
            Woodland Mgmt
            WoodlandDCManager
            InboundManagers

            <u>Additional Access</u>
            DCNet
            AS400 (JOB-CAT-01)
            VPN Non-Standard
        </textarea>
</div>
<div class="col-6">
  <!-- style="visibility:hidden;" -->
  <!-- acc means account -->
  <!-- AGM Group -->
  <textarea style="visibility:hidden;" class="textarea" id="acc_AGMGroup" name="acc_AGMGroup" rows="2">
            <u>Domain Group Access</u>
            AP
            FunctionManagers
            Managers

            <u>Distribution List</u>
            Woodland Mgmt
            WoodlandDCManager
            InboundManagers

            <u>Additional Access</u>
            DCNet
            AS400 (JOB-CAT-01)
            VPN Non-Standard
        </textarea>
</div>
<!-- Main Selection -->
<div class="col-6">
  <div class="row">
    <label class="col-12">Select Department</label>
  </div>
  <div class="row">
    <div class="col-12">
      <select id="groups" name="groups" class="form-control w-100">
        <option selected value="">Select an option</option>
        <option value="GM">GM</option>
        <option value="AGM">AGM</option>
        <option value="AP">AP</option>
        <option value="IO">IO</option>
      </select>
    </div>
  </div>
  <br>
  <!-- GM -->
  <div class="row">
    <div class="col-12" id="groups_GM" name="groups_GM" style="display: none;">
      <h2>DC GM Group</h2>
      <table class="tb">
        <tr>
          <th>Domain Group Access</th>
          <!-- Title -->
        </tr>
        <tr>
          <td>AP<br>FunctionManagers<br>Managers</td>
          <!-- Content -->
        </tr>
        <tr>
          <th>Distribution List</th>
          <!-- Title -->
        </tr>
        <tr>
          <td>Woodland Mgmt<br>WoodlandDCManager<br>InboundManagers</td>
          <!-- Content -->
        </tr>
        <tr>
          <th>Additional Access</th>
          <!-- Title -->
        </tr>
        <tr>
          <td>DCNet<br>AS400 (JOB-CAT-01)<br>VPN Non-Standard</td>
          <!-- Content -->
        </tr>
      </table>
    </div>
  </div>
  <div class="row">
    <div class="col-12" id="groups_AGM" name="groups_AGM" style="display: none;">
      <h2>DC AGM Group</h2>
      <table class="tb">
        <tr>
          <th>Domain Group Access</th>
          <!-- Title -->
        </tr>
        <tr>
          <td>AP<br>FunctionManagers<br>Managers</td>
          <!-- Content -->
        </tr>
        <tr>
          <th>Distribution List</th>
          <!-- Title -->
        </tr>
        <tr>
          <td>Woodland Mgmt<br>WoodlandDCManager<br>InboundManagers</td>
          <!-- Content -->
        </tr>
        <tr>
          <th>Additional Access</th>
          <!-- Title -->
        </tr>
        <tr>
          <td>DCNet<br>AS400 (JOB-CAT-01)<br>VPN Non-Standard</td>
          <!-- Content -->
        </tr>
      </table>
    </div>
  </div>
</div>

Solution 1:^[1]

This will show the selector value chosen on form submit which should be useful in filtering out anything you don't want to be displayed in the email.

HTML

 <form method='post'>
 <select name='selector' required>
 <option value=''>Select from the list...</option>
 <option value='01'>First Value</option>
 <option value='02'>Second Value</option>
 <option value='03'>Third Value</option>
 </select>
 <button name='submit'>SUBMIT</button>
 </form>

PHP

 if (isset($_POST['submit'])) {
 $selector_data = "";
 $selector = $_POST['selector']; // Unprotected just to serve as working example
 if ($selector == "01") {
 $selector_data = " selector_data for first option chosen";
 }
 if ($selector == "02") {
 $selector_data = " selector_data for second option chosen";
 }
 if ($selector == "03") {
 $selector_data = " selector_data for third option chosen";
 }
 echo $selector.$selector_data;
 }

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	SJacks

'When Select Option is selected and submitted, it shows all option in hidden all the hidden text area text

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]