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.

@AndroidNoobie I want to check whether the inputted username is already existing or not. If it is new, the data will be stored in the array and alert ("You are now Registered").If the it is already existing, the data will not restored in the array and alert "username is already existing" — Mavis Zero
– Mavis Zero, Commented May 21, 2018 at 6:49

Azad · Accepted Answer · 2018-05-21 06:52:28Z

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" );
}

answered May 21, 2018 at 6:52

Azad

5,2725 gold badges31 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Username Form: Comparing the input data in an array

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related