The event names are different. For <fw-select>
, you’d want to use the fwChange
event. For <fw-button>
it is fwClick
.
So, you can write something like:
// I haven't tried using this with jQuery
$("#ticket_type").on("fwChange", function (event) {
let currentValue = event.target.value; // event.target holds reference to the (shadow) DOM element
});
Or, with vanilla JS:
document.querySelector("#ticket_type")
.addEventListener("fwChange", function (event) {
let currentValue = event.target.value;
});
Here is a full example of this working in action:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Crayons — Options test</title>
<script
type="module"
src="https://unpkg.com/@freshworks/crayons/dist/crayons/crayons.esm.js"
></script>
<script
nomodule
src="https://unpkg.com/@freshworks/crayons/dist/crayons/crayons.js"
></script>
<style>
.flex {
display: flex;
align-items: center;
}
</style>
</head>
<body>
<fw-select
id="select"
label="House Name"
required="true"
value="1"
placeholder="Your choice"
state-text="Select singluar option"
>
<fw-select-option value="1">Starks</fw-select-option>
<fw-select-option value="2">Lannisters</fw-select-option>
</fw-select>
<fw-button id="button" color="secondary">Get value</fw-button>
<div class="flex">
<p>Value from fw-select:</p>
<fw-label id="showValue" value=""></fw-label>
</div>
<script>
const select = document.querySelector("#select");
const button = document.querySelector("#button");
const showValue = document.querySelector("#showValue");
// Get value on change of select option
select.addEventListener("fwChange", function (evt) {
showValue.value = `From select fwChange: ${evt.target.value}`;
});
button.addEventListener("fwClick", function (evt) {
showValue.value = `From button fwClick: ${select.value}`;
});
</script>
</body>
</html>
Here is how the example looks:
