Scribd Logo
Upload

Welcome to Scribd!

  • 4 views

    Vishali, Web

    Uploaded by

    22cs061

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd

    Vishali, Web

    Uploaded by

    22cs061
    4 views13 pages

    Original Title

    vishali,web

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    4 views13 pages

    Vishali, Web

    Uploaded by

    22cs061

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    You are on page 1of 13

    Ex.No: Date: Dr.N.G.P. Institute of Technology Reg.

    No:

    VALIDATE THE REGISTRATION, USER LOGIN, USER PROFILE AND


    PAYMENT BY CREDIT CARD PAGES USING JAVASCRIPT

    AIM:
    To Validate the Registration, user login, user profile and payment by credit card pages using
    JavaScript.

    PROCEDURE:
    1. Static web pages of an online Book store is developed with following pages.
    o Home page
    o Registration and user Login
    o User profile page
    o Books catalog
    o Payment by credit card
    2. Each input box in webpage is validated using java script code using <script> tag
    in html file.
    3. Designed output is displayed.

    SOURCE CODE:
    Home.html
    <html>
    <head>
    <title> ONLINE BOOK STORES</title>
    </head>
    <body >
    <marquee><h1 align=”center”><b><u><font color="black"> ONLINE BOOK
    STORAGE</u></font>
    </b></h1></marquee>
    <H2 ALIGN="CENTER">
    <b><p><U><FONT COLOR="PURPLE">Welcome to online book storage.
    Press login if you are having id otherwise press registration.</U></FONT></p></b></H2>
    <H2> <FONT COLOR="WHITE"></FONT></H2>
    <H3 ALIGN="CENTER">
    <A HREF="reg.html"><BR><BR><FONT COLOR="black"><ITALIC>REGISTRATION
    FORM</FONT></ITALIC><BR><BR>
    <BR><BR><A HREF="profile.html"><FONT COLOR="black"><ITALIC>USER
    PROFILE</FONT></ITALIC><BR>
    <BR><BR><A HREF="login.html"><FONT COLOR="black"><ITALIC>USER
    LOGIN</FONT></ITALIC><BR>
    <BR><BR><A HREF="catalog.html"><FONT COLOR="black"><ITALIC>BOOKS
    CATALOG</FONT></ITALIC><BR>
    <BR><BR><A HREF="payment.html"><FONT
    COLOR="black"><ITALIC>PAYMENT</FONT></ITALIC><BR>
    <BR><BR><A HREF="Order.html"><FONT COLOR="black"><ITALIC>ORDER
    CONFIRMATION</H3></FONT></ITALIC><BR>
    </body>
    </html>

    Page No:
    Ex.No: Date: Dr.N.G.P. Institute of Technology Reg.No:

    reg.html
    <html>
    <body>
    <script language="javascript">
    function validate() {
    var name = document.myform.name.value;
    var address = document.myform.addr.value;
    var phone = document.myform.phno.value;
    var loginId = document.myform.id.value;
    var password = document.myform.pwd.value;
    if (name == "" || address == "" || phone == "" || loginId == "" || password == "") {
    alert("Please fill all the fields.");
    return false; // Prevent form submission
    } else {
    alert("Registered successfully!");
    return true
    }
    }
    </script>
    <form name="myform">
    <div align="center"><pre>
    <center><h1>Registration form</h1></center>
    NAME :<input type="text" name="name"><br>
    ADDRESS :<input type="text" name="addr"><br>
    CONTACT NUMBER:<input type="text" name="phno"><br>
    LOGIN ID :<input type="text" name="id"><br>
    PASSWORD :<input type="password" name="pwd">
    </pre><br><br></div>
    <div align="center">
    <input type="submit" value="ok" onClick="return validate()">&nbsp;&nbsp;&nbsp;
    <input type="reset" value="clear">
    </div>
    </form>

    <a href="home.html"><p align="center">Back to Home page</p></a>


    </body>
    </html>

    profile.html
    <html>
    <body><br><br><br>
    <script type="text/javascript">
    function validate() {
    var flag = 1;
    if (document.myform.id.value == "" || document.myform.pwd.value == "") {
    flag = 0;
    }
    if (flag == 1) {
    alert("VALID INPUT");
    return true;
    } else {
    alert("INVALID INPUT");
    return false
    }
    }
    </script>
    <form name="myform">
    <div align="center">

    Page No:
    Ex.No: Date: Dr.N.G.P. Institute of Technology Reg.No:

    <pre>
    <center><h1>User's Profile</h1></center>
    LOGIN ID : <input type="text" name="id"><br>
    PASSWORD : <input type="password" name="pwd">
    </pre><br><br>
    </div>
    <div align="center">
    <input type="submit" value="ok" onClick="return validate()">
    <input type="reset" value="clear">
    </div>
    </form>
    <a href="home.html"><p align="center">Back to Home page</p></a>
    </body>
    </html>

    login.html
    <html>
    <body ><br><br><br>
    <script language="javascript">
    function validate() {
    var flag = 1;
    if (document.myform.id.value == "" || document.myform.pwd.value == "") {
    alert("LoginId and Password must be filled");
    flag = 0;
    }
    if (flag == 1) {
    alert("Login successfully");
    window.open("catalog.html", "right");
    }
    }
    </script>
    <form name="myform">
    <div align="center">
    <pre>
    <center><h1>User's Login</h1></center>
    LOGIN ID: <input type="text" name="id"><br>
    PASSWORD: <input type="password" name="pwd">
    </pre>
    <br><br>
    <input type="button" value="ok" onClick="validate()">
    <input type="reset" value="clear">
    </div>
    </form>
    <a href="home.html"><p align="center">Back to Home page</p></a>
    </body>
    </html>

    Catalog.html
    <html>
    <body ><br><br><br>
    <div align="center">
    <form name="bookForm" onsubmit="return validateForm()">
    <pre>
    BOOK TITLE: <input type="text" name="title"><br>
    </pre><br><br>
    <input type="submit" value="ok" name="button1">
    <input type="reset" value="clear" name="button2">
    </form>

    Page No:
    Ex.No: Date: Dr.N.G.P. Institute of Technology Reg.No:

    </div>
    <br><br>
    <div align="center">
    <a href="home.html"><p align="center">Back to Home page</p></a>
    </div>
    <script>
    function validateForm() {
    var bookTitle = document.forms["bookForm"]["title"].value;
    if (bookTitle == "") {
    alert("Please enter the book name.");
    return false;
    } else {
    alert("Entered successfully!");
    return true;
    }
    }
    </script>
    </body>
    </html>

    Payment.html
    <html>
    <body ><br><br><br>
    <script language="javascript">
    function validate() {
    var flag = 1;
    if (document.myform.id.value == "" ||
    document.myform.pwd.value == "" ||
    document.myform.amount.value == "" ||
    document.myform.num.value == "") {
    alert("Please fill all fields.");
    flag = 0;
    }

    var amount = document.myform.amount.value;


    for (var i = 0; i < amount.length; i++) {
    var x = amount.charAt(i);
    if (isNaN(x)) {
    alert("Amount must contain only numbers.");
    flag = 0;
    break;
    }
    }
    var creditCardNumber = document.myform.num.value;
    for (var i = 0; i < creditCardNumber.length; i++) {
    var x = creditCardNumber.charAt(i);
    if (isNaN(x)) {
    alert("Credit card number must contain only numbers.");
    flag = 0;
    break;
    }
    }
    if (flag == 1) {
    alert("Valid input");
    return true; // Allow form submission
    }

    Page No:
    Ex.No: Date: Dr.N.G.P. Institute of Technology Reg.No:

    }
    </script>
    <form name="myform">
    <div align="center">
    <pre>
    <center><h1>Payment Details</h1></center>
    LOGIN ID : <input type="text" name="id"><br>
    PASSWORD : <input type="password" name="pwd"><br>
    AMOUNT : <input type="text" name="amount"><br>
    CREDIT CARD NUMBER: <input type="text" name="num"><br>
    </pre>
    <br><br>
    <input type="submit" value="ok" onClick="return validate()">
    <input type="reset" value="clear">
    </div>
    </form>
    <a href="home.html"><p align="center">Back to Home page</p></a>
    </body>
    </html>

    Order.html
    <html>
    <body ><br><br><br>
    <script language="javascript">
    function validate() {
    if (document.myform.id.value == "" ||
    document.myform.title.value == "" ||
    document.myform.no.value == "" ||
    document.myform.cost.value == "" ||
    document.myform.date.value == "") {
    alert("Please fill all fields.");
    return false
    } else {
    alert("Ordered Successfully");
    return true
    }
    }
    </script>
    <form name="myform" onsubmit="return validate()">
    <div align="center">
    <pre>
    <center><h1>Place your orders!!</h1></center>
    LOGIN ID : <input type="text" name="id"><br>
    TITLE : <input type="text" name="title"><br>
    NO. OF BOOKS : <input type="text" name="no"><br>
    COST OF BOOK : <input type="text" name="cost"><br>
    DATE : <input type="text" name="date"><br>
    </pre><br><br>
    </div>
    <div align="center">
    <input type="submit" value="ok" name="button1">
    <input type="reset" value="clear" name="button2">
    </div>
    </form>
    <a href="home.html"><p align="center">Back to Home page</p></a>
    </body>
    </html>

    Page No:
    Ex.No: Date: Dr.N.G.P. Institute of Technology Reg.No:

    OUTPUT:

    Registration form:

    Page No:
    Ex.No: Date: Dr.N.G.P. Institute of Technology Reg.No:

    User’s Profile:

    Page No:
    Ex.No: Date: Dr.N.G.P. Institute of Technology Reg.No:

    User’s Login:

    Page No:
    Ex.No: Date: Dr.N.G.P. Institute of Technology Reg.No:

    Books Catalog:

    Payment details:

    Page No:
    Ex.No: Date: Dr.N.G.P. Institute of Technology Reg.No:

    Page No:
    Ex.No: Date: Dr.N.G.P. Institute of Technology Reg.No:

    Page No:
    Ex.No: Date: Dr.N.G.P. Institute of Technology Reg.No:

    Order details:

    Page No:
    Ex.No: Date: Dr.N.G.P. Institute of Technology Reg.No:

    RESULT:
    Thus the development of shopping cart application with servlet and JDBC has been
    successfully developed.

    Page No:

    You might also like