KPC
Kevin Powell - Community•3y ago
winniffy

how do i get input values inputted into input field 'in real-time' and use the input values?

here's code i've tried: 
tipButtons.forEach(tipButton => {
    tipButton.addEventListener('click', (e) => {

if(e.target.value === "") {
            console.log('custom')

            tipAmount.innerHTML = `$${((billAmount * customTip) / numberOfPeople).toFixed(2)}`;
            totalAmount.innerHTML = `$${(billPerPerson + ((billAmount * customTip) / numberOfPeople)).toFixed(2)}`;
        }
tipButtons.forEach(tipButton => {
    tipButton.addEventListener('click', (e) => {

if(e.target.value === "") {
            console.log('custom')

            tipAmount.innerHTML = `$${((billAmount * customTip) / numberOfPeople).toFixed(2)}`;
            totalAmount.innerHTML = `$${(billPerPerson + ((billAmount * customTip) / numberOfPeople)).toFixed(2)}`;
        }
i'm not sure i've asked this clearly but i hope someone understands me
9 Replies
MarkBoots
MarkBoots•3y ago
you can use an "input" eventlistener on form elements. if you put everthing inside a <form> you can even do it on that one alone
winniffy
winniffyOP•3y ago
i'm not using a form. do i need to rewrite my code?
MarkBoots
MarkBoots•3y ago
MarkBoots
MarkBoots•3y ago
you can see the output in the console
b1mind
b1mind•3y ago
formData() ❤️
MarkBoots
MarkBoots•3y ago
that's what it's made for. always used it pen remove, backup 
<form>
  <div class="field">
    <label for="bill">Bill</label>
    <input type="number" name="bill" id="bill">
  </div>
  <div class="field">
    <label for="tip-5">Select Tip %</label>
    <div class="tip-options">
      <input type="radio" name="tip" value="5" id="tip-5"><label for="tip-5">5%</label>
      <input type="radio" name="tip" value="10" id="tip-10"><label for="tip-10">10%</label>
      <input type="radio" name="tip" value="15" id="tip-15"><label for="tip-15">15%</label>
      <input type="radio" name="tip" value="25" id="tip-25"><label for="tip-25">25%</label>
      <input type="radio" name="tip" value="50" id="tip-50"><label for="tip-50">50%</label>
      <input type="radio" name="tip" id="tip-custom" value="custom"><label for="tip-custom">Custom</label>
      <input type="number" name="tip-custom-value" id="tip-custom-value">
    </div>
  </div>
  <div class="field">
    <label for="people">Number of People</label>
    <input type="number" name="people" id="people">
  </div>
<form>
  <div class="field">
    <label for="bill">Bill</label>
    <input type="number" name="bill" id="bill">
  </div>
  <div class="field">
    <label for="tip-5">Select Tip %</label>
    <div class="tip-options">
      <input type="radio" name="tip" value="5" id="tip-5"><label for="tip-5">5%</label>
      <input type="radio" name="tip" value="10" id="tip-10"><label for="tip-10">10%</label>
      <input type="radio" name="tip" value="15" id="tip-15"><label for="tip-15">15%</label>
      <input type="radio" name="tip" value="25" id="tip-25"><label for="tip-25">25%</label>
      <input type="radio" name="tip" value="50" id="tip-50"><label for="tip-50">50%</label>
      <input type="radio" name="tip" id="tip-custom" value="custom"><label for="tip-custom">Custom</label>
      <input type="number" name="tip-custom-value" id="tip-custom-value">
    </div>
  </div>
  <div class="field">
    <label for="people">Number of People</label>
    <input type="number" name="people" id="people">
  </div>
body { background-color: #C5E4E7 }
form { display: grid; gap: 1rem; background-color: #FFFEFE; padding: 1em }
form > .field { display: grid }
.tip-options{ display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem }
.tip-options > input[type="radio"] { display: none }
.tip-options > input[type="radio"] + label { background-color: #00464B } 
.tip-options > input[type="radio"]:checked + label { background-color: #9EE7DF }
.tip-options > input#tip-custom + label { background-color: #C5E4E7 }
.tip-options > input#tip-custom:checked + label { display: none }
.tip-options > input#tip-custom:not(:checked) + label + input#tip-custom-value { display: none }
body { background-color: #C5E4E7 }
form { display: grid; gap: 1rem; background-color: #FFFEFE; padding: 1em }
form > .field { display: grid }
.tip-options{ display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem }
.tip-options > input[type="radio"] { display: none }
.tip-options > input[type="radio"] + label { background-color: #00464B } 
.tip-options > input[type="radio"]:checked + label { background-color: #9EE7DF }
.tip-options > input#tip-custom + label { background-color: #C5E4E7 }
.tip-options > input#tip-custom:checked + label { display: none }
.tip-options > input#tip-custom:not(:checked) + label + input#tip-custom-value { display: none }
const formElement = document.querySelector("form");
formElement.addEventListener("input", handleform)

function handleform({currentTarget:form}){
  const data = new FormData(form);
  const bill = data.get("bill");
  let tip = data.get("tip")
  if(tip==="custom") tip = data.get("tip-custom-value")   
  
  const people = data.get("people");
  console.log({ bill, tip, people })
}
const formElement = document.querySelector("form");
formElement.addEventListener("input", handleform)

function handleform({currentTarget:form}){
  const data = new FormData(form);
  const bill = data.get("bill");
  let tip = data.get("tip")
  if(tip==="custom") tip = data.get("tip-custom-value")   
  
  const people = data.get("people");
  console.log({ bill, tip, people })
}
MarkBoots
MarkBoots•3y ago
winniffy
winniffyOP•3y ago
whew! not used that before, long ting for me, gotta read up. thank you @MarkBoots
Electronic
Electronic•3y ago
I started off using....form.[name of input] to get the properties but when I started backend formdata made it easier when transferring images especially

Did you find this page helpful?