<button type="button" onclick="submitForm()">Submit</button>

When I press this button it runs a javascript validation function that returns true or false based on whether some data is formatted properly.

What I need to do next is: if true submit the validated data to mySql database using a php script.

I am stumped at how I can acplish this. I hope I am clear. Thanks.

Also, I can't use ajax.

<button type="button" onclick="submitForm()">Submit</button>

When I press this button it runs a javascript validation function that returns true or false based on whether some data is formatted properly.

What I need to do next is: if true submit the validated data to mySql database using a php script.

I am stumped at how I can acplish this. I hope I am clear. Thanks.

Also, I can't use ajax.

• javascript
• php
• html
• mysql
• onclick

• Are you allowed to use jquery library? – deerawan Commented Nov 6, 2014 at 6:50
• No, just suppose to use javascript, php, and html & css. – johnnyX Commented Nov 6, 2014 at 18:16

11 Answers 11

In the php file you can do all the mysql verifications needed. The submit can be something like this

<form action="update.php" method="post"> <button type="submit" onclick="return submitForm()">Submit</button> </form>

Notice the return in the function call.
The verification is returning false when validation fails.

function submitForm() {  
   if(validation) { // fails    
      alert("your message");  
      return false; 
   } 
}

Do your button type to submit and send to the form ex like this

<form action="update.php" method="post"> <button type="submit" onclick="submitForm()">Submit</button> </form>

In index.php file check the mysql validation

You have missed the return in the function call. Try with

<button type="button" onclick="return submitForm()">Submit</button>

where you are returning false when validation fails.

function submitForm() { if(validation) // fails { alert("your message"); return false; } }

use type = "submit" instead of button. try with -

<button type="submit" onclick="submitForm()">Submit</button>

js validation

function submitForm() {
   //your validation codes

   //if validates

       return true
   //else

       return false;
}

if validation succeeds the the form will be submitted else will not be submitted.

HTML:

<button type="button" onclick="submitForm()">Submit</button>

JS:

function submitForm() {
  if(){ //condition to validate
    return true;
  }else{
    return false; 
  }

}

Also (as a suggestion) you can add a specific function to validate each type of value so then just call it in your function submitForm() by those types

You have missed the return in the function call. Try with

<button type="button" onclick="return submitForm()">Submit</button>
                                 ^

where you are returning false when validation fails.

function submitForm() {
   if(validation) // fails
  {
   alert("your message");
   return false;
  }
}

Do your button type to submit and send to the form ex like this

<form action="index.php" method="post">
....
<button type="submit" onclick="submitForm()">Submit</button>
</form>

In index.php file check the mysql validation

Hope this will help you

You need to add more detail from your html page. For instance the html form itself.

However just a hunch of what you are looking for.... you can use the folling mand in your submitForm() function:

document.getElementById("myForm").submit();

We can't much help if we don't see your code. But in a nutshell you would submit the form by

document.getElementById('formId').submit();

What I need to do next is:

1->perform form.submit()

2->send all data's to database from your action file (action="action.php")

document.getElementById("form").submit()

<script type='text/javascript'>

    function formValidator(){
        // Make quick references to our fields
        var firstname = document.getElementById('firstname');
        var addr = document.getElementById('addr');
        var zip = document.getElementById('zip');
        var state = document.getElementById('state');
        var username = document.getElementById('username');
        var email = document.getElementById('email');

        // Check each input in the order that it appears in the form!
        if(isAlphabet(firstname, "Please enter only letters for your name")){
            if(isAlphanumeric(addr, "Numbers and Letters Only for Address")){
                if(isNumeric(zip, "Please enter a valid zip code")){
                    if(madeSelection(state, "Please Choose a State")){
                        if(lengthRestriction(username, 6, 8)){
                            if(emailValidator(email, "Please enter a valid email address")){
                                return true;
                            }
                        }
                    }
                }
            }
        }


        return false;

    }

    function notEmpty(elem, helperMsg){
        if(elem.value.length == 0){
            alert(helperMsg);
            elem.focus(); // set the focus to this input
            return false;
        }
        return true;
    }

    function isNumeric(elem, helperMsg){
        var numericExpression = /^[0-9]+$/;
        if(elem.value.match(numericExpression)){
            return true;
        }else{
            alert(helperMsg);
            elem.focus();
            return false;
        }
    }

    function isAlphabet(elem, helperMsg){
        var alphaExp = /^[a-zA-Z]+$/;
        if(elem.value.match(alphaExp)){
            return true;
        }else{
            alert(helperMsg);
            elem.focus();
            return false;
        }
    }

    function isAlphanumeric(elem, helperMsg){
        var alphaExp = /^[0-9a-zA-Z]+$/;
        if(elem.value.match(alphaExp)){
            return true;
        }else{
            alert(helperMsg);
            elem.focus();
            return false;
        }
    }

    function lengthRestriction(elem, min, max){
        var uInput = elem.value;
        if(uInput.length >= min && uInput.length <= max){
            return true;
        }else{
            alert("Please enter between " +min+ " and " +max+ " characters");
            elem.focus();
            return false;
        }
    }

    function madeSelection(elem, helperMsg){
        if(elem.value == "Please Choose"){
            alert(helperMsg);
            elem.focus();
            return false;
        }else{
            return true;
        }
    }

    function emailValidator(elem, helperMsg){
        var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
        if(elem.value.match(emailExp)){
            return true;
        }else{
            alert(helperMsg);
            elem.focus();
            return false;
        }
    }
    </script>

    <form onsubmit='return formValidator()' >
    First Name: <input type='text' id='firstname' /><br />
    Address: <input type='text' id='addr' /><br />
    Zip Code: <input type='text' id='zip' /><br />
    State: <select id='state'>
        <option>Please Choose</option>
        <option>AL</option>
        <option>CA</option>
        <option>TX</option>
        <option>WI</option>
    </select><br />
    Username(6-8 characters): <input type='text' id='username' /><br />
    Email: <input type='text' id='email' /><br />
    <input type='submit' value='Check Form' />
    </form>