function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
kallam salesforce1kallam salesforce1 

Unable to get lightning tag values by using queySelectorAll() in LWC?

HTML >>>
<template>
   
    <div class="slds-m-top_medium slds-m-bottom_x-large">
        <h2 class="slds-text-heading_medium slds-m-bottom_medium">
            Button-icons with the <code>variant</code> attribute omitted or set to the default value of <code>border</code>.
        </h2>
        <!-- with border / by default -->
        <div class="slds-p-around_medium lgc-bg">
            <lightning-button-icon icon-name="utility:add"  alternative-text="New Request" title="New request" onclick={showModalpopUp}></lightning-button-icon>
            <template if:true={isModalpopupTrue}>
                <!-- //<c-modal-popup-component></c-modal-popup-component> -->
                <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
                    <div class="slds-modal__container">
                     <!-- modal header start -->
                       <header class="slds-modal__header">
                          <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close" onclick={hideModalBox}>
                             <lightning-icon icon-name="utility:close"
                                alternative-text="close"
                                variant="inverse"
                                size="small" ></lightning-icon>
                             <span class="slds-assistive-text">Close</span>
                          </button>
                          <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">Leave Request</h2>
                       </header>
                   
                       <!-- modal body start -->
                       <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
                        <lightning-record-edit-form object-api-name={objectApiName}
                        record-id={recordId} onsuccess={handleSuccess}>
                        <lightning-messages></lightning-messages>
                        <lightning-input-field field-name={user}> </lightning-input-field>
                        <lightning-input-field field-name={FromDate}> </lightning-input-field>
                        <lightning-input-field field-name={Todate}> </lightning-input-field>
                        <lightning-input-field field-name={Reason}> </lightning-input-field>
                        <lightning-button  variant="brand"  type="submit" name="save" label="Save">
                        </lightning-button>
                        <lightning-button   type="submit" name="Cancel" label="Cancel" onclick={hideModalBox}>
                        </lightning-button>
                        </lightning-record-edit-form>
                             
                       </div>
             
                       <!-- modal footer start
                       <footer class="slds-modal__footer">
                        <lightning-button  variant="brand"  type="submit" name="save" label="Save">
                        </lightning-button>
                          <button class="slds-button slds-button_neutral" onclick={hideModalBox}>Cancel</button>
                       </footer> -->
                   
                    </div>
                 </section>
                 <div class="slds-backdrop slds-backdrop_open"></div>
           
            </template>
        </div>
        <div style="height: 300px;">
            <lightning-datatable
                    key-field="id"
                    data={tabledata}
                    columns={columns}
                    hide-checkbox-column
                    onrowaction={handleRowAction}>
            </lightning-datatable>
        </div>
    </div>        
</template>

Js file >>>>>>>>> 

 showModalpopUp(){
       this.isModalpopupTrue = true;
       console.log('Get the details of Lig input tag >>>>>>'+this.template.querySelectorAll("lightning-input-field"));
       
       this.template.querySelectorAll('lightning-input').forEach(element => {            
        element.value = null;
      });  
    }

Getting error as  >>
Get the details of Lig input tag >>>>>>SecureNodeList: [object NodeList]{ key: {"namespace":"c"} }
CharuDuttCharuDutt
Hii Kallam
Try Below Example 
HTML

<lightning-input
    data-type="user-input"
    name={filter.Filter_Label__c}
    label={filter.Filter_Label__c}
    value={filter.Default_Value__c}
    onblur={handleBlur}>
</lightning-input>

===================================

JS

showModalpopUp(){
        console.log('showModalpopUp');
        const userInputs = this.template.querySelectorAll('[data-type="user-input"]');
        userInputs.forEach( input => {
            console.log('MVK element input-->'+input);
            console.log('MVK element value input-->'+input.value);
            console.log('MVK element json input-->'+input.dataset.json);
        });
}

Please mark it as best answer if it helps 
Thank You!
kallam salesforce1kallam salesforce1

@CharuDutt  Thanks for the reply 

I tried above one but still getting same error in console
CharuDuttCharuDutt
Hii kallam 
Try Below Code 
<template>
    <lightning-card title='Test LWC' icon-name='standard:account'>
               
        <lightning-layout>
            <div>
                <lightning-record-edit-form object-api-name="Account" onsuccess={handleSuccess}>
            <div  class='container'>
            <div class='box1'>    
               
                    <lightning-input-field field-name="Name" name='Name'></lightning-input-field>
                    <lightning-input-field field-name="Phone" name='Phone'></lightning-input-field>
                    <lightning-input-field field-name="Industry" name='Industry'></lightning-input-field>

            </div>
            <div class='box2'>
               
                        <lightning-input-field field-name="AccountNumber" name='AccountNumber'></lightning-input-field>
                    <lightning-input-field field-name="Active__c" name='Active__c'></lightning-input-field>
                    <lightning-input-field field-name="Employee_Salary__c" name='Employee_Salary__c'></lightning-input-field> 
            </div>   
            </div>
                    <lightning-button class='slds-m-left_small slds-m-right_small' type="submit" variant="brand" name="submit" label="Create Account"></lightning-button>
                    <lightning-button variant="brand" type="reset" label="Reset"></lightning-button>
                </lightning-record-edit-form>
            </div>
        </lightning-layout>
    </lightning-card>
</template>


JS

import {ShowToastEvent} from 'lightning/platformShowToastEvent';

handleSuccess(event){
        this.accountId = event.detail.id;
        var toast = new ShowToastEvent({
            'title': 'Account Created...',
            'message': this.accountId + ' This Is Success Message',
            'variant': 'success'
        });
        this.dispatchEvent(toast);
        var inputFields = this.template.querySelectorAll('lightning-input-field');
        console.log('inputFields>>> '+ JSON.stringify(inputFields));
        if (inputFields) {
            inputFields.forEach(field => {
                console.log('field' + JSON.stringify(field));
            });
        } 


    }

Please mark it as best answer if it helps 
Thank You!