几张幻灯片上的HTML表单 [英] HTML form over several slides

问题描述

我想在大约五个问题的站点上创建一个表单，每个问题位于不同的幻灯片上.我想要的效果是，您回答一个问题，然后在短暂的延迟后，下一个问题出现在同一位置.现在，我正在使用jQuery选项卡来完成该操作，但我更愿意在不显示选项卡(或至少看起来不像选项卡)且不会自动前进到下一个问题的情况下进行操作.

I want to create a form on a site of about five questions, each of which is located on a different slide. The effect I'm going for is that you answer a question, and then after a short delay the next question appears in the same spot. Right now I'm accomplishing it kind of using jQuery tabs, but I'd prefer to do it without the tabs being visible (or at least not looking like tabs) and with automatic progression to the next question.

我在寻找"JavaScript幻灯片"，但这似乎带来了无数个用于图像幻灯片的插件.我发誓我以前见过这种效果，但现在找不到了.是否有插件(目前，即使是仅允许在每张幻灯片上使用任意HTML的幻灯片显示也会很有帮助-稍后我将弄清楚如何从表单中获取信息).

I looked for "JavaScript slideshow", but that just seems to bring up an endless number of plugins for image slideshows. I swear I've seen this effect before but now can't find it. Is there a plugin for this (right now even just a slideshow that allows arbitrary HTML on each slide would be helpful--I'll figure out how to get the info from the form later).

推荐答案

您可以在JavaScript变量中保存在每个页面上输入的值.

You could hold the values entered on each page in JavaScript variables.

var answerOne, answerTwo, answerThree, answerFour, answerFive;
$('form').submit(function(event){
    event.preventDefault();
    answerOne = $('form input#question-one').value();
    // then run the script which hides current page and shows next
});

您也可以使用jQuery在页面之间轻松切换.

You could use jQuery to switch between pages also fairly easily.

最简单的方法如下(在每个div中想象您的表单):

The simplest way would be the following (imagine your form within each div):

<div id="page-1"></div>
<div id="page-2"></div>
<div id="page-3"></div>
 ...

<script>
    $('#page-1').hide();
    $('#page-2').show();
</script>

这是一个非常简单的示例，说明如何隐藏和显示页面上的元素.它应该给您足够的工作空间.您将需要一个变量来存储您正在查看的页面，并随着它的变化对其进行递增.

This is a very simple example of how to hide and show elements on a page. It should give you enough to work with. You'll need a variable to store which page you're looking at, and increment it as it changes.

如果最后要保存信息，我建议在服务器端进行处理以确保其有效以及您期望的数据类型.否则，攻击者可能会在发送值之前操纵这些值，从而可能创建不需要的SQL注入/恶意代码等.

If the information is to be saved at the end I'd suggest processing it server side making sure it's valid and the type of data you'd expect. Otherwise an attacker could manipulate the values before they're sent, possibly creating unwanted SQL injection / malicious code, etc.

这篇关于几张幻灯片上的HTML表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！