Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html> 
<html> 
<head> 
    <title>Form Action Example</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
    
    <script>
        // Submit form with id function
        function myfunction() {
            var name = document.getElementById("name").value;
            var email = document.getElementById("email").value;
            var contact = document.getElementById("contact").value;
            if (validation()) // Calling validation function
            {
                document.getElementById("form_id").action = "success.php"; // Setting form action to "success.php" page
                document.getElementById("form_id").submit(); // Submitting form
            }
        }
        // Name and Email validation Function
        function validation() {
            var name = document.getElementById("name").value;
            var email = document.getElementById("email").value;
            var contact = document.getElementById("contact").value;
            var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
            if (name === '' || email === '' || contact === '') {
                alert("Please fill all fields...!!!!!!");
                return false;
            } else if (!(email).match(emailReg)) {
                alert("Invalid Email...!!!!!!");
                return false;
            } else {
                return true;
            }
        }
    </script>
    
</head> 
<body> 
​
<div data-role="page" id="menupage">
​
    <div data-role="header">
    <h1>Form Action Example</h1> 
    </div><!-- /header -->
​
    <div data-role="content">    
    <form id="form_id" method="post" name="myform">
        <br />
        <label>Name :</label>
        <input id="name" name="name" placeholder="Name" type="text">
        <br />
        <label>Email :</label>
        <input id="email" name="email" placeholder="Valid Email" type="text">
        <br />
        <label>Contact No. :</label>
        <input id="contact" name="contact" placeholder="Contact No." type="text">
        <br />
        <input onclick="myfunction()" type="button" value="Submit">
    </form> 
    </div><!-- /content -->
​
</div><!-- /page -->
​
</body>
</html>
 
​
 
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers