How to print or get the cell value from HTML TABLE(User Input) in html and javascript

user_15292524 0
Viewed 499

I'm trying to grab the cell values from an HTML table so that I can display them into a table.

How do I grab the cell's value so that I can pass it to the table cells My JavaScript code below show a page not found?

Code:

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")

  //}  

}
  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;
  }
<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>

css html javascript
1 Answers

You can use the exclamation mark (!) symbol, called a bang, which is the logical NOT operator.

Below is the demo code, you can take reference from here.

! will help us to find if any input is empty or null or undefined.

const btn = document.querySelector("#add-items");

btn.addEventListener("click", addItems);

function addItems() {
  let itemName = document.querySelector("#item-name").value;
  
  let itemQnt = document.querySelector("#item-quantity").value;
  
  if(!itemName) alert("Please provide item name.");
  else if(!itemQnt) alert("Please provide item quantity.");
  else alert("Success");
}
<label for="item-name"> Item Name: 
  <input type="text" placeholder="Item Name" id="item-name" />
</label>

<br><br>

<label for="item-quantity"> Item Quantity: 
  <input type="number" placeholder="Item Quantity" id="item-quantity" />
</label>

<br><br>
<button type="button" id="add-items">Add Item</button>

Now, coming to your code, a few of these needs to be changed in your code.

  1. You are checking for itemName for null, even before its value is been ready by your code. Thus, every time even with correct data, your if condition will be evaluated, the corresponding alert will be triggered.
  2. You need to put everything which is related to the calculation of total price and the display code, inside your else condition after the if condition fails to evaluate to true.

function getValues() {

  var itemName = document.getElementsByName("itemName")[0].value;

  var itemQty = document.getElementsByName("itemQty")[0].value;

  var itemPrice = document.getElementsByName("itemPrice")[0].value;

  var itemDate = document.getElementsByName("itemDate")[0].value;

  if (!itemName || !itemQty || !itemPrice || !itemDate) {
    alert("Please you need to fill all fields  to continue");
  } else {
    alert("success")

    var itemAmt = itemPrice * itemQty;

    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);


    alert(total)


  }
}
  }
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;
  }
<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> 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>

user_119269700
Related