How to add li elements to ul using JavaScript when clicking submit button

Question

My HTML:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Competition</title>
<link href="css/style.css" rel="stylesheet"> 
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP|Pacifico&display=swap" rel="stylesheet"> 
</head>
<body>
  <div class="wrapper">
    <header>
      <h1>Football</h1>
      <p>A Fottball Competition App</p>
      <form id="registrar">
        <input type="text" id="txtVal" name="name" placeholder="Invite Team">
        <button type="submit" onclick="addLi()" name="submit" value="submit">Submit</button>
      </form>
    </header>
    <div class="main">  
      <h2>Invitees</h2>
      <ul id="invitedList">
      </ul> 
    </div>
  </div>
  <script type="text/javascript" src="javascript/app.js"></script>
</body>
</html>

I have to add JavaScript, so that when you enter a sting into the input field and click submit it adds a <li> element to the <ul>.

I've tried using the following script:

function addLi()
            {
              var txtVal = document.getElementById('txtVal').value,
                  listNode = document.getElementById('invitedList'),
                  liNode = document.createElement("LI"),
                  txtNode = document.createTextNode(txtVal);
                  liNode.appendChild(txtNode);
                  listNode.appendChild(liNode);
            }

But because the button has the submit type it reloads the page and the <li> disappears.

Is there a way to do this without editing the HTML?

form tag will automatically the form fields by a post request. You need not wrap the input fields in form if it is only client side. — vishnu sandhireddy
– vishnu sandhireddy, Commented Mar 17, 2020 at 14:44
@Igor That does work and ill probably use it but part of the homework assignment is that i cant change the HTML so i wanted to be sure that there is no other way before changing the HTML. — Hus
– Hus, Commented Mar 17, 2020 at 15:12

Nico Diz · Accepted Answer · 2020-03-17 15:22:53Z

1

You said you cannot modify your HTML, so this is the solution I found.

You want to prevent the form to submit. You can do that with:

const myForm = document.querySelector('#registrar');
myForm.addEventListener("submit", function(evt) {
  evt.preventDefault();
});

See working snippet:

function addLi() {
  var txtVal = document.getElementById('txtVal').value,
      listNode = document.getElementById('invitedList'),
      liNode = document.createElement("LI"),
      txtNode = document.createTextNode(txtVal);

  liNode.appendChild(txtNode);
  listNode.appendChild(liNode);
}

const myForm = document.querySelector('#registrar');
myForm.addEventListener("submit", function(evt) {
  evt.preventDefault();
});

  <div class="wrapper">
    <div>
      <h1>Football</h1>
      <p>A Fottball Competition App</p>
      <form id="registrar">
        <input type="text" id="txtVal" name="name" placeholder="Invite Team">
        <button type="submit" onclick="addLi()" name="submit" value="submit">Submit</button>
      </form>
    </div>
    <div class="main">  
      <h2>Invitees</h2>
      <ul id="invitedList">
      </ul> 
    </div>
  </div>

Hope it helps.

answered Mar 17, 2020 at 15:22

Nico Diz

1,5001 gold badge9 silver badges22 bronze badges

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

1 Comment

Nico Diz Over a year ago

btw, please upvote my answer after you achieve more than 15 points. Regards!

Kate Orlova · Accepted Answer · 2020-03-17 15:43:38Z

0

You only need to change the submit button in html and add preventDefault for the submit eventListener

HTML

/* Replace the button to input as below */
<input type="submit" value="Submit">

JS

/* Adding eventlistener for the form submit */
const form = document.getElementById('registrar');
form.addEventListener('submit', addLi);

function addLi(e) {
  /* Prevent the default functionality - in this case it is, reloading page */ 
  e.preventDefault();

  /*
    ...the rest of the function code
  */
}

Feel free to ask if anything is unclear.

edited Mar 17, 2020 at 15:43

Kate Orlova

3,3585 gold badges15 silver badges37 bronze badges

answered Mar 17, 2020 at 15:21

Subrat-lima

413 bronze badges

Collectives™ on Stack Overflow

How to add li elements to ul using JavaScript when clicking submit button

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related