Javascript-форум - Wix: передача переменных в HTML с добавлением в форму.

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Wix: передача переменных в HTML с добавлением в форму. (https://javascript.ru/forum/misc/79530-wix-peredacha-peremennykh-v-html-s-dobavleniem-v-formu.html)

Wix: передача переменных в HTML с добавлением в форму.

Wix. С помощью iFrame на страницу конструктора можно вставить сторонний код html.

Используя onMessge по нажатию на кнопку на странице конструктора в данный сторонний html код я могу передать массив данных ['first', 'second', 'third', 'fourth', 'fifth'] и разобрать его по переменным:

<html>
.....

$w("#HtmlComponent").onMessage( (event) => {

let receivedData = event.data; //['first', 'second', 'third', 'fourth', 'fifth']

let first = receivedData[0] // 'first'

let second = receivedData[1] // 'second'

let third = receivedData[2] // 'third'

let fourth = receivedData[3] // 'fourth'

let fifth = receivedData[4] // 'fifth'

} );

</html>

Задача:

После передачи массива в сторонний HTML сформировать в нем следующую форму и добавить в неё значения полученных переменных

<form name="test" method="post" action="https://test.com/test.php" accept-charset="UTF-8">

<input type="hidden" name="Id1" value="first" /> // чтобы в параметр “value” вставилось значение переменной first, далее - аналогично.

<input type="hidden" name="Id2" value="second" />

<input type="hidden" name="id3" value="third" />

<input type="hidden" name="id4" value="fourth" />

<input type="submit" value="fifth">

</form>

Заранее благодарен!

Дoпустим есть
<div id='form'></div>
и в нем надо сформировать эту форму

let ediv = document.getElementById('form')
ediv.innerHTML = `<form name="test" method="post" action="https://test.com/test.php" accept-charset="UTF-8">
<input type="hidden" name="Id1" value="${first}" /> 
<input type="hidden" name="Id2" value="${second}" />
<input type="hidden" name="id3" value="${third}" />
<input type="hidden" name="id4" value="${fouth}" />
<input type="submit" value="${fifth}">
</form>`

Да, все верно, спасибо. А как вызвать ее после получения данных?
Вот эта функция получает данные:
$w("#HtmlComponent").onMessage( (event) => {
let receivedData = event.data; //['first', 'second', 'third', 'fourth', 'fifth']
let first = receivedData[0] // 'first'
let second = receivedData[1] // 'second'
let third = receivedData[2] // 'third'
let fourth = receivedData[3] // 'fourth'
let fifth = receivedData[4] // 'fifth'
} );
как запустить форму только после получения данных?

Nordgod,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

А что значит "запустить форму"
Форма должна появиться на экране.
Ну вставьте код создания формы сразу после получения события и
присваивания переменным.

Всем спасибо, благодаря ответам со всем разобрался!)