CODEWITHSUNDEEP
javascriptjqueryhtml
Lomi Faith
Lomi Faith

Reputation: 35

HTML row is added, shown briefly, then disappears

It seems to get the value of my input when adding a new contact. But somehow I only see it for a second and doesn't stay on the html table where I appended it to. I know some functions here aren't fully working yet but what matters to me now is that this adding contact button at least works.

var addressBook = (function() {

    var contact = [{
        firstName: 'myName',
        lastName: 'lastName',
        number: '123456789',
        email: '[email protected]'
    }];

    var table = $('#table');
    var tbody = table.find('tbody');
    var form = $('#createForm');
    var $firstName = form.find('#firstName');
    var $lastName = form.find('#lastName');
    var $number = form.find('#number');
    var $email = form.find('#email');
    var $addButton = form.find('#addButton');
    var $deleteButton = table.find('#deleteButton');
    var $input = table.find(".edit");

    $addButton.on('click', addContact);
    table.on('click', '#deleteButton', deleteContact);
    addedContact();

    function addedContact() {
        tbody.html('');
        var length = contact.length;
        for (var i = 0; i < length; i++) {
            table.append('<tr><td><input class="edit" type="text" value="' + contact[i].firstName + '"></td><td><input class="edit" type="text" value="' + contact[i].lastName  + '"></td><td><input class="edit" type="text" value="' + contact[i].number + '"</td><td><input class="edit" type="text" value="' + contact[i].email + '""></td><td><button id="deleteButton value = "DELETE"></button></td></tr>');
        }
    }

    function addContact() {
        var newPerson = {
            firstName: $firstName.val(),
            lastName: $lastName.val(),
            number: $number.val(),
            email: $email.val()
        };
        contact.push(newPerson);
        $firstName.val('');
        $lastName.val('');
        $number.val('');
        $email.val('');
        addedContact()
    }

    function deleteContact(event) {
        var element = event.target.closest('tr');
        var i = table.find('td').index(element);
        contact.splice(1, 1);
        addedContact();
    }

    return {
        addContact: addContact,
        deleteContact: deleteContact
    };
})();

This is my html code

<button class = "create">Create contact</button>

<form align=center id="createForm">    
    <br><input placeholder="First Name" id="firstName" /><br><br>
    <input placeholder="Last Name" id="lastName" /><br><br>
    <input placeholder="Phone number" id="number" /><br><br>
    <input placeholder="Email Address" type="email" id="email" /><br><br>
    <input id="addButton" type="submit"    value="CREATE" /><br><br>
</form>
<div class = "search">Search contacts</div>
    <table id="table">
    <thead>
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Phone Number</th>
            <th>Email Address</th>
          </tr>
    </thead>
    <tbody>
    </tbody>
    <tfoot>
    </tfoot>
</table>

Upvotes: 0

Views: 219

Answers (1)

fl0psy
fl0psy

Reputation: 491

Chris G beat me to the answer. You can find a working example at https://codepen.io/anon/pen/vppbKM

The only difference being 

<form align=center id="createForm" onsubmit="return false">

Upvotes: 1

Related Questions