CODEWITHSUNDEEP
javascripthtmlformscomputer-scienceweb-development-server
spuckhafte
spuckhafte

Reputation: 89

I want to return 'Alert' box if someone submits empty form

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, 
    initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>To Do List</h1>
    <form>
        <input autocomplete="off" autofocus id="todotext" 
        type="text">
        <input onclick="serve(); return false" type="submit">
    </form>

    <ol id="add"></ol>

</body>

<script>
    function serve(){
        const neww = document.getElementById('add');
        let text = document.getElementById('todotext').value;
        const a = document.createElement('li');
        a.innerText = text;
        neww.appendChild(a);
        document.getElementById('todotext').value = "";
    }
</script>
</html>

Here is my code and I want to return an 'Alert' if someone submit empty form. How should I do it ? Any help will be appreciated

Here's an image:

This is the Image, Click here

Upvotes: 0

Views: 281

Answers (4)

user12137152
user12137152

Reputation: 697

Is this what you want?

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, 
    initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>To Do List</h1>
    <form>
        <input autocomplete="off" autofocus id="todotext" 
        type="text">
        <button onclick="todotext.value != '' ? serve() : alert('Input field is blank')" >Submit</button>
    </form>

    <ol id="add"></ol>

</body>

<script>
    var todotext = document.getElementById('todotext');
    function serve() {
        const neww = document.getElementById('add');
        let text = todotext.value;
        const a = document.createElement('li');
        a.innerText = text;
        neww.appendChild(a);
        document.getElementById('todotext').value = "";
    }
</script>
</html>

Upvotes: 1

Sumit Pathak
Sumit Pathak

Reputation: 101

  function serve(){
        const neww = document.getElementById('add')
        let text = document.getElementById('todotext').value
        if(text.trim().length === 0){
          alert("Field is empty");
        }else{
        const a = document.createElement('li')
        a.innerText = text
        neww.appendChild(a)
        document.getElementById('todotext').value = ""
        }
    }
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, 
    initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>To Do List</h1>
    <form>
        <input autocomplete="off" autofocus id="todotext" 
        type="text">
        <input onclick="serve(); return false" type="submit">
    </form>
    <ol id="add"></ol>

</body>
</html>

Upvotes: 0

Sen Maku
Sen Maku

Reputation: 76

add condition when append new element by checking the value of todoText

   function serve(){
   const neww = document.getElementById('add')
   let text = document.getElementById('todotext').value
   if(text == ""){
       alert('field is required');
   }
   else{
     const a = document.createElement('li')
     a.innerText = text
     neww.appendChild(a)
     document.getElementById('todotext').value = ""
   };

}

Upvotes: 0

olgunyldz
olgunyldz

Reputation: 564

 String.prototype.isEmpty = function() {
    return (this.length === 0 || !this.trim());
};
 
 function serve(){
        const neww = document.getElementById('add')
        let text = document.getElementById('todotext').value;
        if( text.isEmpty() ){
            alert('cannot be blank');
          return;
        }
        const a = document.createElement('li')
        a.innerText = text
        neww.appendChild(a)
        document.getElementById('todotext').value = ""
    }
<h1>To Do List</h1>
    <form>
        <input autocomplete="off" autofocus id="todotext" 
        type="text">
        <input onclick="serve(); return false" type="submit">
    </form>
    <ol id="add"></ol>

Upvotes: 2

Related Questions