跟踪用于另一个按钮的表单数据

时间:2017-08-10 02:06:51

标签: javascript jquery html

所以我有一个页面,母亲或父亲可以添加家庭成员,他们都需要填写相同的表格,所以我想我只会使用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,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"/></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

将其发送到服务器

1 个答案:

答案 0 :(得分:0)

为家庭成员创建一个数组(将来的fm);

var members = [];

然后在每个add事件中创建一个具有表空值的对象并将其推送给成员(您可以在推送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();