I need a help in this javascript output

I want to get user input from the html input colunm to the table below. if the input column are empty, I want the user to see error alert but if the columns were filled, I want the values shown in the table and user get an alert, “successful”. but now what i get is page not found response. Can someone point me to what is wrong.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=width-device,initial-scale=1.0">
   <title> Expense tracker list </title>
</head>
<style>
body{
 background: #fff;
 
}
.tag {
   background:#ccc;
   width:100%;
   height:150px;
   font-size:20px;
   transform: uppercase;
   margin-top:30px;
   padding-top:30px;
   position: absolute;
   justify-space: in-between;

}
#item {
   width:19.35%;
   height:auto;
   background:pink;
   float:left;
   text-align:center;
   font-size:10px;
   border:1px solid black;
}

.item{
  width:19.35%;
   height:auto;
   background:pink;
   float:left;
   text-align:center;
   font-size:10px;
   border:1px solid black;
}

 .frame {
    width:90%;
    height:200px;
    background:grey;
    padding:10px;
    border-radius:3px;
    overflow-y:auto;
    float:left;
    position: relative;
    color:#231ccb;
  
}
</style>
<body>

<h1>Expense Tracker</h1>

<form action="iframe" method="GET">
 
   <div class="frame">
   <p><label> Item:<input type="text" name="itemName" placeholder="item" required> </label></p>
 <br>  <p><label> Quantity:<input type="text" name="itemQty" required> </label></p>
<br>   <p><label> Price :<input type="number" name="itemPrice" required> </label></p>
<!--<br>   <p><label> Amount: <input type="number" name="itemAmt" placeholder="#" required> </label></p>-->
<br>   <p><label> Date :<input type="Date" name="itemDate" required> </label></p>
   

</div>
<br>

   <button onclick="getValues()"> Add Item </button>
</form>
<!--Table Header-->
<div class="tag">
<div id="item">Item Name</div>
<div id="item">Quantity</div>
<div id="item">Price</div>
<div id="item">Amount</div>
<div id="item">Date</div>

<!--Display item variable-->
<div class="item">
<p id="itemName" ></p>
</div>

<div class="item">
<p id="itemQty" > </p>
</div>

<div class="item">
<p id="itemPrice" ></p>
</div>

<div class="item">
<p id="itemAmt" > </p>
</div>

<div class="item">
<p id="itemDate" ></p>
</div>




<br>
<br>
<br>

 <p id="tag"> Hello world</p>

</div>




<script>

      function getValues() {

let item = itemName;  
  if (item == null){
alert("Please you need to fill all fields  to continue");
else 
alert ("success")
}
//Data collection
         var itemName = document.getElementsByName("itemName")[0].value;
         var itemQty = document.getElementsByName("itemQty")[0].value;
         var itemPrice = document.getElementsByName("itemPrice")[0].value;
         var itemAmt = itemPrice * itemQty;
           
         var itemDate = document.getElementsByName("itemDate")[0].value;
         
         var total = "Your total amount of items bought is "  + " "+"#" + itemAmt;
     
//data display
         document.getElementById("tag").innerHTML= total;
         document.getElementById("itemName").innerHTML= (itemName);
         document.getElementById("itemQty").innerHTML= (itemQty);
         document.getElementById("itemPrice").innerHTML= (itemPrice);
         document.getElementById("itemAmt").innerHTML= (itemAmt);
         document.getElementById("itemDate").innerHTML= (itemDate);
    
//conditional statement for empty field

// if ( itemAmt === true){
            alert(total)
     //  }else{
           // alert("Please you need to fill all fields  to continue")
//}  
           
      }
   </script>
</body>
</html>

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

1 Like

You have some missing curly brackets related to your first if/else statement. Also, there is no such CSS property named justify-space. I assume you were wanting the following:

justify-content: space-between;

Your form is very difficult to use because your CSS is not correct to be able to see all the form fields. Maybe if you could post a sketch of how you are wanting the page to look, we could guide you to a better advice.

Regarding why you get “page not found” when you click on the button, that is because the default action when a button is clicked on a form, is to submit the form to what is specified in the action attribute of the form. All you have is iframe. The value for the action attribute should be a page or script that receives the form data and does something with it (i.e. makes calculations and then displays something). You can leave the action attribute empty and prevent the default action of submitting the form to another page by using the using the event.preventDefault() method inside your getValues function.

You have some logic issues within your getValues function. You attempt to assign itemName to a variable named item and then attempt to compare it to null. Since no value exists for itemName until you assign a value to it (what you do in later lines), it only has the value undefined. When you attempt to compare item == null, it is going to result in being true.

I assume you already know this, but you will need to check that each form field’s value is empty if you really want to alert the user that all fields must be filled.