I am creating a to do list using Javascript/HTML. How do I add text input to a list using onsubmit in a <form>. This is what I got so far.

<h1>To-Do List</h1>

<form onsubmit= "return addItem(document.getElementById(list), inputText)"> ` 
    <input type="text" id="inputItem" placeholder="Enter a Task">
    <input type="submit">

</form>

<ul id="list">

</ul>

<script 
// adds Task to list

function addItem(list, inputText) {
    var listItem = document.createElement("li");
    listItem.innerText = "inputText";

    list.appendChild(listItem)

</script>

I am creating a to do list using Javascript/HTML. How do I add text input to a list using onsubmit in a <form>. This is what I got so far.

<h1>To-Do List</h1>

<form onsubmit= "return addItem(document.getElementById(list), inputText)"> ` 
    <input type="text" id="inputItem" placeholder="Enter a Task">
    <input type="submit">

</form>

<ul id="list">

</ul>

<script 
// adds Task to list

function addItem(list, inputText) {
    var listItem = document.createElement("li");
    listItem.innerText = "inputText";

    list.appendChild(listItem)

</script>

• javascript
• html
• onsubmit

Share Improve this question Follow edited Jun 16, 2018 at 16:30 mplungjan 179k2828 gold badges182182 silver badges240240 bronze badges asked Jun 16, 2018 at 16:25 Ahmed OsmanAhmed Osman 3711 silver badge99 bronze badges 0

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

1. get the list correctly ('list'), not (list)
2. Pass the field to the function, not some string - you CAN pass 'inputField' but then you also need var value = document.getElementById(inputField).value and have "return addItem('list', 'inputItem')"
3. return false or use preventDefault to not submit the form for real

function addItem(list, inputField) { 
  var list = document.getElementById(list);
  var listItem = document.createElement("li");
  listItem.innerText = inputField.value; // passed the field. 
  list.appendChild(listItem);
  return false; // stop submission
}

<h1>To-Do List</h1>

<form onsubmit="return addItem('list', this.inputItem)"> 
  <input type="text" id="inputItem" placeholder="Enter a Task">
  <input type="submit">

</form>

<ul id="list">

</ul>

Unobtrusively:

window.onload = function() {
  document.getElementById('form1').onsubmit = function() {
    var list = document.getElementById(this.getAttribute('data-list')); // only needed if more than one form or list
    var listItem = document.createElement("li");
    var inputItem = this.inputItem;
    listItem.innerText = inputItem.value;
    list.appendChild(listItem);
    inputItem.select();
    inputItem.focus();
    return false; // stop submission
  }
  document.getElementById("inputItem").focus();
}

<h1>To-Do List</h1>

<form id="form1" data-list="list">
  <input type="text" id="inputItem" placeholder="Enter a Task">
  <input type="submit">
</form>
<ul id="list"></ul>