javascript - 向导提交按钮问题，我认为js中的这个表单向导问题

Question

提交按钮在此向导上不起作用，我认为此表单向导在 js 中存在问题。当我点击提交按钮但不起作用时。然后我检查提交按钮，有一个像这样的提交按钮代码......

<a href="#finish" role="menuitem">Sumit</a>

但我需要按钮类型提交。请帮我解决这个问题...

在此处检查此问题:sdaminul.com/wizard/this.html

HTML

<form action="form.php" id="wizard">

    <h2></h2>
    <section>
        <div>
            <div class="mt-4">
                <h4 class="text-center mb-4">Tell us about Yourself</h4>
                <div class="default-form contact-form">
                    <div class="form-group">
                        <input type="text" name="name" value="" placeholder="First Name" required>
                    </div>

                    <div class="form-group">
                        <input type="text" name="name2" value="" placeholder="Last Name" required>
                    </div>

                    <div class="form-group">
                        <input type="date" name="dob" id="dateofbirth">

                    </div>
                </div>
            </div>
        </div>
    </section>

    <h2></h2>
    <section>
        <div class="inner">
            <div class="mt-4">
                <h4 class="text-center mb-4">Language</h4>
                <div class="tags-default mb-4">
                    <input type="text" name="lang" value="English" data-role="tagsinput" placeholder="add language" />
                </div>
            </div>
        </div>
    </section>

    <h2></h2>
    <section>
        <div class="inner">
            <div class="mt-4">
                <h4 class="text-center mb-4">Address</h4>
                <div class="default-form contact-form">
                    <div class="form-group">
                        <input type="text" name="address1" value="" placeholder="Address 1" required>
                    </div>

                    <div class="form-group">
                        <input type="text" name="address2" value="" placeholder="Address 2" required>
                    </div>
                </div>
            </div>
        </div>
    </section>
</form>

这是表单向导的 JavaScript 代码。JS

(function($) {

    $("#wizard").steps({
        headerTag: "h2",
        bodyTag: "section",
        transitionEffect: "fade",
        enableAllSteps: true,
        transitionEffectSpeed: 700,
          labels: {
            finish: "Submit",
            next: "Next",
            previous: "Previous"
        }
    });
    $('.wizard > .steps li a').click(function(){
        $(this).parent().addClass('checked');
        $(this).parent().prevAll().addClass('checked');
        $(this).parent().nextAll().removeClass('checked');
    });
    // Custome Jquery Step Button
    $('.forward').click(function(){
        $("#wizard").steps('next');
    })
    $('.backward').click(function(){
        $("#wizard").steps('previous');
    })
    // Select Dropdown
    $('html').click(function() {
        $('.select .dropdown').hide(); 
    });
    $('.select').click(function(event){
        event.stopPropagation();
    });
    $('.select .select-control').click(function(){
        $(this).parent().next().toggle();
    })    
    $('.select .dropdown li').click(function(){
        $(this).parent().toggle();
        var text = $(this).attr('rel');
        $(this).parent().prev().find('div').text(text);
    })

})(window.jQuery);

Answer 1

<a href="#finish" role="menuitem">Sumit</a>

除非有 type="submit"，否则不会提交您的表单

您可以通过添加 type="submit" 来触发表单，或通过 jQuery 手动触发表单

$('[href="#finish"]').click(function() {
    $('#wizard').submit();
})