告诉用户在表单的特定步骤中该怎么做

时间：2019-01-28 17:52:35

标签： javascript php html css user-experience

我有逐步执行的表单，用户应该在每个步骤中填写所需的数据，然后才能继续进行下一步。

但是有一个步骤，有些用户在此步骤中不知道要做什么。有3个复选框，用户至少应选中其中一个复选框，然后输入相关数据以进行下一步。

用户可以选择所有3个复选框，但是他必须输入所有3个相关数据，因此，每当选中此复选框时，都应归档相关数据以进行下一步。

我试图只提供相关代码，所以它的功能不太好，但是会显示我的意思。

这是一个小提琴： http://jsfiddle.net/gsfbpvye/1

代码如下：

function hideAllChildrenButOne(parentId, toRevealId) {
    $('#' + parentId).children().css('display', 'none');
    $('#' + toRevealId).css('display', 'block');
}

function showSection(parentId, toRevealId, self) {
    var relatedSection = $('#' + toRevealId).attr('data-section');
    if(self.is(':checked')){
        $('.relative_container').css('display', 'block');
        $('#' + toRevealId).addClass('inline-block');
        $('#' + toRevealId).addClass('tab_active');
        $('#' + toRevealId).siblings().removeClass('tab_active');
        $('#' + relatedSection).siblings().removeClass('active');
        $('#' + relatedSection).addClass('block');
        $('#' + relatedSection).addClass('active');
    }

    if ($('#'+self.attr('data-header')).hasClass('tab_active')){
         var count = $(".tab-header:visible").length;        
         if(self.is(':checked') == false && count > 0){
            $(".tab-header:visible:first").addClass('tab_active');
            $('#'+$(".tab-header:visible:first").attr('data-section')).addClass('active');
        }
    }
    
    if(self.is(':checked') == false){
        $('#' + toRevealId).removeClass('inline-block');
        $('#' + toRevealId).removeClass('tab_active');
        $('#' + relatedSection).removeClass('block');
        $('#' + relatedSection).removeClass('active');
        if (!$(".tab-header:visible").length) {
            $('.relative_container').css('display', 'none');
        }
    }
}

$(document).ready(function() {    
    $('.tab-header').click(function(event) {
        $(this).addClass('tab_active').siblings().removeClass('tab_active');
        var related_section = $(this).attr('data-section');
        hideAllChildrenButOne('relative_content', related_section);
    });

    $("input[name='section[]']").change(function() {
        var self = $(this);
        showSection('relative_tabs', self.attr('data-header'), self);
        if (!$('.tab_active').length) {
            $("input[name='section[]']").click().click();
        }
   });

});
ul{
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 0;
}

.hidden{
    display: none;
}

.inline-block{
    display: inline-block;
}

.block{
    display: block;
}

.stepContainer {
    display: block;
    position: relative;
    margin: 0;
    padding: 0;
    border: 0px solid #CCC;
    /* overflow: hidden; */
    clear: both;
    /* height: 400px; */
}

.stepContainer div.content {
    display: block;
    position: relative;
    float: left;
    margin: 0;
    padding: 5px;
    border: 1px solid #CCC;
    font: normal 13px Verdana, Arial, Helvetica, sans-serif;
    color: #5A5655;
    background-color: #F8F8F8;
    /* height: 650px; */
    text-align: left;
    overflow: visible;
    z-index: 88;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    width: 908px;
    clear: both;
}

td {
    width: 360px;
}

.checkbox-con{
    text-align: center;
    margin: 15px auto;
}

.checkbox-txt{
    font: normal 13px Verdana, Arial, Helvetica, sans-serif;
    color: #5A5655;
    font-weight: bold;
    margin-right: 5px;
    margin-bottom: 10px
}

.checkbox-label{
    font: normal 13px Verdana, Arial, Helvetica, sans-serif;
    color: #5A5655;
    margin-right: 5px;
    cursor: pointer;
}

.checkbox-label input{
    vertical-align: middle;
}

.relative_container{
    display: none;
    position: relative;
    padding: 45px 15px 15px;
    margin: 0 -15px 15px;
    border-color: #e5e5e5 #eee #eee;
    border-style: solid;
    border-width: 1px 0;
    -webkit-box-shadow: inset 0 3px 6px rgba(0,0,0,.05);
    box-shadow: inset 0 3px 6px rgba(0,0,0,.05);
}

@media (min-width: 768px){
    .relative_container {
        margin-right: 0;
        margin-left: 0;
        background-color: #fff;
        border-color: #ddd;
        border-width: 1px;
        border-radius: 4px 4px 0 0;
        -webkit-box-shadow: none;
        box-shadow: none;
    }
}

.relative_tabs{
    margin-bottom: 15px;
    border-bottom: 1px solid #ddd;
    list-style: none;
    padding: 7px 0;
}

.relative_tabs:before{
    display: table;
    content: " ";
}

.tab-header{
    display: none;
    margin-bottom: -1px;
}

.tab-header>a{
    margin-right: 2px;
    line-height: 1.42857143;
    border: 1px solid transparent;
    border-radius: 4px 4px 0 0;
    padding: 9px 15px;
    text-decoration: none;
    cursor: pointer;
}

.tab-header.tab_active>a{
    color: #555;
    cursor: default;
    background-color: #fff;
    border: 1px solid #ddd;
    border-bottom-color: transparent;
}

.relative_content div{
    display: none;
}

.txtBox {
    border: 1px solid #CCCCCC;
    color: #5A5655;
    font: 13px Verdana, Arial, Helvetica, sans-serif;
    padding: 2px;
    width: 430px;
}

.txtBox:focus {
    border: 1px solid #EA8511;
}

.dobBox{
    border: 1px solid #CCCCCC;
    color: #5A5655;
    font: 13px Verdana, Arial, Helvetica, sans-serif;
    padding: 2px;
    width: 30%;
}

.txtArea{
    width: 100%;
}

.relative_content>div.active{
    display: block;
}

.tab-content{
    display: none;
}
<script scr="https://code.jquery.com/jquery-1.9.1.min.js"></script>

<div id="step-1">
    <div class="checkbox-con">
        <div class="checkbox-txt">Please click at least one of the following ckeckboxes 
        and fill the related data: </div>
        <label class="checkbox-label">First<input type="checkbox" name="section[]" value="First" data-header="first-tab"></label>
        <label class="checkbox-label">Second<input type="checkbox" name="section[]" value="Second" data-header="second-tab"></label>
        <label class="checkbox-label">Third<input type="checkbox" name="section[]" value="Third" data-header="third-tab"></label>
    </div>
    <div class="relative_container">
        <div class="relative_header">
            <ul class="relative_tabs" id="relative_tabs">
                <li id="first-tab" data-section="First_info" class="tab-header">
                    <a>First</a>
                </li> 
                <li data-section="Second_info" class="tab-header" id="second-tab">
                    <a>Second</a>
                </li>
                <li data-section="Third_info" class="tab-header" id="third-tab">
                    <a>Third</a>
                </li>
            </ul>
        </div>
        <div class="relative_content" id="relative_content">
            <div class="tab-content" id="First_info">
                <h2 class="StepTitle">First Sec</h2>
                <table cellspacing="3" cellpadding="3" align="center">
                    <tbody>
                        <tr>
                            <td colspan="3" align="center">&nbsp;</td>
                        </tr>
                        <tr>
                            <td align="right">Name :</td>
                            <td align="left"><input id="first_name" class="txtBox" name="first_name" type="text"/></td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="tab-content" id="Second_info">
                <h2 class="StepTitle">Second Sec</h2>
                <table cellspacing="3" cellpadding="3" align="center">
                    <tbody>
                        <tr>
                            <td colspan="3" align="center">&nbsp;</td>
                        </tr>
                        <tr>
                            <td align="right">Name :</td>
                            <td align="left"><input id="second_name" class="txtBox" name="second_name" type="text"/></td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="tab-content" id="Third_info">
                <h2 class="StepTitle">Third Sec</h2>
                <table cellspacing="3" cellpadding="3" align="center">
                    <tbody>
                        <tr>
                            <td colspan="3" align="center">&nbsp;</td>
                        </tr>
                        <tr>
                            <td align="right">Name :</td>
                            <td align="left"><input id="third_name" class="txtBox" name="third_name" type="text"/></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

那我应该使用什么文本/提示/图像/样式来让用户知道该怎么做？

更新： 这是表格，您将在第二步中找到checkobxes，代码在那里工作，所以您可以看到它现在如何工作http://mdev.cloudaccess.host/admission2/admission.php

1 个答案:

答案 0 :(得分：1)

从设计角度来看，我将考虑仅包含三个文本字段，如果用户输入一个字符串，则该字符串将被隐式“剔除”，如果用户将其保留为空白，则将其隐式“未剔除”。

function validate() {
    const choiceA = $('input[name="a"]').val();
    const choiceB = $('input[name="a"]').val();
    const choiceC = $('input[name="a"]').val();
    const isValid = choiceA.length || choiceB.length || choiceC.length;
    $('button.submit').prop("disabled", !isValid);    
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
   <div><input type='text' name='a' onkeypress='validate()' placeholder='Choice A (optional)' /></div>
   <div><input type='text' name='b' onkeypress='validate()' placeholder='Choice B (optional)' /></div>
   <div><input type='text' name='c' onkeypress='validate()' placeholder='Choice C (optional)' /></div>
   <button class='submit'>Submit</button>
</form>

相关问题
最新问题