PHP & HTML Form with javascript onsubmit not executed

Question

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!

try to write onSubmit="return ValidateForm(this);" instead of onSubmit="return ValidateForm(details);" — Vitaly Muminov
– Vitaly Muminov, Commented Apr 11, 2012 at 17:28
What exactly are you intending to pass to your Javascript function? Because right now, you're telling it your passing a variable called details not the variable string 'details' which I'm guessing is what you intended. — Ally
– Ally, Commented Apr 11, 2012 at 17:29
@Ally - That's probably the issue, without being able to see the js — orourkek
– orourkek, Commented Apr 11, 2012 at 17:36
on a side note, why are you exit(); instead of return? is ValidateForm(details); returning false? — Jonathan DS
– Jonathan DS, Commented Apr 11, 2012 at 17:41

Starx · Accepted Answer · 2012-04-11 17:45:36Z

2

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.

edited Apr 11, 2012 at 17:45

answered Apr 11, 2012 at 17:30

Starx

79.3k50 gold badges187 silver badges266 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Starx Over a year ago

@orourkek, I am sorry you think so.

orourkek Over a year ago

it does answer his question in a way, but before your edit you didn't even explain what he had to do... By the comments on the OP you can see I agree with you on the solution, but there was no actual answer to his question here, at the time

Jason Fuller · Accepted Answer · 2012-04-11 19:44:04Z

0

Comment converted to answer

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

Glad that helped.

answered Apr 11, 2012 at 19:44

Jason Fuller

1271 silver badge10 bronze badges

Collectives™ on Stack Overflow

PHP & HTML Form with javascript onsubmit not executed

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related