We help IT Professionals succeed at work.

Modal Form Submit Button Not Working When Clicked

Keisha Smith
Keisha Smith asked
on
116 Views
Last Modified: 2018-10-19
I created a modal dropdown form with four dropdown lists, with the fourth dropdown containing a link to a document to display once user clicks the submit button. All four dropdowns work fine, however when clicking the submit button the document does not display. The form simply continues to display, log indicates 'Cannot read property '0' of undefined'.. Any help is appreciated.

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>

Open in new window

Comment
Watch Question

Ron MalmsteadInformation Services Manager
CERTIFIED EXPERT

Commented:
At what line number is the error throwing?

This error is very common actually, but you need to know what code line number is causing it first and foremost.
Consultant & Challenge Subduer
CERTIFIED EXPERT
Top Expert 2009
Commented:
This problem has been solved!
(Unlock this solution with a 7-day Free Trial)
UNLOCK SOLUTION

Author

Commented:
Removed the fourthdata select link.

Gain unlimited access to on-demand training courses with an Experts Exchange subscription.

Get Access
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Empower Your Career
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE

Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions