Hi everybody
I have followed this great tuoturial to get html element value to wix https://support.wix.com/en/article/wix-code-working-with-the-html-element
but this is only for one element what about muliti elempents for example 4 textboxes or more with checkbox values how will i get the data and pass it whatever to parameter or txtboxes
this is my trial
// For full API documentation, including code examples, visit http://wix.to/94BuAAs $w.onReady(function () { // when a message is received from the HTML element $w("#myHtmlElement").onMessage( (event) => { let Getdata = event.data; let firstOfType = Getdata[0]; console.log(firstOfType); }); } ); export function messageSendButton_onClick() { // send message to the HTML element $w("#myHtmlElement").postMessage($w("#textInput1").value); }
i tried to get them in array like this Getdata[0][1]
but i get undefined
this is my html code
<html>
<head>
<style>
.button {
background-color: #155DE9;
color: white;
border: none;
padding: 10px 20px;
text-align: center;
font-family: 'Arial';
}
.label {
font-family: 'Arial';
}
.input {
font-size: 14px;
}
</style>
<script type="text/javascript">
// when a message is received from the page code
window.onmessage = (event) => {
debugger;
if (event.data) {
document.getElementById("theLabel").innerHTML = event.data;
let receivedData = event.data;
var arr = receivedData.split (",");
var selIndex = (arr[1]);
}
};
// send message to the page code
function button_click() {
window.parent.postMessage(document.getElementById("theMessage").value, "*");
window.parent.postMessage(document.getElementById("theMessage1").value, "*");
window.parent.postMessage(document.getElementById("theMessage2").value, "*");
window.parent.postMessage(document.getElementById("theMessage3").value, "*");
}
</script>
</head>
<body>
<span id="theLabel" class="label">HTML Label</span>
<br/><br/>
<button class="button" onclick="button_click()">Send Message</button>
<br/><br/>
<input type="text" class="input" id="theMessage">
<br/><br/>
<input type="text" class="input" id="theMessage1">
<br/><br/>
<input type="text" class="input" id="theMessage2">
<br/><br/>
<input type="text" class="input" id="theMessage3">
</body>
</html>