0

I have an assignemnt due this week and i cant figure out why i my code wont work. i have very little knowledge about javascript and HTML so please help!!!!!

Make HTML5 page that can either retrieve data from a database table based on a user_name and user_password on the form or insert a new entry into the database for the incident reporter (as done in Assignment01). The retrieval extracts the Incident data for the user from the database. Use a POST method for the insert and a GET method for the retrieval. This implies that there are two alternative forms, which appear on one page. Make one or the other form "appear" on the page
in response to the user clicking one of a pair of buttons.

Add a Javascript function that checks if a 2nd copy of the password entered on the form is the same as the 1st copy entered, and warns the form-filler if they are not the same. The event that triggers the comparison of the two copies of the password can be, for example, an onblur event.

This is my HTML code....i dont why i cant get it to work

<html>
<body>
<label><b>Click the button for  the services you want!</b></label> <br>
<input type="button" value="Insert Incident" onclick="display(Insert Incident)" /></input>
<input type="button" value="Retrieve Incident" onclick="display(Retrieve Incident)" /></input>
<div id= "Insert Incident" style="display:none;" >

<form action="hello.txt">

<script>
function display (Insert Incident){
    if ()
    document.getElementById('Insert Incident').style.display = 'block';
    else
        document.getElementById('Retrieve Incident').style.display = 'none';
    }



function compare ()
{
var v1 = document.getElementById("p1").value
var v2 = document.getElementById("p2").value
if (v1 != v2){
document.getElementById("s1").innerHTML = "Warning, Passwords don't match!"
document.getElementById("s1").style.background = "red"
}
else{
document.getElementById("s1").innerHTML = ""
}
//var v2 = dcoument.getElementById("p2").value
//alert(v1)
}
</script>

<fieldset>
    <legend><b>INSERT</b></legend>

<label>User Name</label>

    <input type="text" name="Name" placeholder= "Enter User Name" autofocus autocomplete="off" required="required"/><br><br>

<label>Password</label> 

    <input type="password" name="Password"id="p1" placeholder= "Enter Password" id="p1"> <br>

<label>Confirm Password</label> 

    <input type="password" name="Confirm Password" id="p2" onblur = "compare()"  placeholder= "Enter Password" id="p2">  <br><br>

<label>Content</label><br>

    <textarea name="Content" placeholder="Whats your incident?" rows = 5 cols = 30 required="required" ></textarea><br>

<span id = "s1" ></span><br>

<input type="submit" value="Submit" /> <br><br>
</fieldset>

</form>
</div>

<div id= "Retrieve Incident" style="display:none;" >
<form action="hello.txt">    

<fieldset>
    <legend><b>RETRIEVE</b></legend>                            
<label>User Name</label> 

    <input type="text" name="name" placeholder= "Enter User Name" /><br><br>

<label>Password</label> 

    <input type="password" name="Password" placeholder= "Enter Password" /><br>

<label>Confirm Password</label> 

    <input type="password" name="Confirm Password" placeholder= "Enter Password" /><br>

            <input type="submit" value="Submit" /> <br><br>


</form>
 </div>
</body>
</html>

Edited by Ezzaral: Added code formatting. Please use it for all code you post.

2
Contributors
2
Replies
3
Views
5 Years
Discussion Span
Last Post by emclondon
1

calm down kid, I had to learn as fast as I can to answer your question.

its kinda complex but once you get a hold of it, its easy as a pie.

<!DOCTYPE HTML>
<HTML lang="en">
    <head>
        <title>
            Incident Report
        </title>
        <META name="description" content="HTML5 WebDatabase Tutorial" />
        <META name="keywords" content="HTML,CSS,JavaScript" />
        <META name="Author" lang="en" content="Prasanna K Yalala" />
        <style type="text/css">
            html,body {
                border: 0;
                height: 100%;
                font-family: arial, helvetica, sans-serif;  
            }
            body{
                background-color: rgba(0, 0, 0, 0.6);
                color: #000;
                height: 100%;
                margin: 0;
            }
            #insert_incident_div {
                display: none;
                margin-top: 8%;
                margin-left: 16%;
                width: 425px;
            }
            #menu{
                margin-top: 23%;
                margin-left: 30%;
            }

            #retrieve_incident_div {
                display: none;
                margin-top: 5%;
                margin-left: 15%;
                width: 425px;
            }

            #control {
                background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#DDDDDD));
                width: 500px;
                position:absolute;
                top: 50%;
                left: 50%;
                width:38em;
                height:20em;
                margin-top: -10em; /*set to a negative number 1/2 of your height*/  
                margin-left: -20em; /*set to a negative number 1/2 of your width*/
                border: 1px solid #ccc;
                -webkit-box-shadow: 2px 2px 2px #999;
            }
            #control button{
                border: none;
                color: #888;
                padding: 5px;
                width: 125px;
                height: 30px;
                border-radius: 5px;
                -webkit-box-shadow: 1px 1px 1px #888;
                background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#CCCCCC));
            }
            #control button:hover{
                color: red;
            }


            #result_div {
                color: red;
                padding-top: 20px;
                padding-left: 35px;
            }


            #message_box{
                height: 80px;
                margin: 0px auto -1px auto;
                width: 275px;
                border-radius: 5px;
                background: #fff;
                color: red;
                display:none;
            }
        </style>

        <script type="text/javascript">

            /**
            * Prasanna K Yalala
            * 
            * References
            * .tutorialspoint.com,  Stackoverflow.com,
            * html5rocks.com,  Tizag.com, w3schools.com, 
            *
            * Copyleft 2012, Nothing is Reserved.
            */

            /**
            * Global Variables
            * Database, Database Size, Script Password
            */
            var db = null;
            var password = "password";
            var dbsize = '5 * 2048 * 2048';

            /**
            * This function initializes the database and creates a table if
            * the table doesn't exist with predefined columns.
            * 
            * This function also tries to fetch any existing data (username)
            * from the database.
            */
            function dbinit(){
                db = openDatabase("incident_db", "1.0", "incident_database", dbsize);
                db.transaction(function(tx){tx.executeSql("CREATE TABLE myTable(_id INTEGER PRIMARY KEY, username TEXT, incident TEXT)");});
                retrieveUsername();
            }

            /**
            * This function recieves the name and incident data
            * from the form and inserts the data into the database
            */
            function saveData(name, content){
                v1 = name;
                v2 = content;
                if(v1 == v2 == null){
                    alert("Insertion Rejected! No Data Found!");
                }
                else {
                    db.transaction(function(tx){tx.executeSql("INSERT INTO myTable(username, incident) values (?,?)",[v1,v2]);});
                    document.getElementById('message_box').style.display= 'block';
                    document.getElementById('result_div').style.display= 'block';
                    document.getElementById('result_div').innerHTML = "Records Inserted Successfully!";
                    setTimeout("document.getElementById('message_box').style.display= 'none'",2000)
                    setTimeout("document.getElementById('result_div').style.display= 'none'",2000)
                    setTimeout("action('message')",2000);
                    setTimeout("action('show_menu')",2000);
                    location.reload(true);
                }
            }

            /**
            * This function retrieves the usernames from the data
            * base and groups them by username.
            */
            function retrieveUsername() {
                db.transaction(function(tx) {
                    tx.executeSql("SELECT username FROM myTable GROUP BY username", [], displayData);
                });
            }

            /**
            * This function takes the data from @retrieveUsername
            * function and displays it onto the form in SELECT box
            */                  
            function displayData(tx, result){
                var i;
                var item;
                if(result.rows.length == '0')
                {
                    document.getElementById('retrieve_name').options[result.rows.length]= new Option("--- NO DATA FOUND! ---", result.rows.length);
                }
                else{
                    var selector = document.getElementById('retrieve_name');
                    for (i = 0, item = null; i < result.rows.length; i++) {
                        item = result.rows.item(i);
                        selector.options[i] = new Option(item['username'], item['username']);
                    }
                }
            }

            /**
            * This function fetches specific incident from the database
            * depending on the username specified
            */
            function retrieveIncident(username){
                db.transaction(function(tx) {
                    tx.executeSql("SELECT incident FROM myTable where username = ?",[username], displayIncident);
                });
                return false;
            }

            /**
            * This function displays all the incidents retrieved by
            * the @retrieveIncident function and displays it into the
            * form.
            */
            function displayIncident(tx, result){
                var i;
                var item;
                if((document.getElementById("retrieved_content").value === "") || (document.getElementById("retrieved_content").value === null)){
                    for (i = 0, item = null; i < result.rows.length; i++) {
                        item = result.rows.item(i);
                        document.getElementById("retrieved_content").innerHTML+= item['incident']+"\n";
                    }
                }
                else {
                    document.getElementById("retrieved_content").value = "";
                    document.getElementById('result_div').innerHTML = 'Refreshing data....';
                    document.getElementById('message_box').style.display= 'block';
                    document.getElementById('result_div').style.display= 'block';
                    setTimeout("document.getElementById('message_box').style.display= 'none'",500); 
                    setTimeout("document.getElementById('result_div').style.display= 'none'",500);
                    for (i = 0, item = null; i < result.rows.length; i++) {
                        item = result.rows.item(i);
                        document.getElementById("retrieved_content").value += item['incident']+"\n";
                    }
                }
            }

            /**
            * This function is the UI Switch function. It handles the 
            * Showing and Hiding of the components on the form.
            */
            function action(action_source) {
                if (action_source == 'insert_incident') {
                    document.getElementById('menu').style.display = 'none';
                    document.getElementById('insert_incident_div').style.display = 'block';
                    document.getElementById('retrieve_incident_div').style.display = 'none';
                } else if (action_source == 'retrieve_incident') {
                    document.getElementById('menu').style.display = 'none';
                    document.getElementById('insert_incident_div').style.display = 'none';
                    document.getElementById('retrieve_incident_div').style.display = 'block';
                } else if (action_source == 'close_div') {
                    document.getElementById('menu').style.display = 'block';
                    document.getElementById('insert_incident_div').style.display = 'none';
                    document.getElementById('retrieve_incident_div').style.display = 'none';
                    location.reload(true);
                } else if (action_source == 'show_menu') {
                    document.getElementById('menu').style.display = 'block';
                    document.getElementById('insert_incident_div').style.display = 'none';
                    document.getElementById('retrieve_incident_div').style.display = 'none';
                    document.getElementById('result_div').style.display = 'none';
                } else if  (action_source == 'message') {
                    document.getElementById('insert_incident_div').style.display = 'none';
                    document.getElementById('retrieve_incident_div').style.display = 'none';
                    document.getElementById('menu').style.display = 'none';
                    document.getElementById('result_div').style.display = 'block';
                } else if  (action_source == 'show_result') {
                    document.getElementById('retrieve_submit').style.display = 'none';
                    document.getElementById('result_tr').style.display = 'block';
                    document.getElementById('retrieved_content').style.display = 'block';
                }
                else{
                        return false;
                }
                return false;
            }

            /**
            * This function validates the insert part of the form
            * This handles both Form Validation as well as Password
            * Validation.
            * This function also displays an error message with the 
            * help of @action function
            */
            function check_insert_password() {

                pa1 = document.getElementById('insert_pass1').value;
                pa2 = document.getElementById('insert_pass2').value;
                na1 = document.getElementById('insert_name').value;
                ca1 = document.getElementById('insert_content').value;
                if (pa1 == pa2) {
                    if((pa1 == "") || (pa1 == null)){
                        document.getElementById('result_div').innerHTML = 'Please Enter a Password!';
                        document.getElementById('message_box').style.display= 'block';
                        document.getElementById('result_div').style.display= 'block';
                        setTimeout("document.getElementById('message_box').style.display= 'none'",2500);    
                        setTimeout("document.getElementById('result_div').style.display= 'none'",2500);
                        document.getElementById('insert_pass1').style.background = '#ffccda';
                        document.getElementById('insert_pass2').style.background = '#ffccda';
                        setTimeout("reset_field()",2500);
                        return false;
                    }
                    else if(pa1 == password) {
                        saveData(na1,ca1);
                        return false;
                    } else {
                        document.getElementById('result_div').innerHTML = 'Unauthorized Login';
                        document.getElementById('result_div').style.display= 'block';
                        setTimeout("document.getElementById('message_box').style.display= 'none'",2500);                            
                        setTimeout("document.getElementById('result_div').style.display= 'none'",2500);
                        return false;
                    }
                } else {
                    document.getElementById('result_div').innerHTML = 'Please check your Passwords!';
                    document.getElementById('message_box').style.display= 'block';
                    document.getElementById('result_div').style.display= 'block';
                    setTimeout("document.getElementById('message_box').style.display= 'none'",2500);
                    setTimeout("document.getElementById('result_div').style.display= 'none'",2500);
                    // backgroundColor
                    document.getElementById('insert_pass1').style.background = '#ffccda';
                    document.getElementById('insert_pass2').style.background = '#ffccda';
                    return false;
                }
            }

            /**
            * This function validates the retrieve part of the form
            * This handles both Form Validation as well as Password
            * Validation.
            * This function also displays an error message with the 
            * help of @action function
            */
            function check_retrieve_password() {
                pa11 = document.getElementById('retrieve_pass1').value;
                pa21 = document.getElementById('retrieve_pass2').value;
                na11 = document.getElementById('retrieve_name').value;
                if (pa11 == pa21) {
                    if((pa11=="") || (pa11==null)) {
                        document.getElementById('result_div').innerHTML = 'Please Enter a Password!';
                        document.getElementById('message_box').style.display= 'block';
                        document.getElementById('result_div').style.display= 'block';
                        setTimeout("document.getElementById('message_box').style.display= 'none'",2500);
                        setTimeout("document.getElementById('result_div').style.display= 'none'",2500);
                        document.getElementById('retrieve_pass1').style.background = '#ffccda';
                        document.getElementById('retrieve_pass2').style.background = '#ffccda';
                        setTimeout("reset_field()",2500);
                        return false;
                    }
                    if(pa11 == password) {
                        retrieveIncident(na11);
                        return false;
                    }
                    else {
                        document.getElementById('result_div').innerHTML = 'Login Failed!';
                        document.getElementById('message_box').style.display= 'block';
                        document.getElementById('result_div').style.display= 'block';
                        setTimeout("document.getElementById('message_box').style.display= 'none'",2500);
                        setTimeout("document.getElementById('result_div').style.display= 'none'",2500);

                        return false;
                    }
                } else {
                    document.getElementById('result_div').innerHTML = 'Please check your Password!';
                    document.getElementById('message_box').style.display= 'block';
                    document.getElementById('result_div').style.display= 'block';
                    setTimeout("document.getElementById('message_box').style.display= 'none'",2500);
                    setTimeout("document.getElementById('result_div').style.display= 'none'",2500);
                    // backgroundColor
                    document.getElementById('retrieve_pass1').style.background = '#ffccda';
                    document.getElementById('retrieve_pass2').style.background = '#ffccda';
                    return false;
                }
            }

            function reset_field(){
                document.getElementById('insert_pass1').style.background = '#fff';
                document.getElementById('insert_pass2').style.background = '#fff';
                document.getElementById('retrieve_pass1').style.background = '#fff';
                document.getElementById('retrieve_pass2').style.background = '#fff';
            }
        </script>
</head>

<body onload="dbinit();">
    <div id="control">
        <div id="menu">
            <button type="button" name="insert_incident" onclick="action(this.name);">Insert Incident</button>
            <button type="button" name="retrieve_incident" onclick="action(this.name);">Retrieve Incident</button>
        </div>
        <div id="insert_incident_div">
            <table width="450">
                <form name="insertform" action="#" method="POST" onsubmit="return check_insert_password();">
                    <tr>
                        <td>
                            Username
                        </td>
                        <td>
                            <input type="text" name="name" id="insert_name" placeholder="Enter username" required="required" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Password
                        </td>
                        <td>
                            <input type="password" name="password" id="insert_pass1" onblur="reset_field();" placeholder="Enter password" required="required" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Confirm Password
                        </td>
                        <td>
                            <input type="password" name="confirm" id="insert_pass2" onblur="reset_field();" placeholder="Re-enter password again" required="required" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Incident
                        </td>
                        <td>
                            <textarea id="insert_content" placeholder="What's your incident?" rows=5 cols=30 required="required"></textarea>
                        </td>
                    </tr>
                    <tr>
                        <td align="right">
                            <button type="submit" onsubmit="return check_insert_password();">Add Incident</button>
                        </td>
                </form>
                        <td>
                            <button type="button" name="close_div" onclick="action(this.name);">Close</button>
                        </td>
                    </tr>
            </table>
        </div>
        <div id="retrieve_incident_div">
            <table width="450">
                <tr>
                    <td>
                        Username
                    </td>
                    <td>
                        <select id="retrieve_name"><option>&nbsp</option></select>
                    </td>
                </tr>
                <tr>
                    <td>
                        Password
                    </td>
                    <td>
                        <input type="password" name="password" onblur="reset_field();" id="retrieve_pass1" placeholder="Enter password" required="required" />
                    </td>
                </tr>
                <tr>
                    <td>
                        Confirm Password
                    </td>
                    <td>
                        <input type="password" name="confirm" id="retrieve_pass2" onblur="reset_field();" placeholder="Re-enter password again" required="required" />
                    </td>
                </tr>
                <tr id="result_tr">
                    <td>
                        Incident
                    </td>
                    <td>
                        <textarea id="retrieved_content" placeholder="Please select a username..." rows=7 cols=30 readonly="readonly"></textarea>
                    </td>
                </tr>
                <tr>
                    <td align="right">
                        <button type="button" id="retrieve_submit" onclick="return check_retrieve_password();">Show Incidents</button>
                    </td>
                    <td>
                        <button type="button" name="close_div" onclick="action(this.name);">Close</button>
                    </td>
                </tr>
            </table>
        </div>
    </div>
    <div id="message_box">
        <div id="result_div">
            &nbsp;
        </div>
    </div>
</body>
</HTML>

Although I haven't used any Ajax or any other ready made scripts. I've used JS to do something what Ajax does.
The data is stored locally in SQLite based db (called webdatabase)..

I got a bit carried away and made the code function differently, But I guess you could figure out which way to turn and how to modify it based on yoru requirements.

If you need any help, just drop a line, I may or maynot reply.

Edited by emclondon

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.