如何在单击提交时以表格形式(自定义)显示电子邮件中的表格数据

xoshrz7s  于 2021-09-23  发布在  Java
关注(0)|答案(0)|浏览(338)

如何在单击提交时以表格形式（自定义）显示电子邮件中的表格数据。我已经创建了数据应该如何显示的表，但它不起作用。目前，我正在尝试保存用户在表单中提交的任何内容，但在单击“发送”按钮时，它甚至没有尝试发送表单。

< script type = "text/javascript" >
  $(function() {
    $("form").submit(function(e) {
      $(this).children(':hidden').remove();
    });
    // listen for changes
    $('input[type="radio"]').on('change', function() {
      // get checked one
      var $target = $('input[type="radio"]:checked');
      // hide all divs with .showhide class
      $(".showhide").hide();
      // show div that corresponds to selected radio.
      $($target.attr('data-section')).show();
      // trigger the change on page load
    }).trigger('change');
  }); <
/script> <
script >
  $("form").submit(function(e) {
    $(this).children(':hidden').remove();
  }); <
/script>
<style>html,
body {
  min-height: 100%;
}

body,
div,
form,
input,
select,
textarea,
p {
  padding: 0;
  margin: 0;
  outline: none;
  font-family: Roboto, Arial, sans-serif;
  font-size: 14px;
  color: #666;
  line-height: 22px;
}

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

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

h5 {
  margin: 10px 0;
}

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

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

.banner {
  position: relative;
  height: 210px;
  background-image: url();
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  content: "";
  background-color: rgba(0, 0, 0, 0.5);
}

input,
select,
textarea {
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 3px;
}

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

select {
  width: 100%;
  padding: 7px 0;
  background: transparent;
}

textarea {
  width: calc(100% - 12px);
  padding: 5px;
}

.item:hover p,
.item:hover i,
.question:hover p,
.question label:hover,
input:hover::placeholder,
a {
  color: #095484;
}

.item input:hover,
.item select:hover,
.item textarea:hover {
  border: 1px solid transparent;
  box-shadow: 0 0 6px 0 #095484;
  color: #095484;
}

input[type="date"]::-webkit-inner-spin-button {
  display: none;
}

.showhide {
  display: none;
}

.item i,
input[type="date"]::-webkit-calendar-picker-indicator {
  position: absolute;
  font-size: 20px;
  color: #a9a9a9;
}

.item i {
  right: 2%;
  top: 30px;
  z-index: 1;
}

[type="date"]::-webkit-calendar-picker-indicator {
  right: 1%;
  z-index: 2;
  opacity: 0;
  cursor: pointer;
}

input[type=radio],
input[type=checkbox] {
  display: none;
}

label.radio,
label.check {
  position: relative;
  display: inline-block;
  margin: 5px 20px 15px 0;
  cursor: pointer;
}

.question span {
  margin-left: 30px;
}

span.required {
  margin-left: 0;
  color: red;
}

.checkbox-item label {
  margin: 5px 20px 10px 0;
}

label.radio:before,
label.check:before {
  content: "";
  position: absolute;
  left: 0;
}

label.radio:before {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  border: 2px solid #095484;
}

label.check:before {
  top: 2px;
  width: 16px;
  height: 16px;
  border-radius: 2px;
  border: 1px solid #095484;
}

input[type=checkbox]:checked+.check:before {
  background: #095484;
}

label.radio:after {
  left: 5px;
  border: 3px solid #095484;
}

label.check:after {
  left: 4px;
  border: 3px solid #fff;
}

label.radio:after,
label.check:after {
  content: "";
  position: absolute;
  top: 6px;
  width: 8px;
  height: 4px;
  background: transparent;
  border-top: none;
  border-right: none;
  transform: rotate(-45deg);
  opacity: 0;
}

input[type=radio]:checked+label:after,
input[type=checkbox]:checked+label:after {
  opacity: 1;
}

.btn-block {
  margin-top: 10px;
  text-align: center;
}

button {
  width: 200px;
  padding: 10px;
  border: none;
  border-radius: 5px;
  background: #095484;
  font-size: 16px;
  color: #fff;
  cursor: pointer;
}

button:hover {
  background: #0666a3;
}

@media (min-width: 568px) {
  .city-item {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .city-item input {
    width: calc(50% - 20px);
  }
  .city-item select {
    width: calc(50% - 8px);
  }
}

</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="testbox">
  <form action="mailto:someone@example.com" method="post" enctype="text/plain">
    <div class="banner">
      <h1>Employment Form</h1>
    </div><br>
    <p>Please fill out with the information that is requested below and submit the employment verification form. Thank you!</p>
    <br>
    <div class="question">
      <fieldset>
        <legend>Employee Status</legend>
        <p>Choose Employee Status:<span class="required">*</span></p>
        <div class="question-answer">
          <input type="radio" value="none" id="radio_1" name="investigator" data-section="#div-1" />
          <label for="radio_1" class="radio"><span>New Hire</span></label>
          <br>
          <input type="radio" value="none" id="radio_2" name="investigator" data-section="#div-2" />
          <label for="radio_2" class="radio"><span>Upgrade Credentials to DCS</span></label>
          <br>
          <input type="radio" value="none" id="radio_3" name="investigator" data-section="#div-3">
          <label for="radio_3" class="radio"><span>Return to Work</span></label>
          <br>
          <input type="radio" value="none" id="radio_4" name="investigator" data-section="#div-4">
          <label for="radio_4" class="radio"><span>Terminate Access DCS or Above</span></label>
          <br>
          <input type="radio" value="none" id="radio_5" name="investigator" data-section="#div-5">
          <label for="radio_5" class="radio"><span>Terminate Access TM AS400</span></label>
        </div>
      </fieldset>
    </div>
    <br>
    <!---New Hire Option -->
    <div class="showhide" id="div-1">
      <fieldset>
        <legend>Employee Information</legend>
        <label for="text_1" class="text">Enter Employee Full Name:</label>
        <input type="text" value="" id="text_1" placeholder="Enter First & Last Name" name="name">
        <br>
        <label for="text_2" class="text">One ID & Employee ID:</label>
        <input type="text" value="" id="text_2" placeholder="Enter One ID & Employee ID" name="name">
        <br>
        <p>Date</p>
        <input type="datetime-local" name="bdate">
        <p>Department</p>
        <select>
          <option selected value="" disabled selected>Department</option>
          <option value="1">HR</option>
          <option value="2">AP</option>
          <option value="3">SC-AM</option>
          <option value="4">SC-PM</option>
          <option value="5">FC-AM</option>
          <option value="6">FC-PM</option>
          <option value="7">INB-AM</option>
          <option value="8">INB-PM</option>
          <option value="9">IO</option>
          <option value="10">Maintenace</option>
          <option value="11">Shipping-AM</option>
          <option value="12">Shipping-PM</option>
          <option value="13">Computer Room</option>
        </select>
        <p>User On-Boarding Notification Info:</p>
        <textarea rows="4"></textarea>
        <br>
        <fieldset>
          <legend>I/O or Manager Approved</legend>
          <label for="text_6" class="text">Enter I/O or Manager Email Address:</label>
          <input type="text" value="" id="text_6" placeholder="Enter Email Address" name="name">
        </fieldset>
      </fieldset>
      <br>
      <div class="question">
        <fieldset>
          <legend>Additional Access/Accessories</legend>
          <p>Select All That Apply:</p>
          <div class="question-answer checkbox-item">
            <div>
              <input type="checkbox" value="none" id="check_1" name="checklist">
              <label for="check_1" class="check"><span>Full DCS Access : DC NET, Email Lists, K Drive, AS400, Shared, etcDrive,</span></label>
            </div>
            <div>
              <input type="checkbox" value="none" id="check_2" name="checklist">
              <label for="check_2" class="check"><span>Laptop</span></label>
            </div>
            <div>
              <input type="checkbox" value="none" id="check_3" name="checklist">
              <label for="check_3" class="check"><span>Phone</span></label>
            </div>
            <div>
              <input type="checkbox" value="none" id="check_4" name="checklist">
              <label for="check_4" class="check"><span>Office Space</span></label>
            </div>
            <div>
              <input type="checkbox" value="none" id="check_5" name="checklist">
              <label for="check_5" class="check"><span>Computer Setup/Verify in Location</span></label>
            </div>
          </div>
        </fieldset>
      </div>
      <br>
      <fieldset>
        <legend>Additional Comments</legend>
        <label for="text_6" class="text">Please briefly describe your concern:</label>
        <input type="text" value="" id="text_6" placeholder="Enter Additional Comments Here" name="name">
      </fieldset>
    </div>

    <!---Upgrade Creditials Option -->
    <div class="showhide" id="div-2">
      <fieldset>
        <legend>Employee Information</legend>
        <label for="text_1" class="text">Enter Employee Full Name:</label>
        <input type="text" value="" id="text_1" placeholder="Enter First & Last Name" name="name">
        <br>
        <label for="text_2" class="text">One ID & Employee ID:</label>
        <input type="text" value="" id="text_2" placeholder="Enter One ID & Employee ID" name="name">
        <br>
        <p>Date</p>
        <input type="datetime-local" name="bdate">
        <br>
        <p>Department</p>
        <select>
          <option selected value="" disabled selected>Department</option>
          <option value="1">HR</option>
          <option value="2">AP</option>
          <option value="3">SC-AM</option>
          <option value="4">SC-PM</option>
          <option value="5">FC-AM</option>
          <option value="6">FC-PM</option>
          <option value="7">INB-AM</option>
          <option value="8">INB-PM</option>
          <option value="9">IO</option>
          <option value="10">Maintenace</option>
          <option value="11">Shipping-AM</option>
          <option value="12">Shipping-PM</option>
          <option value="13">Computer Room</option>
        </select>
        <br>
        <fieldset>
          <legend>I/O or Manager Approved</legend>
          <label for="text_6" class="text">Enter I/O or Manager Email Address:</label>
          <input type="text" value="" id="text_6" placeholder="Enter Email Address" name="name">
        </fieldset>
        <br>
        <div class="question">
          <fieldset>
            <legend>Additional Access/Accessories</legend>
            <p>Select All That Apply:</p>
            <div class="question-answer checkbox-item">
              <div>
                <input type="checkbox" value="none" id="check_1" name="checklist">
                <label for="check_1" class="check"><span>Full DCS Access : DC NET, Email Lists, K Drive, AS400, Shared, etcDrive,</span></label>
              </div>
              <div>
                <input type="checkbox" value="none" id="check_2" name="checklist">
                <label for="check_2" class="check"><span>Laptop</span></label>
              </div>
              <div>
                <input type="checkbox" value="none" id="check_3" name="checklist">
                <label for="check_3" class="check"><span>Phone</span></label>
              </div>
              <div>
                <input type="checkbox" value="none" id="check_4" name="checklist">
                <label for="check_4" class="check"><span>Office Space</span></label>
              </div>
              <div>
                <input type="checkbox" value="none" id="check_5" name="checklist">
                <label for="check_5" class="check"><span>Computer Setup/Verify in Location</span></label>
              </div>
            </div>
          </fieldset>
        </div>
        <br>
        <fieldset>
          <legend>Additional Comments</legend>
          <label for="text_6" class="text">Please briefly describe your concern:</label>
          <input type="text" value="" id="text_6" placeholder="Enter Additional Comments Here" name="name">
        </fieldset>
      </fieldset>
    </div>

    <!---Return to Work Option -->
    <div class="showhide" id="div-3">
      <fieldset>
        <legend>Employee Information</legend>
        <label for="text_1" class="text">Enter Employee Full Name:</label>
        <input type="text" value="" id="text_1" placeholder="Enter First & Last Name" name="name">
        <br>
        <label for="text_2" class="text">One ID & Employee ID:</label>
        <input type="text" value="" id="text_2" placeholder="Enter One ID & Employee ID" name="name">
        <br>
        <p>Department</p>
        <select>
          <option selected value="" disabled selected>Department</option>
          <option value="1">HR</option>
          <option value="2">AP</option>
          <option value="3">SC-AM</option>
          <option value="4">SC-PM</option>
          <option value="5">FC-AM</option>
          <option value="6">FC-PM</option>
          <option value="7">INB-AM</option>
          <option value="8">INB-PM</option>
          <option value="9">IO</option>
          <option value="10">Maintenace</option>
          <option value="11">Shipping-AM</option>
          <option value="12">Shipping-PM</option>
          <option value="13">Computer Room</option>
        </select>
        <br>
        <fieldset>
          <legend>I/O or Manager Approved</legend>
          <label for="text_6" class="text">Enter I/O or Manager Email Address:</label>
          <input type="text" value="" id="text_6" placeholder="Enter Email Address" name="name">
        </fieldset>
        <br>
        <div class="question">
          <fieldset>
            <legend>Additional Access/Accessories</legend>
            <p>Select All That Apply:</p>
            <div class="question-answer checkbox-item">
              <div>
                <input type="checkbox" value="none" id="check_1" name="checklist">
                <label for="check_1" class="check"><span>Full DCS Access : DC NET, Email Lists, K Drive, AS400, Shared, etcDrive,</span></label>
              </div>
              <div>
                <input type="checkbox" value="none" id="check_2" name="checklist">
                <label for="check_2" class="check"><span>Laptop</span></label>
              </div>
              <div>
                <input type="checkbox" value="none" id="check_3" name="checklist">
                <label for="check_3" class="check"><span>Phone</span></label>
              </div>
              <div>
                <input type="checkbox" value="none" id="check_4" name="checklist">
                <label for="check_4" class="check"><span>Office Space</span></label>
              </div>
              <div>
                <input type="checkbox" value="none" id="check_5" name="checklist">
                <label for="check_5" class="check"><span>Computer Setup/Verify in Location</span></label>
              </div>
            </div>
          </fieldset>
        </div>
        <br>
        <fieldset>
          <legend>Additional Comments</legend>
          <label for="text_6" class="text">Please briefly describe your concern:</label>
          <input type="text" value="" id="text_6" placeholder="Enter Additional Comments Here" name="name">
        </fieldset>
        <fieldset>
          <legend>Employee Submitting</legend>
          <label for="text_6" class="text">Please enter your email:</label>
          <input type="text" value="" id="text_6" placeholder="Enter Additional Comments Here" name="name">
        </fieldset>
      </fieldset>
    </div>

    <!---Terminate DCS or I/O Option -->
    <div class="showhide" id="div-4">
      <fieldset>
        <legend>Employee Information</legend>
        <label for="text_3" class="text">Enter I/O or DCS Full Name:</label>
        <input type="text" value="" id="text_3" placeholder="Enter I/O or DCS Full Name" name="name">
        <br>
        <label for="text_2" class="text">One ID & Employee ID:</label>
        <input type="text" value="" id="text_2" placeholder="Enter One ID & Employee ID" name="name">
        <br>
        <p>Termination Date:</p>
        <input type="datetime-local" name="bdate">
        <br>
        <p>Department</p>
        <select>
          <option selected value="" disabled selected>Department</option>
          <option value="1">HR</option>
          <option value="2">AP</option>
          <option value="3">SC-AM</option>
          <option value="4">SC-PM</option>
          <option value="5">FC-AM</option>
          <option value="6">FC-PM</option>
          <option value="7">INB-AM</option>
          <option value="8">INB-PM</option>
          <option value="9">IO</option>
          <option value="10">Maintenace</option>
          <option value="11">Shipping-AM</option>
          <option value="12">Shipping-PM</option>
          <option value="13">Computer Room</option>
        </select>
        <br>
        <fieldset>
          <legend>I/O or Manager Approved</legend>
          <label for="text_6" class="text">Enter I/O or Manager Email Address:</label>
          <input type="text" value="" id="text_6" placeholder="Enter Email Address" name="name">
        </fieldset>
        <br>
        <fieldset>
          <legend>Additional Comments</legend>
          <label for="text_6" class="text">Please briefly describe your concern:</label>
          <input type="text" value="" id="text_6" placeholder="Enter Additional Comments Here" name="name">
        </fieldset>
      </fieldset>
    </div>

    <!---Terminate TM Option -->
    <div class="showhide" id="div-5">
      <fieldset>
        <legend>Employee Information</legend>
        <label for="text_4" class="text">Enter TM Full Name</label>
        <input type="text" value="" id="text_4" placeholder="Enter TM Full Name" name="Terminated TM Name ">
        <br>
        <label for="text_2" class="text">One ID & Employee ID</label>
        <input type="text" value="" id="text_2" placeholder="Enter One ID & Employee ID" name="One ID & Employee ID ">
        <br>
        <p>Termination Date:</p>
        <input type="datetime-local" name="Terminated Date ">
        <br>
        <fieldset>
          <legend>DCS Approved</legend>
          <label for="text_7" class="text">Enter DCS Email Address</label>
          <input type="text" value="" id="text_7" placeholder="Enter Email Address" name="DCS Email ">
        </fieldset>
        <br>
        <fieldset>
          <legend>Additional Comments</legend>
          <label for="text_6" class="text">Please briefly describe your concern</label>
          <input type="text" value="" id="text_6" placeholder="Enter Additional Comments Here" name="Additional Comments ">
        </fieldset>
      </fieldset>
    </div>
    <br>
    <fieldset>
      <legend>Employee Submitting Form</legend>
      <label for="text_001" class="text">Employee Enter Your Email</label>
      <input type="text" value="" id="text_001" placeholder="Employee Enter Your Email:" name="Employee Submitted Form ">
    </fieldset>
    <div class="btn-block">
      <button type="submit" href="/">Submit Your Request</button>
    </div>
  </form>
</div>

接收机工作台的设计

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
</head>

<body>
<table border="0" width="100%" cellspacing="0" cellpadding="0" bgcolor="#f7f9fc">
<tbody>
<tr>
<td height="30">&nbsp;</td>
</tr>
<tr>
<td align="center">
<table style="width: 900px;" border="0" cellspacing="0" cellpadding="0" bgcolor="#eeeeee">
<tbody>
<tr>
<td style="width: 5px;" bgcolor="#EEEEEE">&nbsp;</td>
<td style="width: 211px;" bgcolor="#C6D0D6" height="36"><img src="" alt="" width="205" height="55" /></td>
<td style="font-size: 16px; vertical-align: middle; color: #f9922b; padding-top: 2px; line-height: 20px; width: 976px; text-align: center;" align="left" bgcolor="#C6D0D6"><strong><span style="color: #000000; font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif, Arial, sans-serif; font-size: 21px; text-align: center; white-space: pre-wrap; background-color: #C6D0D6;">Woodland IT On/Off Boarding Request Form</span></strong></td>
</tr>
</tbody>
</table>
<table border="0" width="900" cellspacing="0" cellpadding="0" bgcolor="#eeeeee">
<tbody>
<tr>
<td bgcolor="#EEEEEE" width="4">&nbsp;</td>
<td align="center" bgcolor="#FFFFFF">
<table id="emailFieldsTable" class="mceNonEditable" border="0" width="100%" cellspacing="0" cellpadding="5">
<tbody id="emailFieldsTableBody">
<span style="font-family: 'Roboto, Arial, sans-serif'"><span style="font-size: 15pt"><tr><td><span style="color: #333333"><span style="font-size: 12pt">Employee Status</span></span></td><td>{$newhire}{$upgrade}{$returnwork}{$termdcs}{$termtm}</td></tr> </span></span>
<span style="font-family: 'Roboto, Arial, sans-serif'"><span style="font-size: 15pt"><tr><td><span style="color: #333333"><span style="font-size: 12pt">Employee/TM Name</span></span></td><td>{$userNewname}</td></tr></span></span>
<span style="font-family: 'Roboto, Arial, sans-serif'"><span style="font-size: 15pt"><tr><td><span style="color: #333333"><span style="font-size: 12pt">Terminated IO/DCS Name</span></span></td><td>{$userDCS}</td></tr></span></span>
<span style="font-family: 'Roboto, Arial, sans-serif'"><span style="font-size: 15pt"><tr><td><span style="color: #333333"><span style="font-size: 12pt">Terminated TM Name</span></span></td><td>{$userTM}</td></tr></span></span>
<span style="font-family: 'Roboto, Arial, sans-serif'"><span style="font-size: 15pt"><tr><td><span style="color: #333333"><span style="font-size: 12pt">Employee ID &amp; One ID</span></span></td><td>{$userOneid}</td></tr></span></span>
<span style="font-family: 'Roboto, Arial, sans-serif'"><span style="font-size: 15pt"><tr><td><span style="color: #333333"><span style="font-size: 12pt">Start Date</span></span></td><td>{$dates}</td></tr></span></span>
<span style="font-family: 'Roboto, Arial, sans-serif'"><span style="font-size: 15pt"><tr><td><span style="color: #333333"><span style="font-size: 12pt">User On-Boarding Notification Info</span></span></td><td>{$userContent}</td></tr></span></span>
<span style="font-family: 'Roboto, Arial, sans-serif'"><span style="font-size: 15pt"><tr><td><span style="color: #333333"><span style="font-size: 12pt">Departments</span></span></td><td>{$departments}</td></tr></span></span>
<span style="font-family: 'Roboto, Arial, sans-serif'"><span style="font-size: 15pt"><tr><td><span style="color: #333333"><span style="font-size: 12pt">IO/Manager Email Address</span></span></td><td>{$userIOemail}</td></tr></span></span>
<span style="font-family: 'Roboto, Arial, sans-serif'"><span style="font-size: 15pt"><tr><td><span style="color: #333333"><span style="font-size: 12pt">Select All That Apply</span></span></td><td>{$check_1}{$check_2}{$check_3}{$check_4}{$check_5}</td></tr></span></span>
<span style="font-family: 'Roboto, Arial, sans-serif'"><span style="font-size: 15pt"><tr><td><span style="color: #333333"><span style="font-size: 12pt">Comments</span></span></td><td>{$userComments}</td></tr></span></span>
<span style="font-family: 'Roboto, Arial, sans-serif'"><span style="font-size: 15pt"><tr><td><span style="color: #333333"><span style="font-size: 12pt">Employee Submitted</span></span></td><td>{$userEmail}</td></tr></span></span>

</tbody>
</table>
</td>
<td bgcolor="#EEEEEE" width="4">&nbsp;</td>
</tr>
<tr>
<td style="font-size: 4px;" bgcolor="#EEEEEE" height="4">&nbsp;</td>
<td style="font-size: 4px;" bgcolor="#EEEEEE">&nbsp;</td>
<td style="font-size: 4px;" bgcolor="#EEEEEE">&nbsp;</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td height="20">&nbsp;</td>
</tr>
</tbody>
</table>
</body>

</html>

暂无答案！

目前还没有任何答案，快来回答吧！

我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com