CODEWITHSUNDEEP
javascripthtml
Random Hack
Random Hack

Reputation: 3

Array value not accesible in another function in javascript

I am developing a simple address book. I am using four different arrays to store name,phone no ,address and email of user.When I am calling add() method its adding values to these arrays,but when I am calling display the details its showing address book empty and all these arrays empty. Thanks in advance please help..

        <!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Address Book</title>
    <link rel="stylesheet" type="text/css" href="addressBook.css" />
    <script src="jquery-2.1.1.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#add').click(function () {
                add();
            });
            $('#delete').click(function () {
                remove_con();
            });
            $('#view').click(function () {
                display();
            });

        });
    </script>
    <script type="text/javascript">
        var BOOK = new Array();
        var BOOKNO = new Array();
        var ADDR = new Array();
        var EMAIL = new Array();

        function add() {
            //Take values from text fields
            var conname = document.getElementById('userNam').value;
            var lenname = BOOK.length;
            var x = BOOK.indexOf(conname);

            var conno = document.getElementById('userNo').value;
            var lenno = BOOKNO.length;
            var y = BOOKNO.indexOf(conno);

            var conaddr = document.getElementById('userAdd').value;
            var lenaddr = ADDR.length;
            var z = ADDR.indexOf(conaddr);

            var conemail = document.getElementById('userEmail').value;
            var lenemail = EMAIL.length;
            var w = EMAIL.indexOf(conemail);



            //Validations
            if (conname.length == 0) {
                alert("Name field cannot be blank");
                return;
            }
            else if (conno.length == 0) {
                alert("Phone number field cannot be Left blank");
                return;
            }
            else if (conno.length != 10) {
                alert("Enter a Valid Phone Number");
                return;
            }
            else if (conaddr.length == 0) {
                alert("Address field cannot be blank");
                return;
            }
            else if (conemail.length == 0) {
                alert("Email field cannot be blank");
                return;
            }


            //RegEX
            alphaExp = /^[a-zA-Z]+$/;
            numExp = /^[0-9]+$/;
            betaExp = /^\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;

            if (!conname.match(alphaExp)) {
                alert("Please enter alphabets only");
                return;
            }
            else if (!conno.match(numExp)) {
                alert("Please enter numerals only");
                return;
            }
            else if (!conemail.match(betaExp)) {
                alert("Please enter a valid email");
                return;
            }

            else if (y >= 0) {
                alert("Phone number already Present");
                return;
            }
            else {
                BOOK[lenname] = conname;
                BOOKNO[lenno] = conno;
                ADDR[lenaddr] = conaddr;
                EMAIL[lenemail] = conemail;
                var l = BOOK.length;
                alert("Contact " + conname + " Added Sucesfully!!!!" +l);
                return BOOK,BOOKNO,ADDR,EMAIL;
            }

        }
        function display() {
            //document.getElementById('hiddenDiv').style.display = "block";
            BOOK = BOOK.sort();

            var l = BOOK.length;
            alert(l);
            var view = "";

            if (l == 0) {
                document.getElementById('hiddenDiv').innerHTML = "ADDRESS BOOK EMPTY!!!";
            }
            if (l >= 1) {
                view = view + "<table border=1px><tr><td><B>NAME</B></td><td><B>PHONE NUMBER</B></td><td><B>ADDRESS</B></td><td><B>EMAIL</B></td>";
                for (var i = 0; i < BOOK.length; i++) {
                    view = view + "<tr><td>" + BOOK[i] + "</td><td>" + BOOKNO[i] + "</td><td>" + ADDR[i] + "</td><td>" + EMAIL[i] + "</td></tr>";
                }
                document.getElementById('hiddenDiv').innerHTML = view + "</table>";
            }
        }
        function remove_con() {
            var remname = prompt("Enter the name to be removed");
            var remlen = BOOK.LENGTH;
            /*var remnam=document.getElementById('name').value;
            var remno=document.getElementById('phno').value;*/
            var z = BOOK.indexOf(remname);
            var z1 = z;
            var z2 = z;
            var z3 = z;

            if (remlen == 0) {
                alert("ADDRESS BOOK IS EMPTY");
                return;
            }
            if (z >= 0) {
                BOOK.splice(z, 1);
                BOOKNO.splice(z1, 1);
                ADDR.splice(z2, 1);
                EMAIL.splice(z3, 1);
                alert("Contact deleted");
            }
            if (z == -1) {
                alert("Contact not present");
            }
        }
        function searchcon() {

            var lenn1 = BOOK.length;

            if (lenn1 == 0) {
                alert("ADDRESS BOOK EMPTY");
                return;
            }

            var coname = prompt("Enter name");
            var ind = BOOK.indexOf(coname);

            if (ind >= 0) {
                alert("contact found");
                return;
            }
            else {
                alert("Contact not present in address book");
            }



        }

    </script>
</head>
<body>
    <div id="mainDiv">
        <header id="startHeader">
            <p id="headerPara">Welcome to Address Book</p>
        </header>
        <div id="midDiv">
            <form id="submissionForm">
                <div class="entryDiv">
                    <p class="inputType">Name:</p>
                    <input id="userNam" type="text" class="buttonsClass" placeholder="Enter Your  Name" required="" />
                </div>

                <div class="entryDiv">
                    <p class="inputType">Number:</p>
                    <input id="userNo" type="text" class="buttonsClass" placeholder="Enter Your Number" required="" />
                </div>
                <div class="entryDiv">
                    <p class="inputType">Address:</p>
                    <input id="userAdd" type="text" class="buttonsClass" placeholder="Enter Your Address" required="" />
                </div>
                <div class="entryDiv">
                    <p class="inputType">Email:</p>
                    <input id="userEmail" type="email" class="buttonsClass" placeholder="Enter Your Email" required="" />
                </div>
                <div id="Buttons">

                    <input id="reset" type="reset" value="Reset" />
                    <input id="delete" type="button" value="Delete Contact" />
                    <input id="view" type="button" value="View Book" />
                    <input id="add" type="submit" value="AddToContacts" />

                </div>

            </form>
            <div id="hiddenDiv">
            </div>

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

Upvotes: 0

Views: 104

Answers (2)

kenicky
kenicky

Reputation: 441

Change the <input id="add" type="submit" value="AddToContacts" /> to type="button". type="submit" will refresh the page to form's action and will reset all variables including BOOK.

Upvotes: 0

Akhlesh
Akhlesh

Reputation: 2399

Change add button's type "submit" to "button" then remove return statement from add function as it is not needed.

This code has many issues.

  1. You don't need four array to store address detail. you can make one array that can have objects containing the address information.eg.

    var Address=function(name,address,email,mobile){
  this.name=name;
  this.address=address||"not available";
  this.email=email||"not available";
  this.mobile=mobile;
}       
var AddressBook=new Array();
//Adding data in address book
AddressBook.push(new Address("jhon","baker street","[email protected]","049372497"))

  2. You can use jquery to get value of element instead of pure javascript. eg.

    var conname = document.getElementById('userNam').value;
     //instead of this use jquery 
var conname=$("#userNam").val(); // recommended approach

  3. There is no need to calculate array length everywhere.To check duplicate mobile number you can write a function. there are many other improvement you can have in code. for more examples go through Jquery site and Github public repositories.

Fiddle Demo

Upvotes: 1

Related Questions