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

Question

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

Answer 1

创建（在未来FM）家庭成员的阵列发送到服务器;

var members = []; 

然后在每个添加事件创建为形式空值的对象和（推FM为div的ID才可以使用该阵列的长度）将其推送到成员

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

添加使用为ID构件的长度的FM前右打开窗体，否则将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();