how to create pop up after user has registered successfully without servlet

3.3k views Asked by At
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Multi Step Form with Progress Bar using jQuery and CSS3</title>


<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
</head>

<body>

    <!-- multistep form -->
    <form id="msform">
        <!-- progressbar -->
        <ul id="progressbar">
            <li class="active">Account Setup</li>
            <li>Social Profiles</li>
            <li>Personal Details</li>
        </ul>
        <!-- fieldsets -->
        <fieldset>
            <h2 class="fs-title">Create your account</h2>
            <h3 class="fs-subtitle">This is step 1</h3>
            <input type="text" name="email" placeholder="Email" /> <input
                type="password" name="pass" placeholder="Password" /> <input
                type="password" name="cpass" placeholder="Confirm Password" /> <input
                type="button" name="next" class="next action-button" value="Next" />
        </fieldset>
        <fieldset>
            <h2 class="fs-title">Social Profiles</h2>
            <h3 class="fs-subtitle">Your presence on the social network</h3>
            <input type="text" name="twitter" placeholder="Twitter" /> <input
                type="text" name="facebook" placeholder="Facebook" /> <input
                type="text" name="gplus" placeholder="Google Plus" /> <input
                type="button" name="previous" class="previous action-button"
                value="Previous" /> <input type="button" name="next"
                class="next action-button" value="Next" />
        </fieldset>
        <fieldset>
            <h2 class="fs-title">Personal Details</h2>
            <h3 class="fs-subtitle">We will never sell it</h3>
            <input type="text" name="fname" placeholder="First Name" /> <input
                type="text" name="lname" placeholder="Last Name" /> <input
                type="text" name="phone" placeholder="Phone" />
            <textarea name="address" placeholder="Address"></textarea>
            <input type="button" name="previous" class="previous action-button"
                value="Previous" /> <input type="submit" name="submit"
                class="submit action-button" value="Submit" />
        </fieldset>
    </form>

    <!-- jQuery -->
    <script src="http://thecodeplayer.com/uploads/js/jquery-1.9.1.min.js"
        type="text/javascript"></script>
    <!-- jQuery easing plugin -->
    <script src="http://thecodeplayer.com/uploads/js/jquery.easing.min.js"
        type="text/javascript"></script>

    <script src="js/index.js"></script>
    <script type="text/javascript">
function alertName(){
alert("Form has been submitted");
} 
</script>

<script type="text/javascript"> window.onload = alertName; </script>
</body>
</html>

I am trying to create a pop up after user registers successfully. But what happens is i am getting pop up after page is refreshed. Not able to show after clicking on submit button . Above is my code. What are likely changes that should be done ?. I am not using servlets.

1

There are 1 answers

1
Shubham Pendharkar On

Write a function in java script

<script>
function validateForm() {
        alert("User Registered Successfully");
        return true;
    }
</script>

Create form like this:

<form id="msform" name="register" onsubmit="return validateForm()">
<input type="text" name="username" >
 ********your code****
</form>

For false condition:

<script>
function validateForm() {
    var x = document.forms["register"]["username"].value;
    if (x == null || x == "") {
        alert("Username cannot be empty..!!!");
        return false;
    }
</script>