Javascript Validation Form onSubmit False Still submits

  • devilwood
  • Silver Member
  • Silver Member
  • User avatar
  • Posts: 436

Post 3+ Months Ago

I check a small form with some javascript.


Javascript
Code: [ Select ]

function validateform(form)
{


        if (form.zip_code.value.length != 5) {
         
                 alert("Please check your zip code. It should be 5 digits.");
               form.zip_code.focus();
               form.submitbtn.style.display = "";
               form.loading.style.display='none';
               return false;
                             
        } else if (form.fname.value == "") {
               alert('Please fill in your first name.');
               form.fname.focus();
               form.submitbtn.style.display = "";
               form.loading.style.display='none';
               return false;
        } else if (form.lname.value == "") {
               alert('Please fill in your last name.');
               form.lname.focus();
               form.submitbtn.style.display = "";
               form.loading.style.display='none';
               return false;
       
        } else {
        return true;
        }       
}
  1. function validateform(form)
  2. {
  3.         if (form.zip_code.value.length != 5) {
  4.          
  5.                  alert("Please check your zip code. It should be 5 digits.");
  6.                form.zip_code.focus();
  7.                form.submitbtn.style.display = "";
  8.                form.loading.style.display='none';
  9.                return false;
  10.                              
  11.         } else if (form.fname.value == "") {
  12.                alert('Please fill in your first name.');
  13.                form.fname.focus();
  14.                form.submitbtn.style.display = "";
  15.                form.loading.style.display='none';
  16.                return false;
  17.         } else if (form.lname.value == "") {
  18.                alert('Please fill in your last name.');
  19.                form.lname.focus();
  20.                form.submitbtn.style.display = "";
  21.                form.loading.style.display='none';
  22.                return false;
  23.        
  24.         } else {
  25.         return true;
  26.         }       
  27. }



html:
Code: [ Select ]

<form name="myform1" id="myform1" method="POST" action="process.php" onSubmit="return validateform(this);" >

    <table border="0" width="330" cellspacing="5" id="table2">
        <tr>
        <td align="right" width="148">
        <font color="#000">zip code</font></td>
        <td align="left" width="163"><input name="zip_code" maxlength="5" size="5" type="text" class="texta"/></td>
        </tr>
        <tr>
        <td align="right" width="148">
        <font color="#000">first name</font></td>
        <td align="left" width="163">
        <input name="fname" size="15" type="text" class="texta" /></td>
        </tr>
        <tr>
        <td align="right" width="148">
        <font color="#000">last name</font></td>
        <td align="left" width="163">
        <font color="#000">
        <input name="lname" size="15" type="text" class="texta" /></font></td>
        </tr>
        <tr>
        <td colspan="2">
        <img src="images/loading.gif" alt="" border="0" name = "loading" style = "display:none;">
        </font>
        <input type="image" src="images/form-button.png" BORDER="0" ALT="Submit Form" value="Click to Submit! " name="submitbtn" onclick = "this.style.display='none', loading.style.display=''" />
        </td>
        </tr>
    </table>
</form>
  1. <form name="myform1" id="myform1" method="POST" action="process.php" onSubmit="return validateform(this);" >
  2.     <table border="0" width="330" cellspacing="5" id="table2">
  3.         <tr>
  4.         <td align="right" width="148">
  5.         <font color="#000">zip code</font></td>
  6.         <td align="left" width="163"><input name="zip_code" maxlength="5" size="5" type="text" class="texta"/></td>
  7.         </tr>
  8.         <tr>
  9.         <td align="right" width="148">
  10.         <font color="#000">first name</font></td>
  11.         <td align="left" width="163">
  12.         <input name="fname" size="15" type="text" class="texta" /></td>
  13.         </tr>
  14.         <tr>
  15.         <td align="right" width="148">
  16.         <font color="#000">last name</font></td>
  17.         <td align="left" width="163">
  18.         <font color="#000">
  19.         <input name="lname" size="15" type="text" class="texta" /></font></td>
  20.         </tr>
  21.         <tr>
  22.         <td colspan="2">
  23.         <img src="images/loading.gif" alt="" border="0" name = "loading" style = "display:none;">
  24.         </font>
  25.         <input type="image" src="images/form-button.png" BORDER="0" ALT="Submit Form" value="Click to Submit! " name="submitbtn" onclick = "this.style.display='none', loading.style.display=''" />
  26.         </td>
  27.         </tr>
  28.     </table>
  29. </form>



The javascript fires but it seems with the alert() command when the user presses OK that it ends up submitting the form. I guess I could write another function to manually submit the form or I actually rewrote the javascript using the confirm() command and then checking if the user hits OK or Cancel and then setting both to return false. This seems stop the form from submitting, but may be confusing for my users. Probably most would just hit OK and continue and while hitting CANCEL will do the same thing I just thought I need to figure out why using alert() isn't working when there is tons of documentation on validating a form this way.
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • devilwood
  • Silver Member
  • Silver Member
  • User avatar
  • Posts: 436

Post 3+ Months Ago

Is there a way to return FALSE when the user clicks OK on the alert box? It's my understanding that OK on the alert() is supposed to return undefined. Is this accurate?
  • devilwood
  • Silver Member
  • Silver Member
  • User avatar
  • Posts: 436

Post 3+ Months Ago

So today I was just going one by one commenting out lines.

I have found

Code: [ Select ]
form.submitbtn.style.display = "";


is causing the form to submit.

On the image submit button onclick I set itself to display none in order to prevent double submissions. It hides the button and displays the loading gif.

Well, if the validation fails then I need to re-display the submit button and hide the loading gif and this process is causing the form to submit after hitting OK on the alert.

Thoughts?
  • Bigwebmaster
  • Site Admin
  • Site Admin
  • User avatar
  • Posts: 9090
  • Loc: Seattle, WA & Phoenix, AZ

Post 3+ Months Ago

So if you remove that line you mention then it actually works the correct way not submitting the form? Very odd, does it do this in all of the major browsers?

I don't think this would cause the problem, but noticed that where your loading.gif html is, you have a closing font tag after it that makes no sense. I usually always start with making sure your HTML is correct just in case there is some random weird bug caused by that.
  • Bigwebmaster
  • Site Admin
  • Site Admin
  • User avatar
  • Posts: 9090
  • Loc: Seattle, WA & Phoenix, AZ

Post 3+ Months Ago

One thought here is it might be better to change it to an onclick event and always return false, and then within your JavaScript do something like:

form.submit()

when it is ready to actually go through. Not sure if that would change the behavior.
  • devilwood
  • Silver Member
  • Silver Member
  • User avatar
  • Posts: 436

Post 3+ Months Ago

Yep, sorry I tried to clean up the code or rather all the static text. I removed the beginning but didn't catch the closing tag. I've fixed in my test site which is as bare minimum html because I agree getting the html right is first. However, the behavior is the same and this particular instance doesn't appear to affect it.

I've tried variations of manually submitting the form with form.submit() but the code doesn't have to get that far because as soon as I set the style.display = ''; for the submitbtn the form submits. I can show/hide the loading gif and the form doesn't submit. So, maybe this is a bug with using a submit button or image/submit button and changing it's css display.

I've tested in IE9 and Chrome. They both submit the form with form.submitbtn.style.display = '';

The whole point of the showing/hiding of the submit button was to prevent multiple clicks. So, I just set the submit button to hide when the javascript returns true (when it's supposed to submit). Otherwise, if the javascript returns false the user can't click submit again because of the alert box. The user has to click OK on the box before being able to hit submit again. So, only when the javascript is true do I really need to remove the submit button anyway. Also, if the javascript is true then the process script shouldn't have any problems.

Thanks BWM. I've got that solution implemented and I think it will work but the multiple submissions are for people whose PC hangs while submitting which is hard to replicate. :) I will know for sure if I see a bunch of multiple entries which I also added code in process.php that helps with that too, but I would still like to know why style.display submits a form.

Post Information

  • Total Posts in this topic: 6 posts
  • Users browsing this forum: No registered users and 90 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.