My page won't stop advancing to next page, even if required fields are not filled in

Question

Possible Duplicate:
I want to verify in JavaScript that my required fields are not blank

I posted this earlier and none of the solutions worked. I did use some of the advice so I'm probably closer. When the user submits, it advances to the next page even if the required fields are not completed. I want it so that if any required fields are blank, it does not advance. How should I change my code to accomplish this?

    <script type="text/javascript">
    function insert() {
        if (window.XMLHttpRequest) {
            xmlhttp = new XLMHttpRequest();
        } else {
            xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
        }

        cn1 = 'child_name'+document.getElementById('child_name').value;
        ag2 = 'age'+document.getElementById('age').value;
        hm3 = 'hometown'+document.getElementById('hometown').value;
        bg4 = 'boy_girl'+document.getElementById('boy_girl').value;
        fn5 = 'first_name'+document.getElementById('first_name').value;
        ln6 = 'last_name'+document.getElementById('last_name').value;
        email = 'email'+document.getElementById('email').value;
        ad8 = 'address1'+document.getElementById('address1').value;
        ad9 = 'address2'+document.getElementById('address2').value;
        ct10 = 'city'+document.getElementById('city').value;
        st11 = 'state'+document.getElementById('state').value;
        zp12 = 'zip'+document.getElementById('zip').value;

        var flagInvalid = false;
        var tempArray = document.getElementsByClassName("required");
        for (var i = 0; i < tempArray.length; i++)
        {
            if (tempArray[i].value == ""){
                flagInvalid = true;
                break;
            }
        }

        if (flagInvalid == false) {
        xmlhttp.open('POST', 'payment.php', true);
        xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
        xmlhttp.send(cn1&ag2&hm3&bg4&fn5&ln6&email$ad8&ad9&ct10&st11&zp12);

        } else {
            alert ("Please enter all required fields.");
        }

    }
</script>

If you've already posted elsewhere, continue to post there. Starting a new question on the same topic is considered bad form. — Madbreaks, Oct 19 '12 at 17:10
I'm sorry for the breach of etiquette - new to this. Thank you all for the help. — CTViking, Oct 19 '12 at 17:18

davehale23 · Answer 1 · 2012-10-19T17:27:08.190

1

See this fiddle. Your logic seems to work fine. Is there something else going on with the page?

Is it just that flagInvalid is always coming up 'false'? and so the ajax call is always made?

EDIT: I had another thought. Are you running the insert() function from a button? Or an anchor tag. If you are using a button like this fiddle and your button is inside a form then it will still run the insert() function, but will submit the form right away and it might seem like your page is going somewhere else.

edited Oct 19 '12 at 17:27

answered Oct 19 '12 at 17:18

davehale23

4,374
2
27
40

"EDIT: I had another thought. Are you running the insert() function from a button? Or an anchor tag. If you are using a button like this fiddle and your button is inside a form then it will still run the insert() function, but will submit the form right away and it might seem like your page is going somewhere else." --- YES, this is the problem. But if I remove the anchor tag, it goes nowhere. How do I correct it? – CTViking Oct 19 '12 at 17:39
1

If you add `return false;` to your `onclick()` in your button, it will not submit the form. `` See [this updated fiddle](http://jsfiddle.net/XfjPX/3/) – davehale23 Oct 19 '12 at 17:47
"If you add return false; to your onclick() in your button, it will not submit the form." -- Just tried it, nothing changed, the form is still submitted. – CTViking Oct 19 '12 at 17:59
Can you post your button code? – davehale23 Oct 19 '12 at 18:07
submit – CTViking Oct 19 '12 at 18:13
Also:
– CTViking Oct 19 '12 at 18:23
hmmm, well, just to confirm that the issue is with the button itself, try swapping out your button with an anchor tag like I have in my updated fiddle. `submit`. If that doesn't do it, compare your HTML and JS with my latest fiddle to see if there are any differences. http://jsfiddle.net/XfjPX/3/ Without all your code, this fiddle is as close as I can get. – davehale23 Oct 19 '12 at 19:25
when I added that line and used the new button to submit, it merely refreshed the page. It didn't advance and did not give me an alert, whether the fields were filled in or not. Is there any other info I can give you? – CTViking Oct 19 '12 at 19:47
Are you able to make a fiddle of all your code? Doing this will help us see what's going on, and it might just help you see what's going on. – davehale23 Oct 19 '12 at 19:56
http://jsfiddle.net/J2yWQ/3/ -- take a look – CTViking Oct 19 '12 at 20:48
1

found it. spelling error `xmlhttp = new XLMHttpRequest();` should be `xmlhttp = new XMLHttpRequest();` The error was preventing code from continuing, so the JS never got to the 'return false', it just submitted the page. I have updated your fiddle here and all is well http://jsfiddle.net/J2yWQ/4/ – davehale23 Oct 19 '12 at 21:02
Thanks Dave. This has taken me all day and would have taken longer if you didn't catch that. – CTViking Oct 19 '12 at 21:12
New problem with the fix - Now I get the "Please enter all fields" message even when it is filled out. Even happens on the fiddle. – CTViking Oct 19 '12 at 21:34
1

http://jsfiddle.net/J2yWQ/7/ You had `class='required'` on some `
` items. You should only put it on `input`. I should have caught that.

davehale23

Oct 19 '12 at 21:45

also, note that I added a try/catch to http://jsfiddle.net/J2yWQ/7/ so that when the ajax call errors out, the page will not submit. If you use the try/catch, you should actually do something with the `err` being caught – davehale23 Oct 19 '12 at 21:49

That seems to have done it. The only thing missing is that now the radio input boy_girl is not required. Where do I put the "required" tag for that one? – CTViking Oct 19 '12 at 22:03

I updated again. http://jsfiddle.net/J2yWQ/8/ notice that I am also handling the `select` element now as well. Your validation seems fine for now, but if you are going to be doing this type of thing often, I'd suggest that you get familiar with something like http://docs.jquery.com/Plugins/Validation It's probably not worth getting into for just this one page, but worth learning for more complex stuff. – davehale23 Oct 19 '12 at 23:00

I just tried your fix on the fiddle and it doesn't seem to be working. I get the "Please enter required fields" message even when all fields are filled in. – CTViking Oct 19 '12 at 23:33

let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/18339/discussion-between-davehale23-and-user1753464) – davehale23 Oct 20 '12 at 15:06

score 0 · Answer 2 · answered Oct 19 '12 at 17:23

0

Try using the strict comparison operator on this line:

if (tempArray[i].value === ""){

answered Oct 19 '12 at 17:23

gimg1

1,121
10
24

My page won't stop advancing to next page, even if required fields are not filled in

2 Answers2