簡體   English   中英

將表中的預鍵入文本從 PHP 表格提交到 email

[英]Submit Pre Typed Text in table from PHP form to email

我有一個申請表,其中有一個帶有預輸入文本的表格(屬於 HR 表格中的其他字段),隱藏/顯示 select 選項。 我需要一些幫助,當用戶選擇所選內容時,它會顯示一個帶有預輸入文本的表格,當用戶以 PHP 表單提交時,收件人會在 email 中獲得准確的數據。

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

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

目前,我沒有任何方法可以提交表格,所以我在 textarea 中編寫了相同的表格文本,這有效,但是當我提交帶有數據的表單並且收件人通過另一個請求獲得 textarea 文本時。 例如,如果我發送了一個 IT 服務請求,表單也會發送 textarea 前置文本。

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

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

您可以通過向其添加disabled屬性來默認禁用它,這將阻止該字段與表單的 rest 一起提交

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

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM