jShowOff作为一个多页面的表单

时间:2012-02-25 21:01:29

标签: javascript jquery forms user-interface input

我正在尝试使用jShowOff创建一个用户可以填写的多窗格表单。

我遇到的问题是当你进入下一张幻灯片时,该DIV中输入字段的数据会丢失,当你到达流程结束时,你实际上是在提交一张空白表格。

关于如何让它发挥作用的任何想法?

提前感谢您的帮助!

<div id="suggestionSlider">
        <div title="What?">
            <h2>What can we do to serve our campus, city, or world?</h2>
            <input name="title" maxlength="60" placeholder="Please limit your title to 60 characters…" style="width: 900px; font-size: 36px;"/>
        </div>
        <div title="Who?">
            <h2>Who are we specifically helping?</h2>
            <textarea name="actions_who" maxlength="140" placeholder="Please limit your response to 140 characters…" style="width: 900px; height: 90px;"></textarea>
        </div>
        <div title="Where?">
            <h2>Where would this take place?</h2>
            {category_menu}
                <label for="Campus">Campus</label>
                <input type="checkbox" name="category 68" value="Campus" />
                <label for="City">City</label>
                <input type="checkbox" name="category 69" value="City" />
                <label for="World">World</label>
                <input type="checkbox" name="category 70" value="World" />
            {/category_menu}
        </div>
        <div title="When?">
            <h2>When would this happen?</h2>
            <textarea name="actions_date" maxlength="140" placeholder="Please limit your response to 140 characters…" style="width: 900px; height: 90px;"></textarea>
        </div>
        <div title="Why?">
            <h2>Why is this important to you?</h2>
            <textarea name="actions_why" maxlength="140" placeholder="Please limit your response to 140 characters…" style="width: 900px; height: 90px;"></textarea>
        </div>
        <div title="How?">
            <h2>How can the people of Resonate Church help?</h2>
            <textarea name="actions_how" maxlength="140" placeholder="Please limit your response to 140 characters…" style="width: 900px; height: 90px;"></textarea>
        </div>
        <div title="Submit">
            <input type="submit" value="Submit" class="submit" />
        </div>

    <script type="text/javascript">     
        $(document).ready(function(){ $('#suggestionSlider').jshowoff({
            autoPlay: false,
            effect: 'slideLeft',
            controls: true,
            controlText: { previous:'Previous', next:'Next' },
            hoverPause: false,
            speed: 5000,
            changeSpeed: 500,
            cssClass: true
        }); });
    </script>

0 个答案:

没有答案