0

The expected behaviour of the code above is when I click the "Add" button the issue is created and is shown beneath the button. The problem is, nothing happens instead. I've been trying to search the web to find an answer but with no luck. Any idea what's wrong?

Here are my index.html and JavaScript:

document.getElementById('issueInputForm').addEventListener('submit', saveIssue);

function saveIssue(e) {
    var issueDesc = document.getElementById('issueDescInput').value;
    var issueSeverity = document.getElementById('issueSeverityInput').value;
    var issueAssignedTo = document.getElementById('issueAssigntedToInput').value;
    var issueID = chance.guid();
    var issueStatus = 'Open';

    var issue = {
        id: issueID,
        description: issueDesc,
        severity: issueSeverity,
        assignedTo: issueAssignedTo,
        status: issueStatus
    };


    if (localStorage.getItem('issues') === null) {
        //var issues = [];
        issues.push(issue);
        localStorage.setItem('issues', JSON.stringify(issues));
    } else {
        var issues = JSON.parse(localStorage.getItem('issues'));
        issues.push(issue);
        localStorage.setItem('issues', JSON.stringify(issues));
    }

    document.getElementById('issueInputForm').reset();

    fetchIssue();
    e.preventDefault();
}

function setStatusClosed(id) {
    var issues = JSON.parse(localStorage.getItem('issues'));

    for (var i = 0; i < issues.length; i++)
        if (issues[i].id === id)
            issues[i].status = 'Closed';

    localStorage.setItem('issues', JSON.stringify(issues));

    fetchIssue();
}

function deleteIssue(id) {
    var issues = JSON.parse(localStorage.getItem('issues'));

    for (var i = 0; i < issues.length; i++)
        if (issues[i].id === id)
            issues.splice(i, 1);

    localStorage.setItem('issues', JSON.stringify(issues));

    fetchIssue();
}

function fetchIssue() {
    var issues = JSON.parse(localStorage.getItem('issues'));
    var issuesList = document.getElementById('issuesList');

    issuesList.innerHTML = '';

    for (var i = 0; i < issues.length; i++) {
        var id = issues[i].id;
        var desc = issues[i].description;
        var severity = issues[i].severity;
        var assignedTo = issues[i].assignedTo;
        var status = issues[i].status;

        issuesList.innerHTML += '<div class="well">' +
            '<h6> Issue ID: ' + id + '</h6>' +
            '<p><span class="label label-info">' + status + '</span></p>' +
            '<h3>' + desc + '</h3>' +
            '<p><span class="glyphicon glyphicon-time"></span>' + severity + '</p>' +
            '<p><span class="glyphicon glyphicon-user"></span>' + assignedTo + '</p>' +
            '<a href="#" onclick="setStatusClosed(\'' + id + '\')" class="btn btn-warning">Close</a>' +
            '<a href="#" onclick="deleteIssue(\'' + id + '\')" class="btn btn-danger">Delete</a>'+
            '</div>';
    }
}
<!DOCTYPE html>

<html>

<head>
    <meta charset="utf-8">
    <title>JS Issue Tracker</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
</head>
<body onload="fetchIssue()">
    <div class="container">
        <h1>JS IssueTracker</h1>
    </div class="jumbotron">
    <h3>Add New Issue:</h3>
    <form id="issueInputForm" >
        <div class="form-group">
            <label for="issueDescInput">Description</label>
            <input type="text" class="form-control" id="issueDescInput" placeholder="Describe the issue...">
        </div>
        <div class="form-group">
            <label for="issueSeverityInput">Severity</label>
            <select id="issueSeverityInput" class="form-control">
                <option value="Low">Low</option>
                <option value="Medium">Medium</option>
                <option value="High">High</option>
            </select>
        </div>
        <div class="form-group">
            <label for="issueAssignedToInput">Assigned to</label>
            <input type="text" class="form-control" id="issueAssignedToInput" placeholder="Enter responsible">
        </div>
       
        <button type="button" class="btn btn-primary">Add</button>
    </form>
    <div class="col-lg-12">
        <div id="issuesList"></div>
    </div>
    <div class="footer">
        <p>&copy; Ida Djurhuus</p>
    </div>
    
    <script src="http://chancejs.com/chance.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
    <script src="main.js"></script>
</body>
</html>
YakovL
  • 7,557
  • 12
  • 62
  • 102
Ida
  • 11
  • 1

3 Answers3

0

As @epascarello already mentioned

type="button" does not submit forms

So change the type to submit

<button type="submit" class="btn btn-primary">Add</button>

From MDN

button: The button has no default behavior. It can have client-side scripts associated with the element's events, which are triggered when the events occur.

submit: The button submits the form data to the server. This is the default if the attribute is not specified, or if the attribute is dynamically changed to an empty or invalid value.

Community
  • 1
  • 1
brass monkey
  • 5,841
  • 10
  • 36
  • 61
0

in your code 2 problem 

 1) change type="button" to type="submit"
    2) var issueAssignedTo = document.getElementById('issueAssigntedToInput').value; 
    chaneg this line in id 
var issueAssignedTo = document.getElementById('issueAssignedToInput').value; 


document.getElementById('issueInputForm').addEventListener('submit', saveIssue);


function saveIssue(e) {
debugger;
    var issueDesc = document.getElementById('issueDescInput').value;
    var issueSeverity = document.getElementById('issueSeverityInput').value;
    var issueAssignedTo = document.getElementById('issueAssignedToInput').value;
    var issueID = chance.guid();
    var issueStatus = 'Open';

    var issue = {
        id: issueID,
        description: issueDesc,
        severity: issueSeverity,
        assignedTo: issueAssignedTo,
        status: issueStatus
    };


    if (localStorage.getItem('issues') === null) {
        //var issues = [];
        issues.push(issue);
        localStorage.setItem('issues', JSON.stringify(issues));
        } else {
           var issues = JSON.parse(localStorage.getItem('issues'));
           issues.push(issue);
           localStorage.setItem('issues', JSON.stringify(issues));
       }



    document.getElementById('issueInputForm').reset();

    fetchIssue();
    e.preventDefault();
   }


function setStatusClosed(id) {
    var issues = JSON.parse(localStorage.getItem('issues'));


    for (var i = 0; i < issues.length; i++) {
        if (issues[i].id === id) {
            issues[i].status = 'Closed';
        }

    }

    localStorage.setItem('issues', JSON.stringify(issues));

    fetchIssue();
}

function deleteIssue(id) {
    var issues = JSON.parse(localStorage.getItem('issues'));


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

    }

    localStorage.setItem('issues', JSON.stringify(issues));

    fetchIssue();
}




function fetchIssue() {
    var issues = JSON.parse(localStorage.getItem('issues'));
    var issuesList = document.getElementById('issuesList');

    issuesList.innerHTML = '';


    for (var i = 0; i < issues.length; i++) {
        var id = issues[i].id;
        var desc = issues[i].description;
        var severity = issues[i].severity;
        var assignedTo = issues[i].assignedTo;
        var status = issues[i].status;

        issuesList.innerHTML += '<div class="well">' +
            '<h6> Issue ID: ' + id + '</h6>' +
            '<p><span class="label label-info">' + status + '</span></p>' +
            '<h3>' + desc + '</h3>' +
            '<p><span class="glyphicon glyphicon-time"></span>' + severity + '</p>' +
            '<p><span class="glyphicon glyphicon-user"></span>' + assignedTo + '</p>' +
            '<a href="#" onclick="setStatusClosed(\'' + id + '\')" class="btn btn-warning">Close</a>' +
            '<a href="#" onclick="deleteIssue(\'' + id + '\')" class="btn btn-danger">Delete</a>'+
            '</div>';



    }


}
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

    <div class="container">
        <h1>JS IssueTracker</h1>
    </div class="jumbotron">
    <h3>Add New Issue:</h3>
    <form id="issueInputForm" >
        <div class="form-group">
            <label for="issueDescInput">Description</label>
            <input type="text" class="form-control" id="issueDescInput" placeholder="Describe the issue...">
        </div>
        <div class="form-group">
            <label for="issueSeverityInput">Severity</label>
            <select id="issueSeverityInput" class="form-control">
                <option value="Low">Low</option>
                <option value="Medium">Medium</option>
                <option value="High">High</option>
            </select>
        </div>
        <div class="form-group">
            <label for="issueAssignedToInput">Assigned to</label>
            <input type="text" class="form-control" id="issueAssignedToInput" placeholder="Enter responsible">
        </div>
       
        <button type="submit" class="btn btn-primary">Add</button>
    </form>
    <div class="col-lg-12">
        <div id="issuesList">
        </div>

    </div>
    <div class="footer">
        <p>&copy; Ida Djurhuus</p>


    </div>
    

    
    <script src="http://chancejs.com/chance.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
Hardik Prajapati
  • 162
  • 6
0

Have made few changes to your code:

  1. Since element with type="button" cannot be associated with submit event, have changed the type as submit.

  2. Added null check in fetchIssue function so that the code wont break when there are no issues.

  3. Corrected a typo in the saveIssue function - document.getElementById('issueAssigntedToInput') to document.getElementById('issueAssignedToInput')

  4. Declared variable "issues" in saveIssue function when the localStorage.getItem('issues') is null.

document.getElementById('issueInputForm').addEventListener('submit', saveIssue);


function saveIssue(e) {
    var issueDesc = document.getElementById('issueDescInput').value;
    var issueSeverity = document.getElementById('issueSeverityInput').value;
    var issueAssignedTo = document.getElementById('issueAssignedToInput').value;
    var issueID = chance.guid();
    var issueStatus = 'Open';

    var issue = {
        id: issueID,
        description: issueDesc,
        severity: issueSeverity,
        assignedTo: issueAssignedTo,
        status: issueStatus
    };

     var issues = [];
    if (localStorage.getItem('issues') !== null) {
       
          issues = JSON.parse(localStorage.getItem('issues'));
           
       }
           issues.push(issue);
           localStorage.setItem('issues', JSON.stringify(issues));


    document.getElementById('issueInputForm').reset();

    fetchIssue();
    e.preventDefault();
   }


function setStatusClosed(id) {
    var issues = JSON.parse(localStorage.getItem('issues'));


    for (var i = 0; i < issues.length; i++) {
        if (issues[i].id === id) {
            issues[i].status = 'Closed';
        }

    }

    localStorage.setItem('issues', JSON.stringify(issues));

    fetchIssue();
}

function deleteIssue(id) {
    var issues = JSON.parse(localStorage.getItem('issues'));


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

    }

    localStorage.setItem('issues', JSON.stringify(issues));

    fetchIssue();
}




function fetchIssue() {
    var issues = JSON.parse(localStorage.getItem('issues'));
    if(typeof issues !== 'undefined' && issues !== null) {

    var issuesList = document.getElementById('issuesList');

    issuesList.innerHTML = '';


    for (var i = 0; i < issues.length; i++) {
        var id = issues[i].id;
        var desc = issues[i].description;
        var severity = issues[i].severity;
        var assignedTo = issues[i].assignedTo;
        var status = issues[i].status;

        issuesList.innerHTML += '<div class="well">' +
            '<h6> Issue ID: ' + id + '</h6>' +
            '<p><span class="label label-info">' + status + '</span></p>' +
            '<h3>' + desc + '</h3>' +
            '<p><span class="glyphicon glyphicon-time"></span>' + severity + '</p>' +
            '<p><span class="glyphicon glyphicon-user"></span>' + assignedTo + '</p>' +
            '<a href="#" onclick="setStatusClosed(\'' + id + '\')" class="btn btn-warning">Close</a>' +
            '<a href="#" onclick="deleteIssue(\'' + id + '\')" class="btn btn-danger">Delete</a>'+
            '</div>';

        }

    }


}
<!DOCTYPE html>

<html>

<head>
    <meta charset="utf-8">
    <title>JS Issue Tracker</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
</head>
<body onload="fetchIssue()">
    <div class="container">
        <h1>JS IssueTracker</h1>
    </div>
    <h3>Add New Issue:</h3>
    <form id="issueInputForm" >
        <div class="form-group">
            <label for="issueDescInput">Description</label>
            <input type="text" class="form-control" id="issueDescInput" placeholder="Describe the issue...">
        </div>
        <div class="form-group">
            <label for="issueSeverityInput">Severity</label>
            <select id="issueSeverityInput" class="form-control">
                <option value="Low">Low</option>
                <option value="Medium">Medium</option>
                <option value="High">High</option>
            </select>
        </div>
        <div class="form-group">
            <label for="issueAssignedToInput">Assigned to</label>
            <input type="text" class="form-control" id="issueAssignedToInput" placeholder="Enter responsible">
        </div>
       
        <button type="submit" class="btn btn-primary">Add</button>
    </form>
    <div class="col-lg-12">
        <div id="issuesList">
        </div>

    </div>
    <div class="footer">
        <p>&copy; Ida Djurhuus</p>


    </div>
    

    
    <script src="http://chancejs.com/chance.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>



    <script src="main.js"></script>
</body>
</html>
amateur_me
  • 55
  • 6