7

I want to submit my form to a PHP file called reg.php after validating it using JavaScript. The HTML form is given below:

HTML Form:

<form method="post">
   <input type="text" id="username" name="username"></input>        
   <button type="button" onclick="val()">Sign Up</button>
</form>

JavaScript Validation

The following is the JavaScript validation code:

function val(){

    var uname = document.getElementById('username').value;
    if(!uname){
        document.getElementById("error").innerHTML = "Enter a username";
        return false;
    }
    else{
        // I want to submit form if this else statement executes.
    }


}
1
  • 3
    If you change the button to type="submit" and put onclick="return val();" then the form will submit automatically unless your function returns false (as it does when validation fails). Just add action="reg.php" to the form element.
    – nnnnnn
    Sep 5, 2015 at 7:29

5 Answers 5

14

Just add action="reg.php" in <form> and return val() functions on onclick, also make type="submit" to form submission, like:

HTML CODE:

<form method="post" action="reg.php">
   <input type="text" id="username" name="username"></input>        
   <button type="submit" onclick="return val()">Sign Up</button>
</form>

JAVASCRIPT CODE:

Just add return true; in else like:

function val(){

    var uname = document.getElementById('username').value;
    if(!uname){
        document.getElementById("error").innerHTML = "Enter a username";
        return false;    // in failure case
    }        
    return true;    // in success case
}
3

You can submit it with form name in else section.

document.myForm.submit();

 var uname = document.getElementById('username').value;
 if (!uname) {
      document.getElementById("error").innerHTML = "Enter a username";
      return false;
 } else {
      document.myForm.submit(); // Form will be submitted by it's name
 }

Markup

<form method="post" name="myForm">.....</form>

Demo

1
  • 1
    remember to add the action at <form action="your_file.php">
    – Alejo_Blue
    Jan 23, 2020 at 5:01
2

HTML Code

<form method="post" onsubmit="return val()">
     <input type="text" id="username" name="username">       
     <button type="submit" >Sign Up</button>
 </form>

Javascript Code

function val(){

     var uname = document.getElementById('username').value;
     if(!uname){
         document.getElementById("error").innerHTML = "Enter a username";
         return false;
     }
     else{
         return true;
     }
}
6
  • well, i have a question..in form you are using onsubmit and then you are using button type with onclick? can you please share little bit info with answer then it will be great..sorry for my question. Sep 5, 2015 at 7:39
  • let me explain it , i did the answer like this now , some one sent to me something like if you approved some change , i considered like modifying just shape not the script , but he change it , so i edited to my original answer . Sep 5, 2015 at 7:44
  • but my question is you are calling function onsubmit when you are not using submit button..sorry m not good in php so asking..please don't mind..thanx Sep 5, 2015 at 7:54
  • you are right , it should be type="submit" , I'll change it , thanks Sep 5, 2015 at 7:57
  • sometimes , id don't go deep in code at such issue because i consider that the one who asked is covered , so i copied it as it is , but i was wrong , thanks Sep 5, 2015 at 8:01
0

Here is, you need to get the form element and submit() it, so you need to add the id to the form and the action attribute to the reg.php file:

JSFiddle

<form method="post" id="theForm" action="reg.php">
   <input type="text" id="username" name="username"></input>        
   <button type="button" onclick="val()">Sign Up</button>
</form>

JS:

function val() {
    var uname = document.getElementById('username').value;
    if (!uname) {
        document.getElementById("error").innerHTML = "Enter a username";
        return false;
    } else {
        document.getElementById('theForm').submit();
    }
}
0

You can put a return true statement in the else block and then change the form to this.

<form method="post" action="reg.php">
   <input type="text" id="username" name="username"></input>        
   <button type="submit" onclick="return val()">Sign Up</button>
</form>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.