0 I am embedding 2 typeform on my webpage. When I submit 1st typefrom onSubmit function get executed, but onSubmit function of 2nd typeform get called automatically even I submitted the 1st typeform.<div id="my-embedded-typeform1" style="width: 100%; height: 300px;"></div><div id="my-embedded-typeform2" style="width: 100%; height: 300px;"></div><script src="https://embed.typeform.com/embed.js" type="text/javascript"</script> window.addEventListener("DOMContentLoaded", function() { var el = document.getElementById("my-embedded-typeform1"); var el2 = document.getElementById("my-embedded-typeform2"); window.typeformEmbed.makeWidget(el1, "https://admin.typeform.com/to/cVa5IG", { hideFooter: true, onSubmit: () => { alert('Typeform 1 submitted') } });window.typeformEmbed.makeWidget(el2, "https://admin.typeform.com/to/cVa5IG", { hideFooter: true, onSubmit: () => { alert('Typeform 2 submitted') } }); });

Hello @wellinston37247you have aJavaScript error in your code:Uncaught ReferenceError: el1 is not definedAlso the <script> tag is missing bracket >.Also, you are using old version of embed library. While this library is still available, we no longer provide support for it. I suggest you use latestembed library - version 1.Here is yourcode rewritten for new library:<div id="my-embedded-typeform1" style="width: 100%; height: 300px;"></div><div id="my-embedded-typeform2" style="width: 100%; height: 300px;"></div><script src="//embed.typeform.com/next/embed.js" type="text/javascript"></script><script> window.addEventListener("DOMContentLoaded", function() { var el = document.getElementById("my-embedded-typeform1"); var el2 = document.getElementById("my-embedded-typeform2"); window.tf.createWidget('cVa5IG', { container: el, hideFooter: true, onSubmit: () => { alert('Typeform 1 submitted') } }); window.tf.createWidget('cVa5IG', { container: el2, hideFooter: true, onSubmit: () => { alert('Typeform 2 submitted') } });});</script>I tested the code above and it works as expected.

Answered

onSubmit function for multiple typeform on one page

3 years ago
December 20, 2021
2 replies
113 views

W

wellinston37247
Explorer

0

I am embedding 2 typeform on my webpage. When I submit 1st typefrom onSubmit function get executed, but onSubmit function of 2nd typeform get called automatically even I submitted the 1st typeform.

1<div id="my-embedded-typeform1" style="width: 100%; height: 300px;"></div>
2<div id="my-embedded-typeform2" style="width: 100%; height: 300px;"></div>
3
4<script src="https://embed.typeform.com/embed.js" type="text/javascript"</script>
5 window.addEventListener("DOMContentLoaded", function() {
6      var el = document.getElementById("my-embedded-typeform1");
7      var el2 = document.getElementById("my-embedded-typeform2");
8      window.typeformEmbed.makeWidget(el1, "https://admin.typeform.com/to/cVa5IG", {
9        hideFooter: true,
10        onSubmit: () => { alert('Typeform 1 submitted') }
11      });
12window.typeformEmbed.makeWidget(el2, "https://admin.typeform.com/to/cVa5IG", {
13        hideFooter: true,
14        onSubmit: () => { alert('Typeform 2 submitted') }
15      });
16    });

Best answer by mathio-tf

Hello @wellinston37247

you have a JavaScript error in your code:

Uncaught ReferenceError: el1 is not defined

Also the <script> tag is missing bracket >.

Also, you are using old version of embed library. While this library is still available, we no longer provide support for it. I suggest you use latest embed library - version 1.

Here is your code rewritten for new library:

1<div id="my-embedded-typeform1" style="width: 100%; height: 300px;"></div>
2<div id="my-embedded-typeform2" style="width: 100%; height: 300px;"></div>
3
4<script src="//embed.typeform.com/next/embed.js" type="text/javascript"></script>
5<script>
6  window.addEventListener("DOMContentLoaded", function() {
7  var el = document.getElementById("my-embedded-typeform1");
8  var el2 = document.getElementById("my-embedded-typeform2");
9
10  window.tf.createWidget('cVa5IG', { 
11    container: el, 
12    hideFooter: true, 
13    onSubmit: () => { alert('Typeform 1 submitted') }
14  });
15
16
17  window.tf.createWidget('cVa5IG', {
18    container: el2,
19    hideFooter: true,
20    onSubmit: () => { alert('Typeform 2 submitted') }
21  });
22});
23</script>
24

I tested the code above and it works as expected.

View original

+5

mathio-tf
Typeform
888 replies
Answer
3 years ago
December 20, 2021

Hello @wellinston37247

you have a JavaScript error in your code:

Uncaught ReferenceError: el1 is not defined

Also the <script> tag is missing bracket >.

Also, you are using old version of embed library. While this library is still available, we no longer provide support for it. I suggest you use latest embed library - version 1.

Here is your code rewritten for new library:

1<div id="my-embedded-typeform1" style="width: 100%; height: 300px;"></div>
2<div id="my-embedded-typeform2" style="width: 100%; height: 300px;"></div>
3
4<script src="//embed.typeform.com/next/embed.js" type="text/javascript"></script>
5<script>
6  window.addEventListener("DOMContentLoaded", function() {
7  var el = document.getElementById("my-embedded-typeform1");
8  var el2 = document.getElementById("my-embedded-typeform2");
9
10  window.tf.createWidget('cVa5IG', { 
11    container: el, 
12    hideFooter: true, 
13    onSubmit: () => { alert('Typeform 1 submitted') }
14  });
15
16
17  window.tf.createWidget('cVa5IG', {
18    container: el2,
19    hideFooter: true,
20    onSubmit: () => { alert('Typeform 2 submitted') }
21  });
22});
23</script>
24

I tested the code above and it works as expected.

+5

Liz
Tech Community Advocate
15035 replies
3 years ago
December 28, 2021

Hi @wellinston37247 Were you able to use @mathio ‘s suggestion to fix the issue? :grinning:

Life is a series of awkward moments separated by snacks.

onSubmit function for multiple typeform on one page

2 replies

Reply

Still need help?

Reply

Related topics

Is there a way to adjust the automatically calculated time to complete number?icon

How to create a virtual wedding guest book using VideoAsk 💍

Survey format adviceicon

Is there a way to show the current question AND the total number of questions? So something like 3/8icon

Change time to complete formicon

Still need help?

Sign up

Welcome back

Scanning file for viruses.

This file cannot be downloaded