Handle JS Event Values on Change

Question

I have an LWC with a piece that goes something like:

Javascript

    handlePCCFieldChange(event) {
      if (event.target.name === "checkbox") {
           this.Obj.checkbox = event.target.checked;
      console.log('checkbox');
      }
      if (event.target.name === "text") {
           this.Obj.text = event.target.value;
      console.log('text');
      }
    }

HTML

    <div>
      <lightning-input data-id="data-checkbox" type="checkbox" name="checkbox" onclick={handleFieldChange}></lightning-input><br>
      <lightning-input data-id="data-text" type="text" name="text" onclick={handleFieldChange}></lightning-input><br>

I do need to log the values on change for some conditional changes and state saving. However, I have some 20 or so fields that I need to save and this feels like a very inflated way of solving a rather simple task. Can someone help me find a better way to do this? I'm at a loss.

Does this answer your question? [Event when input value is changed by JavaScript?](https://stackoverflow.com/questions/42427606/event-when-input-value-is-changed-by-javascript) — Manas Khandelwal, Mar 08 '21 at 15:03
It did not but I was able to find a post that is able to do it more or less dynamically. I was pretty meticulous about keeping input names and obj properties the same so it worked really well. Thank you for the suggestion! — Nathaniel Manns, Mar 09 '21 at 20:34

score 0 · Answer 1 · answered Mar 08 '21 at 16:54

https://salesforce.stackexchange.com/questions/261189/track-input-value-in-lwc

This guy had it figured out. I did use a modified version of his answer to handle checkboxes

if (event.target.type === "checkbox") {
            this.Obj[event.target.name] = event.target.checked;
        } else {
            this.Obj[event.target.name] = event.target.value;
        }

Handle JS Event Values on Change

1 Answers1