April 11, 2012

PHP & HTML Form with javascript onsubmit not executed

Question by Baba

I have a HTML form asking for user input. A javascript function is meant to validate the form and should be triggered (using onsubmit) BEFORE executing the PHP code. (The js file is referenced in the header <script type="text/javascript" src="js/javascript.js"></script>)

HOWEVER the javascript is never executed and instead the PHP code executes and (correctly) includes the new file.

How can i make the javascript execute as required?

HTML file:

<form name="details" action="" method="post" 
     onSubmit="return ValidateForm(details);">
...
<input type="submit" name="post-this-form" value="Next"/>
</form>

PHP file:

if (isset($_POST['post-this-form']) and 
     $_POST['post-this-form'] == 'Next')
{
...
some php 
...
include 'shipping-details.html.php';
exit();
}

EDIT

here is the javascript as requested. It has been tested and worked without any PHP involved. By passing details (the name of the form) i’m making all the form fields accessible.

function ValidateForm(details)
        {
        var firstName=document.forms.details.firstName.value;
        var lastName=document.forms.details.lastName.value;
        var streetAddress=document.forms.details.streetAddress.value;
        var town=document.forms.details.town.value;
        var city=document.forms.details.city.value;
        var zip=document.forms.details.zip.value;
        var country=document.forms.details.country.value;       
        var creditCard=document.forms.details.creditcard.value;                 

                ...

        //Checks firstName
        if ((firstName=="")||(!firstName.match(alphabetExpression)))
            {
            alert ("Invalid first name, please re-enter");
            return false;
            }
                 ...

        //Checks creditCard
        if ((creditCard=="")||(!creditCard.match(numericExpression))||(creditCardLength!=16))
            {
            alert ("Invalid credit card entry, please re-enter");
            return false;
            }       
        }// end function

EDIT 2

i added alert ("Hi"); to the start of the javascript and the alert never shows up which leads me to think that the function isn’t executed at all.

EDIT 3

My initial suspicion that this problem could be due to PHP was wrong. As Jason mentioned in his comments the problem was in the javascript itself. It is a bit strange thought because the same javascript code worked “on its own” without PHP and on my local machine. So many factors to consider…thanks All for taking the time to have a look at my problem!

Answer by Jason Fuller

Comment converted to answer

“I bet there is a javascript error. Open error console. ctrl+shift+j in firefox.”

Glad that helped.

Answer by Starx

Here are few things you must know the about the functions you are trying to build

function ValidateForm() {
     this; // this contains the form name no need for any variable declaration

     return true; // or false This is very important to continue the execution
                  // false stops the submittion
}

When you fix both of these issues, it should work as you want.

Author: Nabin Nepal (Starx)

Hello, I am Nabin Nepal and you can call me Starx. This is my blog where write about my life and my involvements. I am a Software Developer, A Cyclist and a Realist. I hope you will find my blog interesting. Follow me on Google+

...

Please fill the form - I will response as fast as I can!