-1

I need to submit the text within the input field by pressing the enter key,and then put the form text into a list item. Problem is,when I press enter it just refreshes the page and nothing happens,and I cna't use anything back-end ,this is purely front-end... this is a to-do list by the way,and this is what I've done so far:

<html>
    <head>
        <title>Site</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="HandheldFriendly" content="true">
        <meta charset="UTF-8">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        <link rel="stylesheet" type="text/css" href="style.css">
        <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div class="container">
            <div class="text">
                 <h1>To-Do</h1><br>
            </div>
            <form>
                <input type="text" id='uzd' placeholder="Ką reikia atlikti?">
                <button type="submit" form="uzd" value="Submit" hidden onsubmit="button()"></button>
            </form>
            <ul id='uzduotys'>

            </ul>
            <script src="script.js"></script>
        </div>
    </body>
</html>





function button(){
    var node = document.createElement("Li");
    node.setAttribute("class","li-item");
    var text = document.getElementById("uzd").value;
    if(text===""){
        alert("placeholder");
    }
    else{
        var textnode =document.createTextNode(text);
        node.appendChild(textnode);
        document.getElementById("uzduotys").appendChild(node);
    }




}

var list = document.querySelector('ul');
list.addEventListener('click', function(ev) {
    if (ev.target.tagName === 'LI') {
        ev.target.classList.toggle('checked');
    }
}, false);
Auridas
  • 25
  • 3

4 Answers4

1

You were almost right: you need to move the onsubmit field to the form element, and add "return false;" to the value of onsubmit, to prevent the form to be really submitted. Then you can also remove the button element which becomes useless. See working code below:

<html>

<head>
  <title>Site</title>
  <meta charset="UTF-8">
</head>

<body>
  <div class="container">
    <div class="text">
      <h1>To-Do</h1><br>
    </div>
    <form onsubmit="button(); return false;">
      <input type="text" id='uzd' placeholder="Ką reikia atlikti?">
    </form>
    <ul id='uzduotys'>

    </ul>
  </div>
</body>

<script language="javascript">
  function button() {
    var node = document.createElement("Li");
    node.setAttribute("class", "li-item");
    var text = document.getElementById("uzd").value;
    if (text === "") {
      alert("placeholder");
    } else {
      var textnode = document.createTextNode(text);
      node.appendChild(textnode);
      document.getElementById("uzduotys").appendChild(node);
    }
  }

  var list = document.querySelector('ul');
  list.addEventListener('click', function(ev) {
    if (ev.target.tagName === 'LI') {
      ev.target.classList.toggle('checked');
    }
  }, false);
</script>

</html>
Rolvernew
  • 689
  • 6
  • 8
  • It works! though, upon submitting it seems like the site is just stacking the list elements on top of eachother,any ideas? – Auridas Nov 16 '18 at 13:06
  • What do you mean exactly? I see each new item appearing at the bottom of the previous one, which is the expected behavior for a todo list... – Rolvernew Nov 17 '18 at 13:09
0

You can leverage the fact that a form is submitted with Enter by default. However, you'll want to replace the default submit behavior (which is to, well, submit data), with your function using onsubmit, and prevent the default behavior with a return false;:

<form onsubmit="handleSubmitSomehow(event); return false">
    <input type="text" id='uzd' placeholder="Ką reikia atlikti?">
    <button type="submit" value="Submit"></button>
</form>
AKX
  • 152,115
  • 15
  • 115
  • 172
0

You can try something like this,

  • Pass the event and get the keycode from it.
  • If it is enter key then add the entered value as a list item.

function validate(e, thisObj) {
    if (e.keyCode == 13) {
        e.preventDefault();  
        //console.log(thisObj.value);  
        
        var ul = document.getElementById("uzduotys");
        
        var li = document.createElement("li");
        
        li.innerHTML = thisObj.value;
        
        ul.appendChild(li);
        
        
        return false;
    }
    return true;
}
<html>
<head>
    <title>Site</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="HandheldFriendly" content="true">
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="style.css">
    <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
    <div class="text">
    <h1>To-Do</h1><br>
    </div>
    <form>
        <input type="text" id='uzd' placeholder="Ką reikia atlikti?" onkeypress="return validate(event, this)">
    </form>
    <ul id='uzduotys'>

    </ul>
  
</div>
</body>
</html>
Hary
  • 5,690
  • 7
  • 42
  • 79
0

If you're not submitting the form to some back-end, I would just not use a form at all and instead use a keyup listener for the enter key on the input element.

Don't fix a problem like preventing a form submit if you can avoid the problem in the first place.

Shilly
  • 8,511
  • 1
  • 18
  • 24