javascript - Calculate and auto populate dynamic elements -
i'm trying fix time form script calculate rest of days. right calculates in , out aka duration day 1. not on how day 2 plus data calculate.
another issue i'm having not being able edit day 1 when add in new days i'm not longer able calculate duration. if go day 1 , delete days i'm able edit , calculate again.
p.s. segments i'm referring days.
var template; var numofsegments = 1; window.addeventlistener('load', function() { template = document.queryselector("#wrapper").innerhtml; document.queryselector("#more_fields").addeventlistener("click", function(e) { e.preventdefault(); // tell browser not send form document.getelementbyid('wrapper').insertadjacenthtml('beforeend', template); // add next segment numofsegments = document.queryselectorall("div.segment").length; document.queryselector("div.segment:last-of-type > label").innerhtml = "day " + (numofsegments) + ":"; //updates segment # }); }) function deleteme() { if (numofsegments > 1) { var btn = document.queryselector("#wrapper > div.segment:last-of-type"); btn.remove(); event.preventdefault(); } } function addnumseg() { var elem = document.getelementbyid("segments_num"); elem.value = ++numofsegments; } function subtractnumseg() { var elem = document.getelementbyid("segments_num"); if (numofsegments > 1) { elem.value = --numofsegments; } } <form id="seg" oninput="z.value=parseint(segout.value)-parseint(segin.value)"> <div id="room_fileds"> <div class="content" id="wrapper"> <div class="segment"> <label id="seg[]" style="margin:0 0 10px 60px;display: inline;">day 1:</label> <div class="form-group" style="display: inline;"> <label id=seg-in[] style="margin:0 0 10px 35px;display: inline;">in:</label> <input class="form-control seg_in" id="segin" type="text" style="margin:0 0 10px 5px;width:15%;display: inline;"> </div> <div class="form-group" style="display: inline;"> <label id=seg-out[] style="margin:0 0 10px 35px;display: inline;">out:</label> <input class="form-control seg_out" id="segout" type="text" style="margin:0 0 10px 5px;width:15%;display: inline;"> </div> <div class="form-group" style="display: inline;"> <label id="seg-dur[]" style="margin:0 0 10px 35px;display: inline;">duration:</label> <output class="form-control seg_out" form="seg" name="z" for="segin segout" style="margin:0 0 10px 5px;width:15%;display:inline" ; readonly></output> </div> </div> </div> </div> <div style="text-align:right;"> <div style="display:inline;text-align: right;"> <button onclick="deleteme(); subtractnumseg();" type="button" style="height: 25px;width:14px;" id="less_fields">-</button> </div> <div style="display:inline;text-align: right;"> <button onclick="addnumseg();" type="button" style="height: 25px;width:14px;" id="more_fields">+</button> </div> </div> <br><br> <button type="button" class="btn btn-default" id="formsubmit">submit</button>
you missing actual segments_num element:
<div id='segments_num' value=1></div> in html fixes this.
i placed addnumseg(); event listener avoid asynchronous event handling issues.
var template; var numofsegments = 1; window.addeventlistener('load', function() { template = document.queryselector("#wrapper").innerhtml; document.queryselector("#more_fields").addeventlistener("click", function(e) { e.preventdefault(); // tell browser not send form document.getelementbyid('wrapper').insertadjacenthtml('beforeend', template); // add next segment numofsegments = document.queryselectorall("div.segment").length; document.queryselector("div.segment:last-of-type > label").innerhtml = "day " + (numofsegments) + ":"; //updates segment # addnumseg(); }); }) function deleteme() { if (numofsegments > 1) { var btn = document.queryselector("#wrapper > div.segment:last-of-type"); btn.remove(); event.preventdefault(); } } function addnumseg() { var elem = document.getelementbyid("segments_num"); elem.value = ++numofsegments; } function subtractnumseg() { var elem = document.getelementbyid("segments_num"); if (numofsegments > 1) { elem.value = --numofsegments; } }<div id='segments_num' value=1></div> <form id="seg" oninput="z.value=parseint(segout.value)-parseint(segin.value)"> <div id="room_fileds"> <div class="content" id="wrapper"> <div class="segment"> <label id="seg[]" style="margin:0 0 10px 60px;display: inline;">day 1:</label> <div class="form-group" style="display: inline;"> <label id=seg-in[] style="margin:0 0 10px 35px;display: inline;">in:</label> <input class="form-control seg_in" id="segin" type="text" style="margin:0 0 10px 5px;width:15%;display: inline;"> </div> <div class="form-group" style="display: inline;"> <label id=seg-out[] style="margin:0 0 10px 35px;display: inline;">out:</label> <input class="form-control seg_out" id="segout" type="text" style="margin:0 0 10px 5px;width:15%;display: inline;"> </div> <div class="form-group" style="display: inline;"> <label id="seg-dur[]" style="margin:0 0 10px 35px;display: inline;">duration:</label> <output class="form-control seg_out" form="seg" name="z" for="segin segout" style="margin:0 0 10px 5px;width:15%;display:inline" ; readonly></output> </div> </div> </div> </div> <div style="text-align:right;"> <div style="display:inline;text-align: right;"> <button onclick="deleteme(); subtractnumseg();" type="button" style="height: 25px;width:14px;" id="less_fields">-</button> </div> <div style="display:inline;text-align: right;"> <button type="button" style="height: 25px;width:14px;" id="more_fields">+</button> </div> </div> <br><br> <button type="button" class="btn btn-default" id="formsubmit">submit</button>
Comments
Post a Comment