+ Start a Discussion
Zander ZumbrunnenZander Zumbrunnen 

LWC: check if event.target.value is blank

Hello all,

So I have a small lwc where I want to enable a button when an input is not empty but I can not seem to get it to disable the button again if the value in the input field is deleted.

Methods I have tried:
event.target.value == undefined
event.target.value == null
event.target.value.length < 1

I imagine this is possible so I must be missing some key information about event.target.value.

Any help or infromation would be very helpful!

Thanks in advance.
Best Answer chosen by Zander Zumbrunnen
CharuDuttCharuDutt
Hii Zander Zumbrunnen
Try the below Code
LWC
 <lightning-input type='text' value={inputVal} onchange={handleChange}></lightning-input>
   <lightning-button label='click me' disabled={disableBtn} ></lightning-button>

JS
  inputVal;
    disableBtn = true;
    handleChange(event){
      this.inputVal = event.target.value;
      alert(this.inputVal);
      if(this.inputVal == null || this.inputVal == ''){
        this.disableBtn = true;
      }else{
        this.disableBtn = false;
      }
    }
Please Mark it As Best Answer if it Helps
Thank You!


 

All Answers

CharuDuttCharuDutt
Hii Zander Zumbrunnen
Try the below Code
LWC
 <lightning-input type='text' value={inputVal} onchange={handleChange}></lightning-input>
   <lightning-button label='click me' disabled={disableBtn} ></lightning-button>

JS
  inputVal;
    disableBtn = true;
    handleChange(event){
      this.inputVal = event.target.value;
      alert(this.inputVal);
      if(this.inputVal == null || this.inputVal == ''){
        this.disableBtn = true;
      }else{
        this.disableBtn = false;
      }
    }
Please Mark it As Best Answer if it Helps
Thank You!


 
This was selected as the best answer
Malika Pathak 9Malika Pathak 9
Hi Zander Zumbrunnen,
find the below solution
<lightning-input type='text' value={fieldValue} onchange={handleChange}></lightning-input>
   <lightning-button label='click me' disabled={disableBtn} ></lightning-button>

    JS
    @track fieldValue;
    @track disableBtn = true;
    handleChange(event){
      this.fieldValue = event.target.value;
      alert(this.fieldValue);
      if(this.fieldValue == null || this.fieldValue == ''||this.fieldValue.length>0){
        this.disableBtn = true;
      }else{
        this.disableBtn = false;
      }
    }

if you find this helpful mark it as the best answer
    
thanks, Regards,
Malika Pathak