36 lines
1.7 KiB
JavaScript
36 lines
1.7 KiB
JavaScript
|
const rangesResponsesContainer = document.getElementById('ranges-responses-container');
|
||
|
|
function addRangeResponse(e, el) {
|
||
|
|
e.preventDefault();
|
||
|
|
let nextBoxId = parseInt(el.dataset.next);
|
||
|
|
let rangeResponseHtmlTemplate = `
|
||
|
|
<div class="d-flex flex-row col-12 px-0 align-items-end" data-box-id="${nextBoxId}">
|
||
|
|
<div class="form-group col-2 pl-0">
|
||
|
|
<label for="range_${nextBoxId}" class="control-label">Range</label>
|
||
|
|
<input type="text" class="form-control data-input"
|
||
|
|
id="range_${nextBoxId}"
|
||
|
|
placeholder="0-20"
|
||
|
|
name="ranges" value="" />
|
||
|
|
</div>
|
||
|
|
<div class="form-group col-6 pl-0">
|
||
|
|
<label for="response_${nextBoxId}" class="control-label">Response</label>
|
||
|
|
<input type="text" class="form-control data-input"
|
||
|
|
id="response_${nextBoxId}"
|
||
|
|
placeholder="Response to accumlated weight between 0% and 20%"
|
||
|
|
name="responses" value="" />
|
||
|
|
</div>
|
||
|
|
<button type="button" onclick="addRangeResponse(event, this)" class="form-group my-0 col-2 btn btn-primary mb-3" style="height:max-content;height:-moz-max-content" data-next="${nextBoxId + 1}">
|
||
|
|
Add
|
||
|
|
</button>
|
||
|
|
<button type="button" onclick="removeRange(event, this)" class="form-group my-0 col-2 btn btn-danger mb-3 mx-1" style="height:max-content;height:-moz-max-content" data-box-id="${nextBoxId}">
|
||
|
|
Del
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
`;
|
||
|
|
$(rangesResponsesContainer).append(rangeResponseHtmlTemplate);
|
||
|
|
}
|
||
|
|
function removeRange(e, el) {
|
||
|
|
e.preventDefault();
|
||
|
|
let boxToRemoveId = parseInt(el.dataset.boxId);
|
||
|
|
document.querySelector(`div[data-box-id="${boxToRemoveId}"]`).remove();
|
||
|
|
}
|