<!DOCTYPE html>
<html>
<head>
<style>
#rows input {
display: block;
margin-bottom: 1em;
}
#question {
margin-bottom: 2em;
}
</style>
</head>
<body>
<div>
Question:
<input id="question" type="text" name="question">
</div>
<div id="rows">
<input type="text" name="choice" />
<input type="text" name="choice" />
<input type="text" name="choice" />
</div>
<button type="button" onclick="poll()">Ok</button>
<button type="button" onclick="more()">+</button>
<button type="button" onclick="less()">-</button>
</body>
<script>
const rows = document.getElementById("rows");
const question = document.getElementById("question");
function more() {
const row = document.createElement('input');
row.setAttribute("type", "text");
row.setAttribute("name", "choice");
rows.appendChild(row);
}
function less() {
rows.removeChild(rows.lastChild);
}
function poll() {
body = JSON.stringify({
question: question.value,
choices: [...rows.children].map((i) => i.value)
});
console.log(body);
fetch('/choices', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: body
}).then(() => {
window.location = '/#abstain'
});
}
</script>
</html>