[英]How do I get a multi-page pdf from a website using jsPDF and HTML2Canvas?
[英]Multi-page form: how do I repeat one page indefinitely by request? HTML, CSS, JS
我正在创建一个多页表单(我的意思是在某些按钮单击时,特定元素在隐藏和可见之间更改)遵循此页面的 setup 。 我有 2 页:1. 添加动物和 2. 添加另一种动物。 我希望能够在用户单击按钮之前重复第 2 页add another animal
,然后再单击submit
,并存储所有输入的动物名称以发送到 python function (所以每次用户输入add another animal
页面上的名称,之前的动物名称不会被覆盖。
下面是我的 HTML、CSS 和 JS。
<div class="section-25">
<div class="container-5 w-container">
<div class="text-block-6">Select the level of algorithm you're looking to make</div>
<div class="w-form">
<form id="wf-form-Email-Form" name="wf-form-Email-Form" data-name="Email Form" method="post" action="/add_animal">
<!-- PAGE 1 -->
<div id="page1" class="page">
<!-- 1ST ANIMAL NAME -->
<label for="Enter-species" class="custom-question enter-species" id="one_name">What animal are you interested in?</label>
<input type="text" class="text-field w-input" maxlength="256" name="species" placeholder="Enter name of animal" id="Enter-species" required="">
<p><input type="button" id="C1" value="Add another animal" onClick="showLayer('page2')"></p>
</div>
<!-- PAGE 2 -->
<div id="page2" class="page">
<!-- NEXT ANIMAL NAME -->
<label for="Enter-species" class="custom-question enter-species" id="one_name">What other animal are you interested in?</label>
<input type="text" class="text-field w-input" maxlength="256" name="another_species" placeholder="Enter name of animal" id="Enter-species">
<p><input type="button" id="B1" value="Go Back" onClick="showLayer('page1')">
<input type="button" id="C2" value="Add another animal" onClick="showLayer('page2')">
<input type="button" id="S1" value="Submit" action="/add_animal" </p>
</div>
</form>
</div>
</div>
</div>
CSS:
<!-- CSS -->
<style>
.page {
position: absolute;
top: 10;
left: 100;
visibility: hidden;
}
</style>
JS:
<!-- JAVASCRIPT -->
<script language="JavaScript">
var currentLayer = 'page1';
function showLayer(lyr) {
hideLayer(currentLayer);
document.getElementById(lyr)
.style.visibility = 'visible';
currentLayer = lyr;
}
function hideLayer(lyr) {
document.getElementById(lyr).
style.visibility = 'hidden';
}
function showValues(form) {
var values = '';
var len = form.length - 1;
//Leave off Submit Button
for (i = 0; i < len; i++) {
if (form[i].id.indexOf("C") != -1 ||
form[i].id.indexOf("B") != -1)
//Skip Continue and Back Buttons
continue;
values += form[i].id;
values += ': ';
values += form[i].value;
values += '\n';
}
alert(values);
}
</script>
我想你的意思是这样的:
let currentLayer = 0; const animalList = []; const form = document.getElementById("wf-form-Email-Form"); const [field, backButton, addButton, submitButton] = form.elements; function showLayer(lyr) { switch(lyr){ case 1: currentLayer++; if (currentLayer-1 == animalList.length){ animalList.push(field.value) form.reset(); backButton.style.display = 'unset'; }else{ if (currentLayer == animalList.length){ addButton.value = 'Add another animal'; field.value = ""; }else{ addButton.value = 'Next'; field.value = animalList[currentLayer]; } } break; case -1: currentLayer--; if(.currentLayer) backButton;disabled = true. if (currentLayer < animalList.length +1){ field;value = animalList[currentLayer]. addButton;value = 'Next';} break. } } submitButton.onClick = function(e){ // serialize animalList and send using AJAX or add a hidden type input and set animalList as it's value }
.page { position: absolute; top: 10; left: 100; visibility: hidden; } #backButton{ display:none; }
<div class="section-25"> <div class="container-5 w-container"> <div class="text-block-6">Select the level of algorithm you're looking to make</div> <div class="w-form"> <form id="wf-form-Email-Form" name="wf-form-Email-Form" data-name="Email Form" method="post" action="/add_animal"> <label for="Enter-species" class="custom-question enter-species" id="one_name">What other animal are you interested in?</label> <input type="text" class="text-field w-input" maxlength="256" name="another_species" placeholder="Enter name of animal" id="Enter-species"> <p> <input type="button" id="backButton" value="Go Back" onClick="showLayer(-1)"> <input type="button" id="addButton" value="Add another animal" onClick="showLayer(+1)"> <input type="button" id="submit" value="Submit"> </p> </form> </div> </div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.