CODEWITHSUNDEEP
javascripthtml
user15987286
user15987286

Reputation:

Trying to stop add button from submitting if input field is empty

I'm working on a grocery list project that works similar to a todo list. I have an add button that inserts the input field value into an array and creates an li on the page. This works fine, but I'm trying to make it so that if the input field is empty, then an li isn't created. I've tried adding a check into my function but I can't get it working right. I'm not really sure if what I've tried here is the best way to go about it or if there's a better way to set up the check. I'd also like to know if there's a better way to setup the input field to submit on an enter click. What I have works, but I've read that this method is deprecated.

<!DOCTYPE html>
<html lang="en">
<head>
<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">
<title>Grocery List</title>
</head>
<body>
<div class="container">
    <h1>Grocery List</h1>
    <input id="add-input" placeholder="Add Groceries" autocomplete="off">
    <button id="add-button">Add</button>
    <!--<button id="remove-button">Remove</button>-->
<div>
    <ul id="grocery-ul">

    </ul>
</div>

<script src="main.js"></script>
</body>
</html>

let addButton = document.getElementById('add-button');
addButton.addEventListener('click', add);

let addInput = document.getElementById('add-input');
addInput.addEventListener('keydown', (key) => {
if(key.which == 13) {
add();
}
})

//let removeButton = document.getElementById('remove-button');
//removeButton.addEventListener('click', remove);

let groceryList = [

]

function add() {
groceryInput = addInput.value;
groceryList.push(groceryInput);
addInput.value = '';
displayGroceries();

if(groceryInput.length = 0) {
    addButton.disabled = true; 
} else {
    addButton.disabled = false;
}

}

function remove(event) {
let position = event.currentTarget.id;
groceryList.splice(position, 1);
displayGroceries();
}

function displayGroceries() {
let groceryUl = document.getElementById('grocery-ul');
groceryUl.innerHTML = '';

for (var i = 0; i < groceryList.length; i++) {
    let groceryLi = document.createElement('li');
    groceryLi.innerHTML = groceryList[i];
    groceryUl.appendChild(groceryLi);
     let removeButton = document.createElement('button');
    removeButton.innerText = "Remove";
    removeButton.addEventListener('click', remove);
    removeButton.id = i;
    groceryLi.appendChild(removeButton);

    if(add.keyCode === 13) {
        add();
    }

  }
  }

Upvotes: 0

Views: 879

Answers (1)

Mamun
Mamun

Reputation: 68933

You can simply check the input value, if the value is empty then return from the function:

function add() {
  groceryInput = addInput.value;
  if(groceryInput.trim() == ''){
    alert('Input field is empty');
    return true;
  }
  .....
  .....

.....What I have works, but I've read that this method is deprecated.

I think you wanted to mean the event here. The event keypress is deprecated but not keydown which you are using.

Demo:

let addButton = document.getElementById('add-button');
addButton.addEventListener('click', add);

let addInput = document.getElementById('add-input');
addInput.addEventListener('keydown', (key) => {
  if(key.which == 13) {
    add();
  }
});

//let removeButton = document.getElementById('remove-button');
//removeButton.addEventListener('click', remove);

let groceryList = [];

function add() {
  groceryInput = addInput.value;
  if(groceryInput.trim() == ''){
    alert('Input field is empty');
    return true;
  }
  groceryList.push(groceryInput);
  addInput.value = '';
  displayGroceries();

  if(groceryInput.length = 0) {
      addButton.disabled = true; 
  } else {
      addButton.disabled = false;
  }

}

function remove(event) {
  let position = event.currentTarget.id;
  groceryList.splice(position, 1);
  displayGroceries();
}

function displayGroceries() {
  let groceryUl = document.getElementById('grocery-ul');
  groceryUl.innerHTML = '';

  for (var i = 0; i < groceryList.length; i++) {
      let groceryLi = document.createElement('li');
      groceryLi.innerHTML = groceryList[i];
      groceryUl.appendChild(groceryLi);
       let removeButton = document.createElement('button');
      removeButton.innerText = "Remove";
      removeButton.addEventListener('click', remove);
      removeButton.id = i;
      groceryLi.appendChild(removeButton);

      if(add.keyCode === 13) {
          add();
      }

  }
}
<div class="container">
    <h1>Grocery List</h1>
    <input id="add-input" placeholder="Add Groceries" autocomplete="off">
    <button id="add-button">Add</button>
    <!--<button id="remove-button">Remove</button>-->
<div>
    <ul id="grocery-ul">

    </ul>
</div>

Upvotes: 2

Related Questions