我正在我的网站中创建一个带有多个页面的 javascript 表单向导,其中包含下一个并取消并返回并在最后一页上提交
我试过谷歌,但它显示了一页表单向导
请你帮我解决这个问题
我正在我的网站中创建一个带有多个页面的 javascript 表单向导,其中包含下一个并取消并返回并在最后一页上提交
我试过谷歌,但它显示了一页表单向导
请你帮我解决这个问题
基本上,您将用包含页面 ID 的 div 包围表单的每个“页面”,或者为每个表单元素提供一个参数以指示它在哪个页面上。
然后,您将使用 javascript 创建两个带有 onclick 侦听器的按钮。根据可见页面,仅显示 prev、next 或两者。最初,您使不属于第一页的所有 div 或元素不可见,并且在 prev/next 按钮上,您将更改 div/form 元素的可见性。
假设 jquery 它看起来像这样:
<form>
<div class="form_page" id="page1">
<input type="text" name="field1" value="field1" />
</div>
<div class="form_page" id="page2">
<input type="text" name="field2" value="field2" />
<input type="submit" value="submit" />
</div>
</form>
<div id="actions"></div>
<script>
$(document).ready(function() {
var numPages = $('.form_page').length;
var currentPage = 1;
var $actions = $('#actions');
for(i = 2; i <= numPages; i++) {
$('#page' + i).hide();
}
var $prev = $('<input type="button" value="prev">').click(function() {
if (currentPage > 1) {
$('#page' + currentPage).hide();
currentPage--;
$('#page' + currentPage).show();
}
}).appendTo($actions);
var $next = $('<input type="button" value="next">').click(function() {
if (currentPage < numPages) {
$('#page' + currentPage).hide();
currentPage++;
$('#page' + currentPage).show();
}
}).appendTo($actions);
});
</script>
还将示例添加到jsfiddle