Username Form: Comparing the input data in an array

Question

I have an HTML Form (Sign-Up) and a Javascript code. In this, i have a form that a user should enter it's username. If the input username is new and doesn't match in any existing username. It will alert "Username Is Now Registered" and the input data will be stored in the array. The other case will be the username is already existing, there will be a alert box of "Username is already existing" and the input data will be not stored in the array.

Here's my HTML Code

<div id="format">
        <form id="myForm" onsubmit="myFormData(event);">
            <b>User Name:</b></br>
            <input type="text" name="uName" id="uName"  required="required" onsubmit="userName(event)" ></input></br>
<button type="submit" name="submit" id="submit" value="Submit" onsubmit="myFormData(event)"> Submit </button>
        </form>

        <div id="sample"></div>
</div>

Here's the javascript code.

"use strict";
var data = [];

function myFormData(event){
    //  handle form submit event to add an event
    event.preventDefault();
    // cut down form:
    var uName = document.getElementById("uName").value;
var userObject = {
        uName: uName,
 };
    addData( userObject);
    console.log(data);

}

function addData(userObject) {
        data.push(userObject);
        redrawList();
}

function removeData(event) {
        var index = this.getAttribute("data-index");
        data.splice( index,1);
        redrawList();
        console.log(data);
}

function redrawList() {
        var container = document.getElementById( "sample" );
        container.innerHTML = ""; // reset list displayed on page

        for (var index=0 ; index <data.length ; index++){
            var theDiv = document.createElement( "div" );
            var divHTML = "";
            var button = document.createElement( "button");
            var userObject = data[index];
            button.setAttribute("id", "remove");

            for( var item in userObject) {
                if( !userObject.hasOwnProperty( item)) {
                    continue; // ignore inherited properties


                }
                divHTML +=  item + ":" + userObject[item] + "</br>" ;
            }
            theDiv.innerHTML = divHTML;
            theDiv.style = "background-color:pink; border-style:solid; margin:1%;";
            button.type="button";
            button.setAttribute("data-index", index);
            button.innerHTML = "X";
            button.onclick=removeData;   
            theDiv.appendChild (button);
            container.appendChild( theDiv );

        }
}


function userName(event){
    if (data["uName"] !== data["uName"]){
        alert("Welcome New User!");
    }
    else {
        alert("Entered Username is already existing");
        return false;
    }

    redrawList();
}

Credits to some of programmers that help me.

Answer 1

check the existence of the username before adding it.

function myFormData(event) {
  //  handle form submit event to add an event
  event.preventDefault();
  // cut down form:
  var uName = document.getElementById("uName").value;
  var userObject = {
    uName: uName,
  };

  //check username already exists
  for(var i=0; i < data.length; i++)
    if(data[i].uName.toUpperCase().trim() == uName.toUpperCase().trim()){
    alert("Username: "+ uName +" is already existing");
    return;//EXIT
    }

  addData(userObject);
  console.log(data);
  alert( "Username Is Now Registered" );
}