onSubmit function for multiple typeform on one page | Community
Skip to main content
Answered

onSubmit function for multiple typeform on one page

  • December 20, 2021
  • 2 replies
  • 103 views

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') }
      });
    });

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:

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

View original

2 replies

mathio-tf
Typeform
Forum|alt.badge.img+5
  • Typeform
  • 888 replies
  • Answer
  • 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:

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


Liz
Community Team
Forum|alt.badge.img+5
  • Tech Community Advocate
  • 15035 replies
  • December 28, 2021

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