模态表单提交按钮单击时不起作用答案

【问题标题】：Modal Form Submit Button Not Working When Clicked模态表单提交按钮单击时不起作用
【发布时间】：2018-10-11 20:27:17
【问题描述】：

我创建了一个带有四个下拉列表的模式下拉表单，其中第四个下拉列表包含指向文档的链接，一旦用户单击提交按钮就会显示该文档。所有四个下拉菜单都可以正常工作，但是当单击提交按钮时，文档不会显示。表单只是继续显示。任何帮助表示赞赏。

        var selectedOptions = {};

        $('#link1').on('change', function () {
            var a = $(this).val();
            selectedOptions['1'] = a;
            selectedOptions['2'] = a;
            selectedOptions['3'] = a;
            if (a !== '') {
                for (var i = 0; i < dataSecondSelect[a].length; i++) {
                    $('#link2').append($("<option></option>")
                            .attr("value", dataSecondSelect[a][i])
                            .text(dataSecondSelect[a][i]));
                }
            }
        });

        $('#link2').on('change', function () {
            var a = $(this).val();
            selectedOptions['1'] = a;
            selectedOptions['2'] = a;
            selectedOptions['3'] = a;
            if (a !== '') {
                for (var i = 0; i < dataThirdSelect[a].length; i++) {
                    $('#link3').append($("<option></option>")
                            .attr("value", dataThirdSelect[a][i])
                            .text(dataThirdSelect[a][i]));
                }
            }
        });
        $('#link3').on('change', function () {
            var a = $(this).val();
            selectedOptions['1'] = a;
            selectedOptions['2'] = a;
            selectedOptions['3'] = a;
            if (a !== '') {
                for (var i = 0; i < dataFourthSelect[a].length; i++) {
                    $('#link4').append($("<option></option>")
                            .attr("value", dataFourthSelect[a][i].link)
                            .text(dataFourthSelect[a][i].form));
                }
            }
        });

    $('#clickButton').on('click', function () {
        var error = false;
        $(".error").remove();
        $(".validation-error").removeClass('validation-error');
        $('#myModal select').each(function () {
            // validate first
            if ($(this).val() === "") {
                var _message = "Please select an option";
                $(this).addClass('validation-error');
                $(this).after($('<div class="error"></div>').text(_message));
                error=true;
            }
        });

        if (error) { return; }
        // form is now validated so get the link
        var _index = $("#link4").val();
        var _form = dataFourthSelect[_index][0].link;
        resetForm($(this)[0]);
        $('#myModal').modal('hide');
        openDoc(_form);

    });

    function resetForm(e) {
        $(".error").remove();
        $(".validation-error").removeClass('validation-error');
        e.form.reset();
    }

</script>

【问题讨论】：

您在日志或控制台中看到了哪些错误？请将该信息添加到您的问题中。
日志显示'无法读取未定义的属性'0'。
错误可能来自几个地方。 var _form = dataFourthSelect[_index][0].link; resetForm($(this)[0]);尝试控制台记录 $(this) 和 _index。看看其中任何一个是未定义的

标签： javascript jquery html

【解决方案1】：

在查看您给定的代码时，我注意到 #link4 不存在。

因此var _index = $("#link4").val(); 行将返回undefined，这随后将导致以下代码行失败

var _form = dataFourthSelect[_index][0].link;

希望这会有所帮助。

【讨论】：