Solved

onClick javascript form validation

Posted on 2006-11-19
7
280 Views
Last Modified: 2012-08-13
Hi,

I have a form helpdesk type of form for our website, which has some basic fields - nothing too flashy. I have two functions that run when the form is submitted. I have a basic script that shows an alert thanking the user for submitting their request and shows the time and that they submitted, which is written like so <form onSubmit="theTime()">, which works fine.

I also have a script that runs from the <submit onClick"validateForm()"> submit button. The reason that I have done it this way, is that I want the form to validate before it thanks the user for submitting.

The problem that I am having is this: When I submit the form, the correct alerts are displayed, but the form submits anyway and doesn't cancel like I had hoped that it would. The code is:


function validateForm(){
    var form = document.forms.helpform;
    if(form.elements.Name.value == ''){
        alert('Please enter your name.');
            return false;
      } else if(form_object.elements.Email.value == ''){
        alert('Please enter your email address');
        return false;
    } else if(form_object.elements.Mobile.value == ''){
        alert('Please enter your mobile phone number');
        return false;
    } else if(form_object.elements.Description.value == ''){
        alert('Please enter a description of what you would like us to help you with.');
        return false;
    }
    return true;
}


Basically, after the form is submitted correctly, it runs an .asp script that sends the form to my email address. For some reason it runs the .asp script regardless of errors or not. Any help would be fantastic.

Thanks in advance

ForestTech
0
Comment
Question by:ForestTech
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
  • 2
7 Comments
 
LVL 5

Accepted Solution

by:
jalalmegadeth earned 20 total points
ID: 17976749

    if(form.elements.Name.value == ''){
        alert('Please enter your name.');
          return false;
     } else if(){
           
    } else if(){
       
    return true;
}

once the first statement is correct, it's not goint to check the Else part, and it's goint to return True

what you should do is like that :



    if(form.elements.Name.value == ""){
        alert('Please enter your name.');
          return false;
     }

    if(form_object.elements.Email.value == ""){
        alert('Please enter your email address');
        return false;
     }

  if(form_object.elements.Mobile.value == ""){
        alert('Please enter your mobile phone number');
        return false;
    }
 
  if(form_object.elements.Description.value == ""){
        alert('Please enter a description of what you would like us to help you with.');
        return false;
    }

    return true;




GL
0
 

Author Comment

by:ForestTech
ID: 17976840
That didn't seem to work. The URL is http://www.forestgroup.com.au/helpdesk. Maybe seeing the problem in action will help diagnose the problem. At the moment the code includes the above idea from GL.

I'm using Firefox 2 and IE 7 to test it, if that makes any difference in terms of how they're interpreting the code, but i can't think of any reason why it would....
0
 
LVL 5

Expert Comment

by:deeppra
ID: 17977269
i think the problem is in the if else statement make it as if statement.... and the another problem is when u click on the button the onClick function is executed and here u r validating all the fields and after the function returns it calls the onSubmit method so the form is submitted... so make the two function as a one function and use onSubmit event... in that function u validate all the fields and if the user input is valid return  true or return false and also show the greeting message what u want to thanks the user

regards
Pradeep D
0
Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

 
LVL 5

Expert Comment

by:jalalmegadeth
ID: 17977307
ok add this this before your ValidateForm() function

function send()
{
      if (validateForm() == true)
      {
            document.foo.action="db_Bulletin.asp";
            document.foo.method = "Post"
            document.foo.submit();
      }
}

and in form header :
<FORM Action="formmail.asp" Method="Post" Name="foo">



GL
0
 

Author Comment

by:ForestTech
ID: 17977364
Great idea Pradeep D. It definitely tidied up the process a bit, but it still didn't work unfortunately. It seems like it must be something simple that I'm just not seeing, which is more than often the case. Thanks for the idea!

GL, I'm not sure I understand how this will make a difference? I did try it though, just because I had no other ideas and unfortunately it didn't work either.

The latest is uploaded at www.forestgroup.com.au/helpdesk, so if anyone has any further suggestions, that would be awesome. Here's the code for it just the same:

<script type="text/javascript">

function validateForm(){
            RightNow = new Date()
      var date = RightNow.getDate()
      var month = RightNow.getMonth()+1
      var year = RightNow.getFullYear()
      var hour = RightNow.getHours()
      if(RightNow.getMinutes()<10){
            var minute = '0' + RightNow.getMinutes()
      }
      else{
      var minute = RightNow.getMinutes()
      }
      
    var form_object = document.forms.helpform;
    if(form_object.elements.Name.value == ''){
        alert('Please enter your name.');
            return false;
      }
      if(form_object.elements.Email.value == ''){
        alert('Please enter your email address');
        return false;
    }
      if(form_object.elements.Mobile.value == ''){
        alert('Please enter your mobile phone number');
        return false;
    }
      if(form_object.elements.Description.value == ''){
        alert('Please enter a description of what you would like us to help you with.');
        return false;
    }
      alert('Thank you. Your request was logged at ' + hour + ':' + minute + ' on ' + date + '/' + month + '/' + year + '.');
    return true;
}
</script>
0
 
LVL 5

Expert Comment

by:deeppra
ID: 17977394
hey its working fine... why u didnt accept my ans... u can split the points know
0
 

Author Comment

by:ForestTech
ID: 17977399
I didn't know - sorry. I definitely would have otherwise!!
0

Featured Post

Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Obsolete font tag need to convert to CSS 3 55
Application.cfm not found issue 2 64
compare date to getdate() 8 34
Getting robots.txt Error 9 57
Does your audience prefer people in photos or no people? How can you best highlight what you’re selling? What are your competitors doing, and what can you do that is different and unique from them?  Continue reading to learn how to make your images …
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
The viewer will learn how to dynamically set the form action using jQuery.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

732 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question