1

I'm wanting to have multiple input fields have a live output without having to hit submit and have the ability to copy/paste the output.

Ex:

<input id="name1">
<input id="name2">

IF name1 is not empty, then display: Hi name1

IF name1 and name2 is not empty, then display: Hi name and name2

I saw another post: Printing field input data live with Javascript that comes close to what I'm looking for but not quite.

This might be something simple but I'm struggling with it.

Thanks

Malik
  • 21
  • 5

1 Answers1

1

You can to handler it with javascript

// select element input
const input = document.querySelector('input');

// select element output
const log = document.getElementById('values');

// event listener invoke when something change in input
input.addEventListener('input', updateValue);

// method 
function updateValue(e) {
log.textContent = e.target.value;
}

more : Run javascript after input is complete

CSharp Player
  • 96
  • 6
  • Thanks but I don't think that would give a live output while each field is filled out. – Malik Mar 08 '22 at 23:46
  • check the example:https://jsfiddle.net/dxqzfgrw/28/ – CSharp Player Mar 09 '22 at 19:35
  • Incredibly helpful! This is exactly what I was looking for. Will modify as needed but this is perfect. THANK YOU!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! – Malik Mar 09 '22 at 23:13
  • Alright so I tried modifying it. It worked initially with what you provided but once I tried tweaking it a bit, it no longer provided the output. Trying to integrate this with Gravity Forms on WordPress... I have the form created and want to replace the fields with the ones defined there. https://jsfiddle.net/qLef5o84/ – Malik Mar 25 '22 at 17:31