I cannot get my HTML widget to respond to any postMessages I’m sending to it and it also won’t post any console logging I try,
Here is my code for my wix page
$w.onReady(function () {
$w("#html1").onMessage( (event) => {
console.log("msg");
if(event.data === "init"){
console.log("ready")
}
} );
});
export function button48_click(event) {
// send message to the HTML element
let mdAmt = $w('#input80').value;
let fdAmt = $w('#input81').value;
let mcAmt = $w('#input82').value;
let fcAmt = $w('#input83').value;
let vouchers = [
mdAmt,
fdAmt,
mcAmt,
fcAmt
];
if(vouchers[0] === ""){
vouchers[0] = "0"
}
if(vouchers[1] === ""){
vouchers[1] = "0"
}
if(vouchers[2] === ""){
vouchers[2] = "0"
}
if(vouchers[3] === ""){
vouchers[3] = "0"
}
console.log(vouchers);
$w('#html1').postMessage(vouchers);
}
Here is my code for my widget (using a paypal add to cart button)
<html>
<head>
<script type="text/javascript">
function init ()(
console.log("msg received")
window.parent.postMessage('init', '*');
};
window.onmessage = (event) => {
let receivedData = event.data;
document.getElementById("md").value = receivedData[0];
document.getElementById("fd").value = receivedData[1];
document.getElementById("mc").value = receivedData[2];
document.getElementById("fc").value = receivedData[3];
};
function button_click() {
window.parent.postMessage("done", "*");
};
</script>
</head>
<body onload="init();">
<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="charset" value="utf-8">
<input type="hidden" name="lc" value="en_US">
<input type="hidden" name="no_note" value="1">
<input type="hidden" name="no_shipping" value="1">
<input type="hidden" name="business" value="**redacted**">
<input type="hidden" name="upload" value="1">
<!-- item 1 -->
<input type="hidden" name="item_name_1" value="Male Dog Voucher">
<input type="text" id="md" name="quantity_1" value="">
<input type="hidden" name="amount_1" value="65.00">
<!-- item 2 -->
<input type="hidden" name="item_name_2" value="Female Dog Voucher">
<input type="hidden" id="fd" name="quantity_2" value="">
<input type="hidden" name="amount_2" value="90.00">
<!-- item 3 -->
<input type="hidden" name="item_name_3" value="Male Cat Voucher">
<input type="hidden" id="mc" name="quantity_3" value="">
<input type="hidden" name="amount_3" value="25.00">
<!-- item 4 -->
<input type="hidden" name="item_name_4" value="Female Cat Voucher">
<input type="hidden" id="fc" name="quantity_4" value="">
<input type="hidden" name="amount_4" value="45.00">
<input type="image" src="https://static.wixstatic.com/media/e1d3bb_b5890e554cb0453cb453e94db8a858f4~mv2.png" border="0" height="57" width="263" name="submit" upload="1" id="btn" onclick="button_click" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>
</body>
</html>
I have tested each side of data and the form itself, it all works individually but not when I’m trying to send data back and forth.
Thanks for any help.
Try this one…
export function button48_click(event) {
let vouchers = []
//-----------------------------------
vouchers[0] = $w('#input80').value;
vouchers[1] = $w('#input81').value;
vouchers[2] = $w('#input82').value;
vouchers[3] = $w('#input83').value;
//-----------------------------------
if(vouchers[0] === undefined) {vouchers[0] = "0";}
if(vouchers[1] === undefined) {vouchers[1] = "0";}
if(vouchers[2] === undefined) {vouchers[2] = "0";}
if(vouchers[3] === undefined) {vouchers[3] = "0";}
//-----------------------------------
setTimeout(()=>{console.log(vouchers.length);
console.log(vouchers);
$w('#html1').postMessage(vouchers);
},100);
}
<html>
<head>
<script type="text/javascript">
function init(){
window.onmessage = (event) => {console.log(event)
let receivedData = event.data; console.log(receivedData)
document.getElementById("md").value = receivedData[0],
document.getElementById("fd").value = receivedData[1],
document.getElementById("mc").value = receivedData[2],
document.getElementById("fc").value = receivedData[3],
}
}
</script>
</head>
<body onload="init();">
<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="charset" value="utf-8">
<input type="hidden" name="lc" value="en_US">
<input type="hidden" name="no_note" value="1">
<input type="hidden" name="no_shipping" value="1">
<input type="hidden" name="business" value="**redacted**">
<input type="hidden" name="upload" value="1">
<!-- item 1 -->
<input type="hidden" name="item_name_1" value="Male Dog Voucher">
<input type="text" id="md" name="quantity_1" value="">
<input type="hidden" name="amount_1" value="65.00">
<!-- item 2 -->
<input type="hidden" name="item_name_2" value="Female Dog Voucher">
<input type="hidden" id="fd" name="quantity_2" value="">
<input type="hidden" name="amount_2" value="90.00">
<!-- item 3 -->
<input type="hidden" name="item_name_3" value="Male Cat Voucher">
<input type="hidden" id="mc" name="quantity_3" value="">
<input type="hidden" name="amount_3" value="25.00">
<!-- item 4 -->
<input type="hidden" name="item_name_4" value="Female Cat Voucher">
<input type="hidden" id="fc" name="quantity_4" value="">
<input type="hidden" name="amount_4" value="45.00">
<input type="image" src="https://static.wixstatic.com/media/e1d3bb_b5890e554cb0453cb453e94db8a858f4~mv2.png" border="0" height="57" width="263" name="submit" upload="1" id="btn" onclick="button_click" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>
</body>
</html>
It’s still not putting the numbers into the input field. And none of the HTML console logs show in my dev console either, only the parent page’s.
Also I want to add that my HTML element is within a multistep wix form but I tried testing it outside the form too and it didn’t make a difference.
@raraavismedia
Take a look into console. Modify by your needs again.
let vouchers = []
$w.onReady(()=>{ });
export function button1_click(event) {
vouchers[0] = undefined;
vouchers[1] = undefined;
vouchers[2] = undefined;
vouchers[3] = undefined;
//-----------------------------------
if(vouchers[0] === undefined) {vouchers[0] = "1";}
if(vouchers[1] === undefined) {vouchers[1] = "1";}
if(vouchers[2] === undefined) {vouchers[2] = "1";}
if(vouchers[3] === undefined) {vouchers[3] = "1";}
//-----------------------------------
console.log(vouchers.length);
console.log(vouchers);
$w('#html1').postMessage(vouchers);
}
<html>
<head>
<script>
function init () {console.log("Function INIT running....")
window.onmessage = (event) => {console.log(event);
let receivedData = event.data;
if (receivedData) {console.log("HTML Code Element received a message!");
console.log(receivedData[0]);
console.log(receivedData[1]);
console.log(receivedData[2]);
console.log(receivedData[3]);
document.getElementById("md").value = receivedData[0];
document.getElementById("fd").value = receivedData[1];
document.getElementById("mc").value = receivedData[2];
document.getElementById("fc").value = receivedData[3];
}
else {console.log("No message received.")}
}
}
</script>
</head>
<body onload="init();">
<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="charset" value="utf-8">
<input type="hidden" name="lc" value="en_US">
<input type="hidden" name="no_note" value="1">
<input type="hidden" name="no_shipping" value="1">
<input type="hidden" name="business" value="**redacted**">
<input type="hidden" name="upload" value="1">
<!-- item 1 -->
<input type="hidden" name="item_name_1" value="Male Dog Voucher">
<input type="text" id="md" name="quantity_1" value="">
<input type="hidden" name="amount_1" value="65.00">
<!-- item 2 -->
<input type="hidden" name="item_name_2" value="Female Dog Voucher">
<input type="hidden" id="fd" name="quantity_2" value="">
<input type="hidden" name="amount_2" value="90.00">
<!-- item 3 -->
<input type="hidden" name="item_name_3" value="Male Cat Voucher">
<input type="hidden" id="mc" name="quantity_3" value="">
<input type="hidden" name="amount_3" value="25.00">
<!-- item 4 -->
<input type="hidden" name="item_name_4" value="Female Cat Voucher">
<input type="hidden" id="fc" name="quantity_4" value="">
<input type="hidden" name="amount_4" value="45.00">
<input type="image" src="https://static.wixstatic.com/media/e1d3bb_b5890e554cb0453cb453e94db8a858f4~mv2.png" border="0" height="57" width="263" name="submit" upload="1" id="btn" onclick="button_click" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>
</body>
</html>
@russian-dima Thank you, I was able to get it working!
@raraavismedia
You are welcome.
