CODEWITHSUNDEEP
javascript
hskrijelj
hskrijelj

Reputation: 433

Check if team already added

I have a page where you can invite teams. Clicking "Invite teams" makes a popup box appear showing a search input. The search-function is AJAX based. When a team is found through your search word(s), you'll have to click on the team whereupon the team will be showed in a "Invited-teams"-box.

It works in a way that when you "add" the team, a hidden input field is generated containing the team's ID as a value. The problem is that with my current code, it is possible to add the same team as many times as you wish. I should be possible to check, if the team can be found in the hidden-input-data. If it already exists, it should not be possible to add the sane team.

My current javascript-code can be found beneath here. Please notice that I have tried to make the code that checks the team, but it doesn't work.

function addTeam(tid) {
    // Grab the input value
    var teamName = document.getElementById(tid).innerHTML;
    var teamID = document.getElementById(tid).id;

    // If empty value
    if(!teamName || !teamID) {
        alert('An error occured.');
    } else {
        //Tried to do the "team-adlready-added"-test, but it doesn't work
        var stored_teams = $t('#store-teams').getElementsByTagName('input');
        for (var i = 0; i < stored_teams.length; i++) {
            var stored_team = stored_teams[i];
            if(stored_team.value == teamID) {
                break;
                var team_already_added = 1;
            }
            alert(team_already_added);
        }
        if((team_already_added) || team_already_added != 1) {
            // Store the team's ID in hidden inputs
            var store_team = document.createElement('input');
            store_team.type = 'hidden';
            store_team.value = teamID;

            // Append it and attach the event (via onclick)
            $t('#store-teams').appendChild(store_team);             

            // Create the teams with the value as innerHTML
            var div = document.createElement('div');
            div.className = 'team-to-invite';
            div.innerHTML = teamName;

            // Append it and attach the event (via onclick)
            $t('#teams').appendChild(div);
        }
        div.onclick = removeTeam;
    }
    return false;
}

Thanks in advance.

Upvotes: 0

Views: 83

Answers (2)

Marcel Gwerder
Marcel Gwerder

Reputation: 8520

I just want to give you a hint for a possible solution without html elements.

You can create a new functional object for team:

var Team = function (id, name) {
    this.name = name;
    this.id = id;
}

Create an array which will contain teams:

var TeamList = [];

Add you Teams:

TeamList.push(new Team(1, "Team 1"));
TeamList.push(new Team(2, "Team 2"));
TeamList.push(new Team(3, "Team 3"));
TeamList.push(new Team(4, "Team 4"));

Write a function which loops trough the list of teams and checks with the id if a team already exists:

function containsTeam(id) {
    for (var i = 0; i < TeamList.length; i++) {
        if (TeamList[i].id == id) {
            return true;
        }
    }
    return false;
}

Just check it:

containsTeam(1); //returns true
containsTeam(5); //returns false

Have a look at the jsFiddle DEMO and open the console to see the output.

EDIT: In addition, to remove an element you can write a function which looks pretty much the same as the containsTeam function. Just use array.splice instead of returning true:

function removeTeam(id) {
    for (var i = 0; i < TeamList.length; i++) {
        if (TeamList[i].id == id) {
            TeamList.splice(i, 1);
        }
    }
}

And remove a team:

removeTeam(3);

Upvotes: 1

bottens
bottens

Reputation: 3892

Your variable scope is off. You declare team already added in the wrong spot. Declare it with team name and team id and it will get you in the right direction

Upvotes: 0

Related Questions