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•2y 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

winniffyOP•2y ago

i'm not using a form. do i need to rewrite my code?

MarkBoots•2y ago

ive made a quick example. https://codepen.io/MarkBoots/pen/WNKvLZM?editors=1111

Mark Boots

CodePen

WNKvLZM

...

MarkBoots•2y ago

you can see the output in the console

b1mind•2y ago

formData() ❤️

MarkBoots•2y 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•2y ago

winniffyOP•2y ago

whew! not used that before, long ting for me, gotta read up. thank you @MarkBoots

Electronic•2y 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

Gaming

Programming

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