Apex Code Development You need to sign in to do that
Don't have an account?
Shuhbam Sinha How to add multiple ONCHANGE event to a list in LWC
Hello Everyone,
I have one requirement where I need to add multiple onchange event to a list. So I have multiple records which has lightning combobox and I am trying to add ochange event value to a list. I am able to add a single onchange value but I am not able to add the multiple onchange event for a single transaction if user updates multiple records.
Below is my code :-
Please help me on the same . Thanks in advance
I have one requirement where I need to add multiple onchange event to a list. So I have multiple records which has lightning combobox and I am trying to add ochange event value to a list. I am able to add a single onchange value but I am not able to add the multiple onchange event for a single transaction if user updates multiple records.
Below is my code :-
handleChange(event) {
this.value = event.detail.value;
const selectedRecordId = event.target.dataset.id;
console.log('trueOwnerId',this.areDetailsVisible);
console.log("inputno",this.value);
console.log("record",selectedRecordId);
// i need to add the multiple events on the below list .
this.listRecords = [{Id : event.target.dataset.id ,[event.target.dataset.field] : event.detail.value}];
console.log( "newrealform",this.listRecords);
}
Please help me on the same . Thanks in advance
Here's an example of how you can do that in Aura:
Create a list of onchange event handlers in your JavaScript controller:
Copy code
let onChangeHandlers = [ function(event) { console.log("onchange event 1"); }, function(event) { console.log("onchange event 2"); }, function(event) { console.log("onchange event 3"); } ];
In your component's JavaScript controller, iterate through the list of onchange handlers and attach each one to the appropriate combobox element:
Copy code
for (let i = 0; i < onChangeHandlers.length; i++) { let combobox = component.find("combobox_" + i); combobox.addEventHandler("onchange", onChangeHandlers[i]); }
In this example, the combobox_ + i will be the id of the combobox element in your component's markup. So you will have to make sure that you are using the appropriate id of the combobox element in your code.
You can also use the addEventListener() method to add multiple event listeners to a single element, instead of using the addEventHandler() method.
Copy code
let combobox = component.find("combobox_" + i); combobox.addEventListener("change", function(){console.log("event 1")}); combobox.addEventListener("change", function(){console.log("event 2")}); combobox.addEventListener("change", function(){console.log("event 3")});
This way you can add multiple events to a single combobox element.
You can also use a for loop to add the events to multiple combobox element.
Keep in mind that you will have to make sure that the order of adding events to the component is in the order that you want the events to fire.
https://www.myccpay.one/
As per your requirement, you need to update multiple Rows from the list of records.
First, inside your LWC component, you need to provide an attribute for:index="index" inside your template where your are looping over the record.
Below is an example of that:
<table>
<template for:each={RecordsList} for:index="index" for:item="obj">
<tr key={obj.Id}>
<td>
<lightning-input name="Name" type="Text" data-index={index} onchange={handleChange} />
</td>
</tr>
</template>
</table>
After that inside your LWC JS File, you need to access first that index with "event.currentTarget.dataset.index". After this you can access the record with the help of an index and update this record. Below is the code for this handleChange function:
handleChange(event){
console.log('Index@@==>>'+event.currentTarget.dataset.index);
console.log('value@@==>>'+event.target.value);
let tempObj = this.RecordsList[event.currentTarget.dataset.index];
tempObj = {
...tempObj,
Name : event.target.value
}
this.RecordsList.splice(event.currentTarget.dataset.index, 1, tempObj);
}
Thanks