Submit Pre Typed Text in table from PHP form to email-CodePudding

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" >
  <div >
    <h2>Requestor's Information&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;Employee's Information</h2>
    <hr>
    <div >
      <div >
        <label for="userReqEmp">Requestor Name</label>
        <input type="text"  id="userReqEmp" name="userReqEmp" placeholder="Type Here...">
      </div>
      <div >
        <label for="userNameEmp">Full Name</label>
        <input type="text"  id="userNameEmp" name="userNameEmp" placeholder="Type Here...">
      </div>
      <div >
        <label for="userComEmp">Comments (Optional)</label>
        <textarea type="text"  id="userComEmp" name="userComEmp" rows="7" placeholder="Type Here..."></textarea>
      </div>
      <div >
        <div >
          <label  for="userEIDEmp">Employee ID</label>
        </div>
        <div >
          <div >
            <input type="text"  id="userEIDEmp" name="userEIDEmp" placeholder="Type Here...">
          </div>
        </div>
        <div >
          <label  for="userOIDEmp">One ID</label>
        </div>
        <div >
          <div >
            <input type="text"  id="userOIDEmp" name="userOIDEmp" placeholder="Type Here...">
          </div>
        </div>
        <div >
          <label  for="userDateEmp">Start Date</label>
        </div>
        <div >
          <div >
            <input type="date"  id="userDateEmp" name="userDateEmp" placeholder="Type Here...">
          </div>
        </div>
        <div >
          <label >Select Department</label>
        </div>
        <div >
          <div >
            <select id="groups" name="groups" >
              <option value="">Select an option</option>
              <option value="GM">GM</option>
              <option value="AGM">AGM</option>
            </select>
          </div>
        </div>
        <br>
        <!-- GM -->
        <div >
          <div  id="groups_GM" name="groups_GM" style="display: none;">
            <h2>DC GM Group</h2>
            <table >
              <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 >
          <div >
            <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>

CodePudding user response：

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  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');
}