0

I can't figure out what's wrong with my for loop, written in Javascript. It isn't functioning as needed.

1- It only sometimes gives the javascript alert message saying "Please make sure you have entered the required info in all fields!".

If I enter the first name and last name without entering anything else, then click submit, it doesn't give a Javascript alert, but gives the "error.html" alert.

If I enter values for first name, last name, and select a degree from the three options, it doesn't give a javascript alert or even an "error.html" alert.

But if I enter all the required info on the form except for the last name, it gives the javascript alert mentioned above and will not submit the form. Why the last name specifically?

2- It never gives the second alert message: "Please make sure you have selected your field of study and your school!", which implies that the "else if" portion is never reached or checked perhaps. Why is this happening?

Here's the HTML file:

{% extends "layout.html" %}

{% block main %}

<!-- http://getbootstrap.com/docs/4.1/content/typography/ -->
<h1 class="mb-3">Form</h1>

<!-- http://getbootstrap.com/docs/4.1/components/forms/ -->
<form action="/form" method="post">

    <!-- TODO -->
    <p>
        <input name="name1" type="text" placeholder="first name">
        <!--https://getbootstrap.com/docs/4.1/components/forms/#overview-->
        <small id="name_as_id" class="form-text text-muted">First name as appears on ID.</small>
    </p>
    <p>
        <input name="name2" type="text" placeholder="last name">
        <!--https://getbootstrap.com/docs/4.1/components/forms/#overview-->
        <small id="name_as_id" class="form-text text-muted">Last name as appears on ID.</small>
    </p>
    <p>
        <input name="degree" type="radio" value="bachelor's degree">bachelor's degree
    </p>
    <p>
        <input name="degree " type="radio" value="master's degree">master's degree
    </p>
    <p>
        <input name="degree" type="radio" value="PhD">PhD
    </p>
    <p>
        Please select your field of study from the drop-down menu below:
    </p>
    <select name="field">
        <option value ="Computer Science">Computer Science</option>
        <option value="Pharmaceutical Sciences">Pharmaceutical Sciences</option>
        <option value="Mechanical Engineering">Mechanical Engineering</option>
    </select>
    <p>
        Please select your school from the drop-down menu below:
    </p>
    <select name="school">
        <option value="University of Alexandria">University of Alexandria</option>
        <option value="Harvard University">Harvard University</option>
        <option value="University of Washington">University of Washington</option>
    </select>

    <!-- http://getbootstrap.com/docs/4.1/components/buttons/ -->
    <p>
    <button class="btn btn-primary" type="submit">Submit</button>
    </p>
</form>

<script>


    document.querySelector('form').onsubmit = function() {

        var i_elements = document.getElementsByTagName('input');
        var s_elements = document.getElementsByTagName('select');
        var num_one = i_elements.length;
        var num_two = s_elements.length;

        for ( var j = 0; j < num_one ; j ++)
        {
            for ( var k = 0; k < num_two; k++)
            {
                if (!i_elements[j].value) {
                    alert("Please make sure you have entered the required info in all fields!");
                    return false;
                }
                else if (!s_elements[k].value) {
                        alert("Please make sure you have selected your field of study and your school!");
                        return false;
                }

            }

        }
        return true;

    };

</script>

{% endblock %}

Thank you!

0

I've figured out part of my issues.

One issue is that I didn't have a disabled selection for the two "select" options, so since I had two answers, one in each select menu, already kind of selected without me going in and choosing them, I think the for loop considered those two select menus already having values.

Now I'm trying to figure out why if I answer all questions on the form except for selecting a degree, the javascript alert does not work, but I get the error message that I put in the post_form() function.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .