[SOLVED] HTML Widget not responding to postMessage

Ask the community
,
4

@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>