0

I have a lightning web component built working with an Apex class. I am trying to add records to a list based on a checkbox input. Basically, the user will click a button to get images. Each image is presented with a checkbox. The user will select a few of the images and hit a save button. That will then call an apex class and create records. I am running into issues putting the records that the user checks into a list. Here is my js for that piece

SelectedCrs= [];selectCr(event){
    if(event.target.value===true){
    const found = this.crResult.find(element => element.crID === event.target.id);
    console.log(found);
    this.selectedCrs.push(found);
    } else {
    const remove = this.selectedCrs.indexOf(this.selectedCrs.find(element => element.crID === event.target.id));
    this.selectedCrs.splice(remove,1);
    }

}

Here is the html `lightning-button variant="brand" label="Get Images" title="Get Images" onclick={getImages} class="slds-m-left_x-small">

    <lightning-card title="Images" icon-name="custom:custom38">
        <div class="slds-card__body_inner">
            <template if:true={crResult}>
                <lightning-layout multiple-rows="true" pull-to-boundry="small">
                    <template for:each={crResult} for:item="result">
                        <lightning-layout-item key={result.crID} size="3" class="slds-p-around_x-small">
                            <lightning-card title="Select Images">
                                <img src = {result.crResp.url}/>
                                <lightning-input id={result.crID} type="checkbox" name="Select Image" label='Select' onchange={selectCr}></lightning-input>
                            </lightning-card>
                        </lightning-layout-item>
                    </template>
                </lightning-layout>
            </template>
            <lightning-button variant="brand" label="Save" onclick={saveImages} class="slds-m-left_x-small"></lightning-button>
        </div>
    </lightning-card>`

When they hit the save button, I am going to pass the list I created to Apex to create records. I can hit the button, get the images, but when I select the images they aren't going into a list according to my log. Any help would be appreciated.

0

It seems you are almost there, only two things you need to change in your code.

1) In the case of checkbox datatype we use "checked" in place of "value". So, replace "event.target.value" with "event.target.checked" as stated below -

selectCr(event){
    if(event.target.checked===true){
    const found = this.crResult.find(element => element.crID === event.target.id);
    console.log(found);
    this.selectedCrs.push(found);
    } else {
    const remove = this.selectedCrs.indexOf(this.selectedCrs.find(element => element.crID === event.target.id));
    this.selectedCrs.splice(remove,1);
    }

}

2) In Html, use "data-id" in place of "id" in the below line -

Previous:

<lightning-input id={result.crID} type="checkbox" name="Select Image" label='Select' onchange={selectCr}></lightning-input>

Later:

<lightning-input data-id={result.crID} type="checkbox" name="Select Image" label='Select' onchange={selectCr}></lightning-input>

Continuing, you will need to replace "event.target.id" with "event.target.dataset.id" in javascript file. See below -

selectCr(event){
    if(event.target.checked === true){
    const found = this.crResult.find(element => element.crID === event.target.dataset.id);
    console.log(found);
    this.selectedCrs.push(found);
    } else {
    const remove = this.selectedCrs.indexOf(this.selectedCrs.find(element => element.crID === event.target.dataset.id));
    this.selectedCrs.splice(remove,1);
    }

}
| improve this answer | |
  • Thank you for you input! – mpforce Jan 8 at 14:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.