將表格中的預鍵入文本從PHP表單提交到電子郵件-有解無憂

我有一個請求表格，其中有一個帶有預輸入文本的表格（屬于 HR 表格中的其他欄位），該表格位于隱藏/顯示選擇選項中。我需要一些幫助，當用戶選擇所選內容時，它會顯示一個帶有預輸入文本的表格，并且當用戶以 PHP 表單提交時，收件人會在電子郵件中獲得準確的資料。

我有隱藏/顯示部分作業，但我在發送帶有文本的表格時遇到問題。

我有$usersGMGroup = nl2br($_POST["acc_GMGroup"]); 所以我可以讓文本可以轉到下一行。

目前，我沒有任何方法可以提交表格，因此我在 textarea 中撰寫了相同的表格文本，這可以作業，但是當我提交帶有資料的表單并且收件人通過其他請求獲取 textarea 文本時。例如，如果我發送了 IT 服務請求，表單還會發送 textarea 預輸入文本。

有什么方法可以使帶有預輸入文本的文本區域僅在選擇其選擇時提交

$(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>

uj5u.com熱心網友回復：

您可以通過向其添加disabled屬性來默認禁用它，這將阻止該欄位與表單的其余部分一起提交

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

并在選擇選項時重新啟用它

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/443373.html

標籤：javascript php html jQuery css

上一篇：在不重繪頁面的情況下制作crud

下一篇：當我使用jquery懸停不同的父div類時，如何定位div類中的id？