0

我想构建一个包含 4-5 个步骤的表单，每个步骤都有 2-3 个强制/必需的单选按钮。

选择的按钮决定下一步，所有步骤最终都会导致一个确认步骤。我遇到的问题是强制按钮：“第一步”提示选择，但后续步骤（例如，选择长发或短发）不会提示您选择长发或短发：

<div id="fieldWrapper">
            <span class="step" id="first">
                <span class="font_normal_07em_black">Dog or Cat?</span><br />
                Dog: <input id="dog_or_cat" type="radio" class="link required" value="dog" name="goto" /><br />
                Cat: <input id="dog_or_cat" type="radio" class="link" value="cat" name="goto" />

                <br />
            </span>

                    <span id="cat" class="step">
                        <span class="font_normal_07em_black">Cat: long or short hair?</span><br />
                        Long: <input id="cat_long_or_short" type="radio" class="link required" value="cat_long" name="goto" /><br />
                        Short:<input id="cat_long_or_short" type="radio" class="link" value="cat_short" name="goto" />  
                    </span>

                            <span id="cat_short" class="step">
                            <span class="font_normal_07em_black">Cat: Short Hair</span><br />
                            <input type="hidden" class="link" value="confirmation" />
                            </span>

                            <span id="cat_long" class="step">
                            <span class="font_normal_07em_black">Cat: Long Hair</span><br />
                            <input type="hidden" class="link" value="confirmation" />
                            </span>



                    <span id="dog" class="step">
                        <span class="font_normal_07em_black">Dog: Large or Small?</span><br />
                        Large: <input id="dog_large_or_small" type="radio" class="link required" value="dog_large" name="goto" /><br />
                        Small: <input id="dog_large_or_small" type="radio" class="link" value="dog_small" name="goto" />    
                    </span>


                            <span id="dog_large" class="step">
                            <span class="font_normal_07em_black">Dog: Large</span><br />
                            <input type="hidden" class="link" value="confirmation" />
                            </span>

                            <span id="dog_small" class="step">
                            <span class="font_normal_07em_black">Dog: Small</span><br />
                            <input type="hidden" class="link" value="confirmation" />
                            </span>


            </span>




            <span id="confirmation" class="step">
                <span class="font_normal_07em_black">Confirmation</span><br />
            </span>


            </div>
            <div id="demoNavigation">                           
                <input class="navigation_button" id="back" value="Back" type="reset" />
                <input class="navigation_button" id="next" value="Next" type="submit" />
            </div>
        </form>
        <hr />

        <p id="data"></p>
    </div>
4

0 回答 0