Submit Pre Typed Text in table from PHP form to email

Question

I have a request form in which I have a table with pre-typed text (which belongs to other field in form in HR) which is in hide/show select option. I need some help in which when the user selects the selected it shows a table with pre-typed text and when the user submits in PHP form, the recipient so gets the exact data in the email.

I have the hide/show part working but the I'm having problems sending the table with text.

i have $usersGMGroup = nl2br($_POST["acc_GMGroup"]); so i can have the text can go to next line.

Currently, I didn't have any way in which I could submit the table so I have the same table text written in textarea, which works but when I submit the form with data and the recipient gets textarea text with the other request. For example, if I sent a request for an IT service the form also sends the textarea pre type text.

Is there any way i can make the textarea with pre type text only submit when its select is selected

 $(function() { $("#groups").change(function() { if ($(this).val() == "GM") { $("#groups_GM").show(); $("#acc_GMGroup").show(); } else { $("#groups_GM").hide(); $("#acc_GMGroup").hide(); } }); }); $('#groups').trigger('change'); //---------------------Hide Functions When Program Loads--------------------------------// $(document).ready(function() { $("#acc_GMGroup").hide(); });

 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(""); 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; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form name="frmContact" id="frmContact" method="post" action="" enctype="multipart/form-data" class="p-3"> <div class="form-group"> <h2>Requestor's Information&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;Employee's Information</h2> <hr> <div class="row"> <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 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 value="">Select an option</option> <option value="GM">GM</option> <option value="AGM">AGM</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>PUBLIC<br>FunctionManagers<br>Managers</td> <!-- Content --> </tr> <tr> <th>Distribution List</th> <!-- Title --> </tr> <tr> <td>Woodland Mgmt<br>DCManager<br>InboundManagers<br>SrManager</td> <!-- Content --> </tr> <tr> <th>Additional Access</th> <!-- Title --> </tr> <tr> <td>DCNet<br>AS400<br>VPN Non-Standard</td> <!-- Content --> </tr> </table> </div> </div> <div class="row"> <div class="col-6"> <textarea class="textarea" id="acc_GMGroup" name="acc_GMGroup"> <u>Domain Group Access</u> PUBLIC FunctionManagers Managers <u>Distribution List</u> Woodland Mgmt DCManager InboundManagers SrManagers <u>Additional Access</u> DCNet AS400 VPN Non-Standard </textarea> </div> </div> </div> <!-- End of Right Side --> </div> </div> </form>

Answer 1

you can have it disabled by default by adding disabled attribute to it which will prevent the field from being submitted with the rest of the form

<textarea class="textarea" id="acc_GMGroup" name="acc_GMGroup" disabled>
  <u>Domain Group Access</u>
  PUBLIC
  FunctionManagers
  Managers

  <u>Distribution List</u>
  Woodland Mgmt
  DCManager
  InboundManagers
  SrManagers
                                        
  <u>Additional Access</u>
  DCNet
  AS400
  VPN Non-Standard
</textarea>

and re-enable it when option selected

if ($(this).val() == "GM") {
  $("#groups_GM").show();
  $("#acc_GMGroup").show();
  $("#acc_GMGroup").prop('disabled','');

} else {
  $("#groups_GM").hide();
  $("#acc_GMGroup").hide();
  $("#acc_GMGroup").prop('disabled','disabled');
}