How Can I Get All The Data From A Summited Form And Make That Into A New List

I want to take all the data submitted and make it into a list ( -item: bannana -itemNum: #3330...)

Item:

Solution 1:

just one line:

let formInputs = Object.fromEntries( newFormData(myForm).entries() ) 

see FormData

in context:

myForm = document.querySelector('#myForm')

myForm.onsubmit = evt =>
  {
  evt.preventDefault() // disable submit   page reloadconsole.clear()
 
  let formInputs = Object.fromEntries( newFormData(myForm).entries() ) 

  console.log( formInputs )
}

body, textarea, input {
  font-family : Helvetica, Arial sans-serif;
  font-size   : 12px;
  }
label {
  font-size   : 1.2em;
  display     : block;
  float       : left;
  clear       : both;
  width       : 10em;
  white-space : nowrap;
  overflow    : hidden;
  font-weight : bold;
  padding-top : .7em;
  line-height: 1.4em;
  }
label:after {
  content     : '....................................'; 
  font-weight : normal;
  color       : lightslategray;
  }
input {
  display     : block;
  float       : left;
  width       : 5em;
  margin      : .3em;
  }
button {
  display     : block;
  float       : left;
  clear       : both;
  margin-top  : .6em;
  }
.as-console-wrapper { max-height:100%!important; top:0; left:50%!important; width:50%; }
.as-console-row         { background-color: yellow; }
.as-console-row::after  { display:none !important; }

<formid="myForm"action=""><label> Item:</label><inputname="item"type="text"   ><label> Item numbers:</label><inputname="itemNum"type="number" ><label> Quantity:</label><inputname="quantity"type="number" ><label> Price:</label><inputname="price"type="number" ><label> Discount:</label><inputname="discount"type="number" ><buttontype="submit">Submit</button></form>

Share