How can I get the html input for js

Asked

Viewed 101 times

-2

How can I take input from someone in html and log (console.log) on the console. Basically I want to be able to take input user and log in to the console (console.log) If you think the question is poorly structured explain what I can improve and do not give immediately -1!

HTML FORM

<form id="OrderForm">
            <input id="ON" class="OrderName" type="text" name="OrderName" placeholder="Buyer Name" value="" required>
            <input id="OD" class="OrderDate" type="text" name="OrderDate" placeholder="Date of Order" required>
            <input id="sku" class="SKU" type="text" name="ProductSKU" placeholder="Product SKU" required>
            <input class="SUBMIT" type="submit" name="Submit" value="SUBMIT">
          </form>

WEBSITE

function appendOrders(orders) {
  var ElementOrders = document.getElementById("Orders")
  ElementOrders.innerHTML = orders
}

function appendEarnings(earnings) {
  var ElementEarnings = document.getElementById("Earnings");
  ElementEarnings.innerHTML = earnings
}

function JSONLOAD() {
  "use strict";

  fetch("Static/Data/DATA.json")
    .then(function(resp) {
      return resp.json();
    })
    .then(function(data){
      var Earnings = data.DataInfo[0].Earnings;
      appendEarnings(Earnings);
      var Orders = data.DataInfo[0].Orders;
      appendOrders(Orders)
    })
}

JSONLOAD()
body {
  margin-left: 0px;
  margin-right: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
  background: #252C35;
  color: white;
}

#UpperBar {
  height: 45px;
}

.MASlime {
  position: absolute;
  font-size: 30px;
  top: 1px;
  left: 40px;
}

#Totals {
  position: absolute;
  font-size: 30px;
}

.Total {
  position: absolute;
  top: 70px;
  left: 130px;
}

.TotalEarnings {
  position: absolute;
  top: 70px;
  left: 200px;
}

.TotalO {
  position: absolute;
  top: 140px;
  left: 130px;
}

.TotalOrders {
  position: absolute;
  top: 140px;
  left: 200px;
}

#Earnings {
  position: absolute;
  top: 70px;
  left: 350px;
}

#Orders {
  position: absolute;
  top: 140px;
  left: 350px;
}

.NewOrder {
  position: absolute;
  top: 250px;
  left: 200px;
  font-size: 30px;
}

.OrderName {
  position: absolute;
  top: 350px;
  left: 140px;
  width: 250px;
  height: 25px;
  background-color: #252C35;
  color: white;
  border: 1px;
  border-style: solid;
  border-radius: 5px;
  border-color: white;
  padding: 5px;
}

.OrderDate {
  position: absolute;
  top: 400px;
  left: 140px;
  width: 250px;
  height: 25px;
  background-color: #252C35;
  color: white;
  border: 1px;
  border-style: solid;
  border-radius: 5px;
  border-color: white;
  padding: 5px;
}

.SKU {
  position: absolute;
  top: 450px;
  left: 140px;
  width: 250px;
  height: 25px;
  background-color: #252C35;
  color: white;
  border: 1px;
  border-style: solid;
  border-radius: 5px;
  border-color: white;
  padding: 5px;
}

.SUBMIT {
  position: absolute;
  top: 500px;
  left: 220px;
  width: 100px;
  height: 40px;
  background-color: #252C35;
  color: white;
  border: 1px;
  border-style: solid;
  border-radius: 5px;
  border-color: white;
  padding: 5px;
  cursor: pointer;
}

.Menu {
  position: absolute;
  top: 25px;
  left: 480px;
  font-size: 30px;
  cursor: pointer;
}

.menu {
  text-align: center;
  width: 100%;
}

.menu a {
  display: block;
  border-bottom: 1px solid #EAEAED;
  border-top: 1px solid #EAEAED;
  text-decoration: none;
  color: white;
  margin-top: 120px;
  padding-bottom: 10px;
  padding-top: 10px;
  font-size: 30px;
  background: #252C35;
}

.All {
  display: block;
}

#toggle {
  display: none;
}

.fadeIn {
  animation: fadein 1.3s ease-in;
}

@keyframes fadein {
  0% { opacity: 0; }
  25% { opacity: 0.3; }
  50% { opacity: 0.5; }
  75% { opacity: 0.8; }
  100% { opacity: 1; }
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>EComerce App Slime</title>
    <link rel="stylesheet" href="Static/css/index.css">
    <link rel="icon" href="Static/Images/favicon.png">
  </head>
  <body>
    <div id="menu">
      <label for="toggle" class="Menu">&#9776;</label>
      <input type="checkbox" id="toggle" onclick="meuMenuToggle()"/>
      <div class="menu">
          <a href="#">Slime Recipe</a>
      </div>
    </div>
    <div id="UpperBar">
      <p class="MASlime">MASlime</p>
    </div>
      <div id="HomePage">
        <div id="Totals">
          <p class="Total">Total</p>
          <p class="TotalEarnings">Earnings</p>
          <p class="TotalO">Total</p>
          <p class="TotalOrders">Orders</p>
          <p id="Earnings">100€</p>
          <p id="Orders">1</p>
        </div>
        <div id="NewOrder">
          <p class="NewOrder">New Order</p>
          <form id="OrderForm">
            <input id="ON" class="OrderName" type="text" name="OrderName" placeholder="Buyer Name" value="" required>
            <input class="OrderDate" type="text" name="OrderDate" placeholder="Date of Order" required>
            <input class="SKU" type="text" name="ProductSKU" placeholder="Product SKU" required>
            <input class="SUBMIT" type="submit" name="Submit" value="SUBMIT">
          </form>
          <script type="text/javascript">
          input = document.getElementById("ON")
          console.log(input.value)
          </script>
        </div>
    </div>
    <script>
    var home = document.getElementById('HomePage');
    var menu = document.getElementsByClassName('menu')[0];
    menu.style.display = 'none';

    document.getElementById('toggle').onclick = () => {

    if (menu.style.display == 'none') setTimeout(fadeMenu, 150);
    else if(menu.style.display == 'block') setTimeout(fadeHome, 150);
    }

    function fadeMenu() {
      home.style.display = 'none';
      menu.classList.add('fadeIn');
      menu.style.display =  'block';
    }

    function fadeHome() {
      home.style.display = 'block';
      home.classList.add('fadeIn');
      menu.style.display = 'none';
    }
    </script>
    <script src="Static/js/index.js"></script>
  </body>
</html>

javascript html

1 answer

0


If you want to give one console.log() what the user has written on input, you can catch the tag by id and thus achieve its value.

input = document.getElementById("ON")
console.log(input.value)

If you want it to be printed on the console when the user clicks the Submit button, you can add a eventListener in Form.

<form onsubmit="printInput()">
  <input type="text" id="ON">
  <button type="submit" value="submit">
</form>

<script>
  function printInput(){
    input = document.getElementById("ON");
    console.log(input.value);
  }
</script>

  • This is the only thing he’s saying on the console ?OrderName=Antonio&OrderDate=1%2F11%2F1&ProductSKU=198&Submit=SUBMIT:39 and in this case what I wanted only the name Antonio!

  • Yes, this happens when you click on Submit, the input values are passed in the URL. If you want the value of the input when the user clicks, you put an eventListener in your form for when the user clicks, it will print in the javascript console the value.

  • Could you please explain how I can do this !

  • I edited my answer!

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.