Javascript Alert Clears Form Fields

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

Post 3+ Months Ago

I just ran into this today as I am handling a few form validations on the client side. I typically check everything on the server-side but in this instance I need to use JS. So a simple check for first and last name to see if they are empty. If they are empty then I throw an alert box and set focus to the error field. The problem is when I hit OK on the alert window all the fields that are filled out are cleared. I've tested in IE and Chrome. Somehow the page is refreshing and I'm missing setting something to false:

Code: [ Select ]
function validateform(form)
{
    
    if (form.fname.value == "") {
        alert('Please fill in your first name.');
        form.fname.focus();
        return false;
    } else if (form.lname.value == "") {
        alert('Please fill in your last name.');
        form.lname.focus();
        return false;
    } else {
    return true;
    }
}


<form name="maxform" method="POST" action="" onsubmit="" >
        <input type="text" name='fname' id="first_name" size="20"><br>
        <input type="text" name='lname' id="last_name" size="20"><br>
        <input type="text" name='email' id="email" size="20"><br>
        <input type="submit" value="Submit" name="Submit" onClick="validateform(this.form)" />
</form>
  1. function validateform(form)
  2. {
  3.     
  4.     if (form.fname.value == "") {
  5.         alert('Please fill in your first name.');
  6.         form.fname.focus();
  7.         return false;
  8.     } else if (form.lname.value == "") {
  9.         alert('Please fill in your last name.');
  10.         form.lname.focus();
  11.         return false;
  12.     } else {
  13.     return true;
  14.     }
  15. }
  16. <form name="maxform" method="POST" action="" onsubmit="" >
  17.         <input type="text" name='fname' id="first_name" size="20"><br>
  18.         <input type="text" name='lname' id="last_name" size="20"><br>
  19.         <input type="text" name='email' id="email" size="20"><br>
  20.         <input type="submit" value="Submit" name="Submit" onClick="validateform(this.form)" />
  21. </form>



If I add onsubmit="return false" then when I click submit I get form validation and if I get an alert box and hit OK then all the other fields stay filled. However, onsubmit is set to false so the form doesn't submit even when validateform passes so that doesn't work either. This is where the page must be refreshing but I can't seem to keep the fields that are already filled out.
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • ocbohye
  • Born
  • Born
  • ocbohye
  • Posts: 2

Post 3+ Months Ago

That happens because the form gets submitted. YOu must stop it before doing that.

Try setting the JS into onsubmit.

Change to this

<form name="maxform" method="POST" action="" onsubmit="validateform(this);" >
<input type="text" name='fname' id="first_name" size="20"><br>
<input type="text" name='lname' id="last_name" size="20"><br>
<input type="text" name='email' id="email" size="20"><br>
<input type="submit" value="Submit" name="Submit" />
</form>
  • Carrotbob
  • Born
  • Born
  • Carrotbob
  • Posts: 1

Post 3+ Months Ago

I recall there was a real good article about that in recent Software Developer's Journal issue. You might wanna check their site SDJ

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

Post 3+ Months Ago

I haven't yet found the article on SDJ from just a few searches. I'm going to keep at when I got more time.

I got the form straightened out it. Unfortunately, it underwent several changes and I've been wrapped up with a ton of stuff, but the onsubmit method by ocbohye should work. However, my work has changed so much since this post that it's not even the same. I ended up revamping a ton of stuff. Though, I want to say that the correct way mentioned still wasn't working for my purposes. Thanks for the replies, but it's a moot point for me know. I do want to try to find that article as there seems to be some issues with form validation using JS nowadays.

Post Information

  • Total Posts in this topic: 4 posts
  • Users browsing this forum: No registered users and 113 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.