簡體   English   中英

跟蹤表單數據是否用於另一個按鈕

[英]keep track of form data when same from used for another button

所以我有一個頁面,父母可以在其中添加家庭成員,他們都需要填寫相同的表格,所以我想我只使用1個表格。

但是,這產生了一個小問題,因為我希望設置個人資料的人員能夠通過單擊家庭成員的面孔來再次檢查任何表單數據。

看我到目前為止的例子。

https://codepen.io/russellharrower/pen/rzxLRj

JS

var newpetsid = 0;

$(document).on ("click", "div.btn-floating", function () {
 alert(this.id);
 if(this.id === "addnew"){  

 dl= document.getElementById("newpetprofiles");
dl.insertAdjacentHTML('afterbegin','<div id="'+ newpetsid +'" class="btn-floating btn-large blue waves-effect waves-light"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAOg0lEQVR4Xu2dCfCV4xfHT6gsLbK0qZSZVIhKC5oYlQqVsrRoo0VZimxRaCPaI0VCWZsGNZmmob1sSWTI1qKNVoUIbfL/POb+/7//ve977/vee5/nfd97nzPzGzN5n+2c732e85xznnMKtW3b9qhYylsOFLIAyFvZq4VbAOS3/C0A8lz+FgAWAFYJzGsMWB0gr8VvlcA8F78FgAWAtQPkNwasDpDf8rfXwDyXvwWABYC1A+Q1BkKhA9x2221SpUoV+eOPP2THjh3y/fffy5o1a+THH3/MGeGcfvrp0qBBA6lZs6Za6ymnnCIHDx6UF198URYuXBjYOgMHQKVKlWTChAmODNi2bZu8//77snjxYtm1a1dgTEp34OOOO04aNmwoV1xxhdSoUUMKFSqU0NXevXuld+/ecuTIkXSHyahd4ADo0qWL/OcqmnQRR48elZUrV8rs2bNl7dq1GS3YROOTTjpJrrzySrnqqqvk5JNPTjnk8OHDZfXq1Sm/0/FB4AB48sknpWLFip7XBqNefvll2bx5s+c2pj48/vjjpXXr1urvxBNP9DzsvHnz5Pnnn/f8fTY/DBQAJUqUkOnTp/teDzsC5+Yrr7wiv//+u6/2CAnh8N/ChQsL2/Qxxxyj+mAbPnTokDqb//zzT9X333//nbJ/tna2+Y4dO0rJkiVTfh//wbp162TAgAG+22WjQaAAqFWrljzyyCNpr2Pfvn0ybdo0WbZs2f/1UaZMGTnrrLME/aJcuXJSunRpOfXUU5VwihQp4nk8gLZ//375+eefZc+ePUpB/eGHH2TTpk1KUf3rr7/k7LPPVmc4il26hPLbuXPndJtn1C5QAHBG9uzZM6MF0Bj9YMGCBUrLrl27thK2bmK32LJli1SuXNlRufM7PrvHgQMH/DbL+PtAAeBFAcx4hRHpoEePHmqnMU2BAqBPnz7SrFkz02sO5XgcI7t37zY+t0ABcPvtt0uTJk2MLzqMA3IUYhMwTYECANQ3b97c9JpDOR5KIMqgaQoUAFYH+Ffchw8flnbt2pmWvRovUABk6xYQCOeyOChnP7thEBQoALiyPfzww0GsO1Rj4vjKxB6SyWICBQAesaBMoJkwLdtt58+fL88++2y2u/XUX6AAYIZTpkwRXKX5TMuXL3f1iOrmS+AAGDhwoNStW1f3OkPfP06xeJO2iUkHCoB69erJAw88kBVTqglm6RwDJ9RDDz0kOIZMUmAAwEkzevRoX25Tk4wJYqyffvpJ7r77bt8ezkzmGggAcMM+8cQTGXnQMll0mNt+8MEHMnbsWGNTDAQA3bp1k2uuucbYIqM20KOPPiqfffaZkWkbBwB+c7b+WBCGkVVGbBBiDu666y5PwSiZLs04AIYNGybnnXdepvPO+fYcAxwHuskoAKpXry4jRozQvaac6P+7776TBx98UPtajALgzjvvlMsuu0z7onJlgL59+2p/G2EMAGj+L730kgrGtOSNA6+99pq89dZb3j5O8ytjAODc5/y35J0DX3/9tTIO6SRjALj22msDi3zVyUCdfWMd7NSpk4oX0EXGANC/f39p1KiRrnXkbL9YBglD10XGAID2zy3Akj8OjBs3Tr2P1EXGADBp0iT1SMOSPw7w+ok3kbrIGAB4Bu3loaSuhUa137lz56on5LrIGAB40FmsWDFd68jZfhctWiTsnrrIGADYyng2bckfB9577z0ZP368v0Y+vjYGAF4B8xrYkj8O6HYPGwPAc889J6eddpq/1duvVXaUp59+WhsnjAGAbezMM8/UtpBc7Vh38ghjALBu4PQg+sYbb8iMGTPSa+yhlTEAWEugB2k4fMIVkKugLjIGAGza1113na515Gy/ugNDjAGgcePGcscdd+SsoHQtjKAQgkN0kTEAkLNnzJgxutaRs/3efPPN8uuvv2pbnzEAHHvssfL666+rzFyWvHHgt99+EyKodZIxALAIexPwJ8ovvvhChgwZ4q+Rz6+NAsAGhfiTDuFghIXpJKMAqFChgjz11FM615NTfZtIIWsUAEiHAAdy61lKzgEylN50003a3wkaB8Dll18uhDtbSs6Br776ykj2FOMAIDfvM888YySbZ5RBNnnyZCN1BIwDAKGQSr1Xr15Rlo/Wuf/yyy9CEQ1yEeumQACATQATJ8mcLSVywNSvn5EDAQADV61aVb0TBAyW/seBrVu3qiQRpiqIBAYAlkylEJJFWvqXA6Sn5yXQN998Y4wlgQKAVfIO/tJLLzW24DAPpNv377T2wAHAEXDfffdJ/fr1wywb7XP7+OOPZdSoUWoXMEmBA4DFAgK0XmwE+Uikgxk5cqQqV2OaQgGA2KJbtWolXbt2zSvFkEonBMyaUvriARYqADA5cgj169cv5wNIKUj1wgsvBJIcsiAIQgcAJkcCKeoItG/fPufeEmDjJ9Sb2AgMPkFTKAEQY0rRokVVObarr75aqAQWZaIgFKlg3377baEialhIKwD4JWPw4UEI2u327dvVW3e/mi51+SgxR34hbgtRSTNDYgdSwfO658MPP1S1CMNGWgHgVBKG4ggEOqD8+AUCzCOkjHQz1Bo499xzs1a2LRuCQYunniBBnAgej14YhW5MB0BAgwYNcvzFfv755ypINNM6OewGKI78EXBSvnx5dVxQOxDPY7aJM5zybuT1pZBkrJgkNQTZ2oPS5tNdp9YdgEmRFILqYOecc07CHDdu3CiDBw/WEvQA+Aip9lPD1wsTmTNBLblS2l47AGAqZ/iNN97o+DAEuzeBj9k0gpx//vlq59EVgYyblmTXBG1GnYwAIMakFi1ayC233JLAs2y+gDWVhp4C0xS74MyPMhkFAIzibs9fPFE65t13382Il+w0jz/+uCrobIJw3fLm0UuFcRPzSWcM4wBASJz7bNMFiSsTlbO+/fbbdNah2jRs2FDuueeetNun0zCoUi/pzNWpjXEAMAnKuU+cODHhjOYJFCVkdu7cmdb6yLPvpGym1ZnHRqaCNz1Ox/dngQCAWboVjUD4KIV+QXDCCSfIq6++arz+ENs/DqxMr7O+JZelBoEBgJRxeMGc7ur79u1T5eQ++ugjT8vEZEwFkg4dOnj6PtsfAdio3ggCAwBC4Lk4z8bdiMoZn3zyiaxfv14ZXHgsyS8OgVN0smLFilKjRg258MILU973aVu8eHHHoaheypXRrXonFkt0Fzei+CWpXKJIgQKAKxtPxXQHhi5cuFAZm9q0aeMoI0LUY+8VnD6YOnWqimB2q3SOg4csaFGkQAGQTBfIFjOxxSNgspMQhOpERCNhwuXYcSL+nXy906ZNczyydOfyyxYvnPoJHABFihRR4VC6MojFhJMsRQ2VTAAKOokbALBRPPbYY+rIiSdCuriBRJECBwBMo3YwBhzO9WwTVUrmzJmj8u675SjCmIOO4FbIOmakYqdo2rRpwhSjfBUMBQDgKB48TKsodtkkkixiasYXcf311zt2fe+996ronFQA4A2D0zGydu1aZb+IIoUGADAP7b5jx44qAihbiiFK5tKlS1W/N9xwg6OM7r//ftm7d29KAHDNbNeuXUIf3FLoI4oUKgDEGEgEERr3JZdcknGNgZipNhkA+PUSqEKQZjIdwK2PDRs2qLcNUaRQAqAgI9ELUBDRE7D2cV3Db0CM3f79+wWjEcEZ5BxwcgJ5AQBHD3YGt7z8MR3A7gAhhribH4AcxdwEku0AXgHAEUI/8WSPgBAAwy0DWTYBwC2C20Q8rVu3TgYMGBACLvifQuiPAK9LcgNArOhSsh2A0LFdu3al1AHcXjPbW4BXKWn8DodMfIwBw8Vy7SazA/Dr3bNnT8pbQOvWrVXipngyVedXB/tyZgdIBQC3OzxMJYgEZRKbf7JbANfTHj16JHxCXCMxiFGknAEAUUYXXHBBggxGjx6t3Mr8cvkFOxE5CrhVkLwqGQDcchtZS2AIoI8rl9dD8RQDQPfu3aVly5aOM8XEi7vXrTpX7BrYrFkz6dOnT0IfX375pQpziyLlzA6AT5/XQvFE0oUVK1aoaGSikp2oZ8+eysZAmFqyHQA/AGCJJx65RLUwds4AgNw6derUSRAOnkayb7g5cmiAn6BUqVIpdwC3mgeffvqp8hRGkfIGALh8eVwaT0QY4STC0pgsHgB3MO3pJ56IWsKbGUXKGQC43QJiOwC2+osvvjhBRkQiU5SBopYUt0x2BFD9HNexPQJCBnXi+XDkOJWmJRfhqlWrVN5dJx1h8+bN/xXqzJkzHZ+TxZTAevXqqfeG8QSI0COi9jCUdeTEDpDMyMPZj6OHt3xOzqKVK1eq/wdNmDDBMXsp8X7E/RHJDNCcAkQJSZ81a1bIfhqppxN5ACRLNlnwbHYrX//mm2+qdC0Qr5ibNGmSwDWCSknfCmE04gWSky7BLYIsIFGiyAKA7Z5f90UXXeTIb97tse1j4UtWrwj7AckcILctnmghAkvZ4tkFuFq6lcGdPXu2AlRUjoNIAqBs2bIydOhQpbnHEzH8y5cvV2bd2GsdDEROMf/xThyAQgQR4erxRMDoO++8o/4Z4bMTVKtWzRF89IvySSKJsFMkAeBk1UPY3PepskkSh4Lk5Cnke5xA8YkeqlevrsAVn1uA74kdRJ+A0APYfYhcIhlFfAhbEGlf0wFbJAEAs0kJU7JkSSUIIoLY8p22Xac3iEQSYbhxe4mMQPmFs90XJIAFaIhIKkiAhV2pRIkSaj54FkmIFQWKJAC8MtbJdMt5j0KY6vEpz8jwIGL9I9tZjFD0lixZ4nUKof8upwGAUnfrrbeq94S4bBctWiTY7f3QGWecoSqc0BeKJ1dGnD+5QjkNgFwRks51WADo5G4E+rYAiICQdE7RAkAndyPQtwVABISkc4oWADq5G4G+LQAiICSdU7QA0MndCPRtARABIemcogWATu5GoG8LgAgISecULQB0cjcCfVsAREBIOqdoAaCTuxHo+x+WNtLbGIU19wAAAABJRU5ErkJggg=="/></div>');
   newpetsid++;
 }

  var morphFAB = $('#overlay');
  morphFAB.toggleClass('visible hidden');
  if (morphFAB.hasClass('visible')) {
    $('#form').addClass('animated slideInUp');
  }else {
    $('#form').removeClass('animated slideInUp');
  }
})

HTML

<!-- on Morph FAB Display -->
<div id="newpetprofiles" class="fixed-action-btn">

  <!-- beforebegin -->  
  <div id="overlay" class="blue-grey hidden">  
   <div id="form">
 DEPENDING ON IF IT IS THE ADD BUTTON OR A IMAGE OF THEIR KID A DIFFENT FORM SHOULD SHOW.
</div>
  </div>


   <!-- afterbegin -->
  <div class="btn-floating btn-large blue waves-effect waves-light">
    <img src="https://ipet.xyz/template/images/russellharrower.jpg"/>
  </div>
   <!-- beforeend -->
  <div id="addnew" name"addnew" class="btn-floating btn-large blue waves-effect waves-light">
    <i class="material-icons">
    add
  </i>
  </div>
  <!-- afterend -->
</div>

CSS

body {
  overflow: hidden;
}
img {
    max-width: 100%;
    max-height: 100%;
}

.fixed-action-btn {
  top:3%;
  right: calc(50%);
  left: calc(50% - auto);
  margin:0 auto !important;
  padding: 0;
  #overlay {
    position: absolute;
  //  text-align:center;
    transform-origin: center center;
    transition: 0.5s ease;
    &.hidden {
      height: 55px;
      width: 55px;
      border-radius: 0%;
      transform: scale(0);
    }
    &.visible {
       position: fixed;
      top: 0;
      right:0;
      left:0;
      // bottom: 0;
      height: 100%;
      color:#FFF;
      text-align:left;
      width: 100%;
      border-radius: 0;
      //transform: scale(25);
    }
    h2 {
      position: fixed;
      transform: scale(1) !important;
      top: 100px;
    }
  }
}
#form {
  position: absolute;
  top: 100px;
  left: 0;
  right: 0;
  //display: none;
  // transform: translateY(200px);
  // display: none;
  z-index: 1000;
 // transition: 0.5s ease;

  .btn-floating.red {
    display: block;
  }

}

我知道所有數據都需要保存到一個數組中,該數組可以隨着設置概要文件的人而增長。

然后,一旦完成所有配置文件,然后使用xmlhttp將其發送到服務器

為家庭成員創建一個數組(將來為fm);

var members = [];

然后在每個添加事件上,為表單創建一個空值的對象並將其推送給成員(可以在將fm用作div的ID之前使用數組的長度)

dl.insertAdjacentHTML('afterbegin','<div id="'+ members.length +'" ...<more code>'
var newMember = {aProperty: '', anotherProperty: ''};
members.push(newMember);

在添加fm之前,使用成員的長度作為ID,打開表單,否則將ID設置為所單擊的家庭成員的ID

if(this.id === "addnew"){
  var memberId = members.length;
  <... rest of the add new logic ...>
} else {
  var memberId = this.id;
}

使用fm id填充輸入值以在數組上搜索

member = members[memberId];
$('input.a-property').val(member.aProperty);

保存表單時,請確保將值保存到數組中

members[memberId].aProperty = $('input.a-property').val();

暫無
暫無

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

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