+ Start a Discussion
sreenath reddy 21sreenath reddy 21 

how to restrict submit button on multiple times in lwc

By using  lwc, I am creating website, when i enter details and click on submit button it is saving results to the custom objects, when i click submit button multiple times it is saving record multiple times, how to prevent this i need only 1 time click on submit and record saved to org 
Best Answer chosen by sreenath reddy 21
CharuDuttCharuDutt
Hii Sreenath Reddy
Try The Below Code.
LWC...........
<template>
    <lightning-record-edit-form object-api-name="Account" onsuccess={handleSuccess}>
        <lightning-messages></lightning-messages>
        <div class="slds-m-around_medium">
            <lightning-input-field field-name='Id' value={accountId}></lightning-input-field>
            <lightning-input-field field-name='Name' value={nameValue} onchange={handleChange}></lightning-input-field>
            <div class="slds-m-top_medium">
                <lightning-button variant="brand" type="submit" name="save" label="Create Account" disabled={disableBtn}>
                </lightning-button>
           </div>
       </div>
    </lightning-record-edit-form>
</template>



JS...........


  disableBtn = true;  
    accountId;
    nameValue;
    handleChange(event){
        this.nameValue = event.target.value;
        if(this.nameValue != null && this.nameValue!=''){
            this.disableBtn = false;
            }
    }
   handleSuccess(event) {
      
       this.accountId = event.detail.id;
       this.dispatchEvent(
        new ShowToastEvent({
        title: 'Success',
        message: this.accountId+'Records',
        variant: 'success'
    }));
    
    this.nameValue = '';
    this.disableBtn = true;

   }
Please Don't Forget To Mark It as Best Answer If It Helps
Thank You!

All Answers

CharuDuttCharuDutt
Hii Sreenath Reddy
Try The Below Code.
LWC...........
<template>
    <lightning-record-edit-form object-api-name="Account" onsuccess={handleSuccess}>
        <lightning-messages></lightning-messages>
        <div class="slds-m-around_medium">
            <lightning-input-field field-name='Id' value={accountId}></lightning-input-field>
            <lightning-input-field field-name='Name' value={nameValue} onchange={handleChange}></lightning-input-field>
            <div class="slds-m-top_medium">
                <lightning-button variant="brand" type="submit" name="save" label="Create Account" disabled={disableBtn}>
                </lightning-button>
           </div>
       </div>
    </lightning-record-edit-form>
</template>



JS...........


  disableBtn = true;  
    accountId;
    nameValue;
    handleChange(event){
        this.nameValue = event.target.value;
        if(this.nameValue != null && this.nameValue!=''){
            this.disableBtn = false;
            }
    }
   handleSuccess(event) {
      
       this.accountId = event.detail.id;
       this.dispatchEvent(
        new ShowToastEvent({
        title: 'Success',
        message: this.accountId+'Records',
        variant: 'success'
    }));
    
    this.nameValue = '';
    this.disableBtn = true;

   }
Please Don't Forget To Mark It as Best Answer If It Helps
Thank You!
This was selected as the best answer
Naveen KNNaveen KN
Hi Sreenath, Curious to debug this issue, would you mind sharing the lwc template and js code? Please update if it is already resolved. Thanks.  
sreenath reddy 21sreenath reddy 21
Hi charuDutt 
Thanks for your replay, 
In js file i  changed disableBtn = false; apart from everything is fine