Question

我的目标网页有两个步骤（一个用于从下拉菜单中选择一个选项并按“发送”，一个用于输入电子邮件并按“发送”）。这些步骤似乎是由javascript或html5控制的，这是我不习惯的。我需要在系统中添加第三个“步骤”。

以下是网站链接：您将看到在选择答案并在电子邮件字段中输入内容后，您将返回第一个选择。

index.html中的代码部分如下所示：

'<!-- Step 1 -->
        <div class="steps step-1">
            <p>STEP 1: Answer this question</p>
            <form action="#" method="post">
                <div class="select-holder">
                    <label>Who is giving this away the awesome thing that you're about to download?</label>
                    <div class="select-wrap">
                        <select name="" >
                            <option selected="selected" value="Select Your Answer">Select Your Answer</option>
                            <option value="LeadBrite, Duh!">LeadBrite, Duh!</option>
                            <option value="Lady Gaga">Lady Gaga</option>
                            <option value="Santa Claus">Santa Claus</option>
                        </select>
                    </div>  
                </div>
                <input type="submit" value="Submit Answer" class="submit-button" />
            </form>
            <div class="contest-ends">
                <p><span>Contest Ends</span></p>
                <p>Month 00, 00:00 AAA</p>
            </div>
        </div>
        <!-- END Step 1 -->
        <!-- Step 2 -->
        <div class="steps step-2">
            <p>STEP 2: Your details</p>
            <form action="#" method="post">
                <input type="text" class="field" value="Enter your email address" title="Enter your email address" />
                <input type="submit" value="Send" class="send" />
            </form>
            <div class="contest-ends">
                <p><span>Contest Ends</span></p>
                <p>Month 00, 00:00 AAA</p>
            </div>
        </div>
        <!-- END Step 2 -->'

正如我所说，我想增加第三步，但我不知道如何前进。源文件包含一个HTML5文件和其他我认为必须连接第3步才能使其正常运行的文件。

我感谢任何帮助。感谢。

Answer 1

希望通过创建要使用的示例来简化此操作。如果您查看http://jsfiddle.net/fgAUQ/，则可以在电子邮件问题中看到收听提交的表单。

$(document).on('submit', 'form', function (e) {
    // Check email address
    // if email address ok
        $('.step-2').hide();
        $('.step-3').fadeIn(800);
        e.preventDefault();
    // else 
        // alert
        // e.preventDefault();
    // end if
});

您仍需要通过存储/处理电子邮件和处理表单上传来完成此操作。

带有转换输入字段的HTML单页登录页面

1 个答案: