Creating contact list with form not working

I want to make a form which takes into values of name, last name, phone num and create contacts inside a list bellow when i click on a button. But problem is its not working, i looked up if it has something to do with forms and tables, but it turns out its most common to wrap up table inside a form to peform some actions with submiting a button. Any ideas to make this more correctly with a form?

HTML code:

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css" type="text/css">
    <h1>Enter a new contact</h1>
    <table id="table">
            <td>First name: </td>
            <td><input type="text" id="inputName"></td>
            <td>Last name: </td> 
            <td><input type="text" id="inputLastName"></td>
            <td>Phone number: </td>
            <td><input type="text" id="inputPhoneNumber"></td>
            <td><input type="button" value="Submit" onclick="addContact()"></td>
    <table class="contactListTable">
            <td>First name: </td>
            <td>Last name: </td> 
            <td>Phone number: </td>
    <script src="script.js"></script>

JS code:

var contactListTable = document.querySelector(".contactListTable");
var nameInput = document.getElementById("inputName");
var lastNameInput = document.getElementById("inputLastName");
var phoneNumber = document.getElementById("inputPhoneNumber");

function addContact() {
     // create needed elements 
     var nameRow = document.createElement("tr");
     var firstName = document.createElement("td");
     var firstNameValue = document.createElement("td");
     var lastNameRow = document.createElement("tr");
     var lastName = document.createElement("td");
     var lastNameValue = document.createElement("td");
     var phoneRow = document.createElement("tr");
     var phone = document.createElement("td");
     var phoneValue = document.createElement("td");
     // append values to created elements
     firstName.innerHTML = "First name:";
     firstNameValue.innerHTML = nameInput.value;
     lastName.innerHTML = "Last name:";
     lastNameValue.innerHTML = lastNameInput.value;
     phone.innerHTML = "Phone number:";
     phoneValue.innerHTML = phoneNumber.value;
     // append table datas to table row
     // append table rows to table

I’ve tested your code, and it seems to work as you described.


upd: probably I misunderstood your problem.

Use a form element and the FormData API.

I tried it again, when i click on button to add contact it doesnt do anything, it only refreshed the page and thats it.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.