SPFX radio button click to update label value
-
20-02-2021 - |
Domanda
I have SPFX no framework web part in SharePoint 2019. I am having trouble automatically calling a function when the radio/checkbox button is clicked within the form.
Here is a radio button within the render() method:
public render(): void {
this.domElement.innerHTML = `
<div class="${styles.orderform}">
<div class="${styles.container}">
<div class="${styles.row}">
<div class="${styles.column}">
<span class="${styles.title}"></span>
<div id="row">
<div class="col-50 idSubscriptionption">
<input type="radio" value="Subscription" id="idSubscriptionption" onchange="handleClick() name="group1">
<label id="Subscription"></label><br>
</div>
The eventhandler nor the function does not receive any onchange trigger
private setButtonsEventHandlers(): void {
const webPart: OrderformWebPart = this;
this.domElement.querySelector('button.create-Button').addEventListener('click', () => { webPart.SaveItem(); });
this.domElement.querySelector('idSubscriptionption').addEventListener('click', () => { handleClick(); });
}
function handleClick() {
let elsub = <HTMLInputElement>document.getElementById('idSubscriptionption');
if(elsub.checked)
{
document.getElementById('Subscription')[value]='Subscription chosen'
alert('Subscription selected');
}
else
{
document.getElementById('Subscription')[value]='No Subscription'
}
}
Soluzione
I can see that there are some semantic errors in your code. Try using below:
this.domElement.querySelector('input#idSubscriptionption').addEventListener('click', () => { handleClick(); });
AND
<input type="radio" value="Subscription" id="idSubscriptionption" onchange="handleClick()" name="group1">
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a sharepoint.stackexchange