Alert() Loop in JavaScript

Question

I am extremely new to JS, but right now I am trying to create a form validation method that continually checks that all entries are not equal to NaN or NULL (I described this as ""). However I think I am utilizing the "alert()" function incorrectly and it does not stop checking long enough for someone to reenter the information.

My logic was to remain in "checkblanks" function while it returned a Boolean "false", but instead my alert message won't stop displaying on the screen.

enter image description here

Then when I force "stop" the alert through Firefox, and fill out the x1, x2, x3 fields, it prints out operations function twice.

enter image description here

My JS

//Direction Toggle
$("p, #answer").hide();

$("h1").click(function () {
    $(this).next().slideToggle(300);
});

function testResults(form) {

//Form validation
while (checkblanks(form) == false) {
    alert("Please fill in all numeric values");
    checkblanks(form);
}

function checkblanks(pform1) {
    var display = "";

    if (pform1.x1.value == "" || pform1.x1.value == NaN) {
        display += "x1, ";
    }

    if (pform1.x2.value == "" || pform1.x2.value == NaN) {
        display += "x2, ";
    }

    if (pform1.x3.value == "" || pform1.x3.value == NaN) {
        display += "x3";
    }
    if (display != "") {
        return false;
    } else {
        return true;
    }
}

//Complete operations if you're all set!
operations(form);

function operations(form) {
    //JQuery Answer Show
    $(".button").click(function () { //after form submission
        $(".matrix").slideUp(1000, function () { //hiding the matrix form
            $("#answer").slideDown(1000); //and display the answer
        });
    });

    //System Class Local to operations function
    function system(x1, x2, x3, y1, y2, y3, z1, z2, z3, a1, a2, a3) {
        this.x1 = x1;
        this.x2 = x2;
        this.x3 = x3;
        this.y1 = y1;
        this.y2 = y2;
        this.y3 = y3;
        this.z1 = z1;
        this.z2 = z2;
        this.z3 = z3;
        this.a1 = a1;
        this.a2 = a2;
        this.a3 = a3;
        this.calcDanswer = function () {
            return (this.x1 * ((this.y2 * this.z3) - (this.z2 * this.y3))) - (this.y1 * ((this.x2 * this.z3) - (this.z2 * this.x3))) + (this.z1 * ((this.x2 * D.y3) - (this.y2 * this.x3)));
        };
        this.calcXanswer = function () {
            return (this.a1 * ((this.y2 * this.z3) - (this.z2 * this.y3))) - (this.y1 * ((this.a2 * this.z3) - (this.z2 * this.a3))) + (this.z1 * ((this.a2 * this.y3) - (this.y2 * this.a3)));
        };
        this.calcYanswer = function () {
            return (this.x1 * ((this.a2 * this.z3) - (this.z2 * this.a3))) - (this.a1 * ((this.x2 * this.z3) - (this.z2 * this.x3))) + (this.z1 * ((this.x2 * this.a3) - (this.a2 * this.x3)));
        };
        this.calcZanswer = function () {
            return (this.x1 * ((this.y2 * this.a3) - (this.a2 * this.y3))) - (this.y1 * ((this.x2 * this.a3) - (this.a2 * this.x3))) + (this.a1 * ((this.x2 * this.y3) - (this.y2 * this.x3)));
        };
    }

    //Assign x1-a3
    var x1 = form.x1.value;
    var x2 = form.x2.value;
    var x3 = form.x3.value;
    var y1 = form.y1.value;
    var y2 = form.y2.value;
    var y3 = form.y3.value;
    var z1 = form.z1.value;
    var z2 = form.z2.value;
    var z3 = form.z3.value;
    var a1 = form.a1.value;
    var a2 = form.a2.value;
    var a3 = form.a3.value;

    //Pass to constructor and calculate
    var D = new system(x1, x2, x3, y1, y2, y3, z1, z2, z3, a1, a2, a3);
    var X = D.calcXanswer() / D.calcDanswer();
    var Y = D.calcYanswer() / D.calcDanswer();
    var Z = D.calcZanswer() / D.calcDanswer();


    // printing to console
    var out = document.getElementById('real-answer');
    out.innerHTML += "<b>The equations you entered were:</b>" + "<br />" + D.x1 + "x + " + D.y1 + "y + " + D.z1 + "z = " + D.a1 + "<br />" + D.x2 + "x + " + D.y2 + "y + " + D.z2 + "z = " + D.a2 + "<br />" + D.x3 + "x + " + D.y3 + "y + " + D.z3 + "z = " + D.a3 + "<br /><br />" +

        "The answer for <b>D</b> is " + D.calcDanswer() + "<br />" +
        "The answer for <b>Dx</b> is " + D.calcXanswer() + "<br />" +
        "The answer for <b>Dy</b> is " + D.calcYanswer() + "<br />" +
        "The answer for <b>Dz</b> is " + D.calcZanswer() + "<br />" +
        "<b>X</b> is " + X + "<br />" +
        "<b>Y</b> is " + Y + "<br />" +
        "<b>Z</b> is " + Z + "<br />" + "<br />";
    }
}

My HTML

<body>
    <!--DIRECTIONS & FORM-->
    <div class="matrix">
            <h1><span id="highlight">How Does This Work?</span></h1>

        <p>Type in all the information for your system of three equations.
            <br />When finished, hit "Go".</p>
        <!--Form-->
        <FORM NAME="myform" id="form" ACTION="" METHOD="GET">
            <input type="text" name="x1" />x +
            <input type="text" name="y1" />y +
            <input type="text" name="z1" />z =
            <input type="text" name="a1" />
            <br />
            <input type="text" name="x2" />x +
            <input type="text" name="y2" />y +
            <input type="text" name="z2" />z =
            <input type="text" name="a2" />
            <br />
            <input type="text" name="x3" />x +
            <input type="text" name="y3" />y +
            <input type="text" name="z3" />z =
            <input type="text" name="a3" />
            <br />
            <input type="button" class="button" name="button" value="GO" onClick="testResults(this.form)" />
        </FORM>
        <!--....................................-->
    </div>
    <!--ANSWER-->
    <div id="answer">
         <h1><span id="highlight">The Answer:</span></h1>

        <div id='real-answer'></div>
    </div>
</body>

Unfortunately the jsfiddle I created isn't displaying the way my browser is displaying the webpage, but this is my code: http://jsfiddle.net/Xqd5W/

Niet the Dark Absol · Accepted Answer · 2014-02-14 01:09:17Z

3

<input type="number" required />

Problem solved.

answered Feb 14, 2014 at 1:09

Niet the Dark Absol

326k86 gold badges480 silver badges604 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

dandavis Over a year ago

but only for some folks... You might be surprised to learn how many userAgents still don't have all the form features implemented... If it were just IE8 lacking i'd overlook it, but its a lot more than that.

bee Over a year ago

Not so much. It still does not address my problems of an alert box that will not stop displaying and a double print to the console.

Zeta · Accepted Answer · 2014-02-14 01:38:58Z

2

Instead of a while-loop, alert the error message and return false:

if(checkblanks(form) === false) {
    alert("Please fill in all numeric values");
    return false;
}

After all, you cannot continue, and the user should use the submit/go button again after he corrected his mistakes. Also, continuously checking things isn't the way to go in JavaScript, instead, you would listen to events, such as form value changes, and react on them.

The duplicate answer issue

The first action in operations is to add an event listener to the submit button:

function operations(form) {
  $(".button").click(function () { //after form submission
        $(".matrix").slideUp(1000, function () { //hiding the matrix form
            $("#answer").slideDown(1000); //and display the answer
        });
    });

You do this in order to hide the .matrix and in order to show the answer, whenever the button is pressed after this. However, that's not what you actually want to do. Instead, you want to hide the .matrix and show the #answer at this point. Instead of adding an event listener, do the actions exactly at this point:

function operations(form) {
    $(".matrix").slideUp(1000, function () { //hiding the matrix form
        $("#answer").slideDown(1000); //and display the answer
    });
    // ...

Even better, do those steps at the end of operations, right after you edited the innerHTML of your answer.

edited Feb 14, 2014 at 1:38

answered Feb 14, 2014 at 1:11

Zeta

106k13 gold badges205 silver badges249 bronze badges

2 Comments

bee Over a year ago

This is great! However it isn't solving my double printing conundrum though. I think I may somehow be calling the operations function from the operations function because when I remove the "operation(form)" call, it won't call the operations function at all.

Zeta Over a year ago

@rsheeler: Actually, it should show up once per click on "Go". However, the "Go" button and the system input form will hide only when you press it twice, since you add the event listener during the first operation call.

Simon Soriano · Accepted Answer · 2014-02-14 01:16:07Z

0

Instead of a while-loop, listen for the 'submit' event. For example:

$('input').on('submit',function(){
    checkblanks(form);
});

answered Feb 14, 2014 at 1:16

Simon Soriano

81312 silver badges19 bronze badges

3 Comments

Zeta Over a year ago

On 'change' is actually quite bad. Think about it: you filled the first input, the second is still empty, but 'change' fired, and you get an error message since you obviously haven't filled in the rest of the form. 'submit' is much better.

dandavis Over a year ago

is there an input submit event? i would think $("form").on("submit", "input" ... would be better

bee Over a year ago

@Zeta had it right with if(checkblanks(form) === false) { alert("Please fill in all numeric values"); return false; } However I'm still having an issue with double printing

Collectives™ on Stack Overflow

Alert() Loop in JavaScript

3 Answers 3

2 Comments

The duplicate answer issue

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

The duplicate answer issue

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related