How to avoid loading forms on top of each other using OnChange and Marketo

Question

I have a dropdown list with "onchange" function to load a Marketo form based on user input. Forms load correctly except that when the user initially chooses "need new product" then switches to "need support" (or vise versa), the "product form" does not go away. Instead, the "product form" stays and "need support" form is loaded in addition (below product form). The user can switch/flipflop multiple times to result in many extra forms which is a problem!

I need help tweaking the code so that only one form is loaded at all times, and that the previous form(s) the user selected is no longer there when the user flip flops. Any help?? Thanks!

<script src="//app-e.marketo.com/js/forms2/js/forms2.js"></script>

<p>How can we help?</p>
<select id="mySelect" onchange="myFunction()">
  <option value="default">--please select a reason--</option>
  <option value="product">Need a new product</option>
  <option value="support">Need support</option>
</select>


<p id="demo"></p>
<script>
function myFunction() {
    var x = document.getElementById("mySelect").value;
    document.getElementById("demo").innerHTML = "You selected: " + x;
    if (x == "product") {
        MktoForms2.loadForm("//app-e.marketo.com", "*uniquenumber", *uniquenumber);
    }
    else if (x == "support") {
        MktoForms2.loadForm("//app-e.marketo.com", "*uniquenumber2", *uniquenumber2);
    }
}
</script>

<form id="mktoForm_*uniquenumber1"></form>
<form id="mktoForm_*uniquenumber2"></form>

Answer 1

I recommend the following:

1. Implement a way to check if a Marketo form has loaded. For example:

   //Checks for element that matches "mktoForm_". If match, variable returns id of element. If no match, variable returns undefined. 
   var y = document.querySelector('[id^=mktoForm_]').id;
   

2. Implement a way to remove the Marketo form. For example:

   //jQuery implementation to remove form element
   $( "form" ).remove();
   

3. Implement conditional logic to determine current state. For example:

   if (x == "product" && y === undefined) {
       MktoForms2.loadForm("//app-e.marketo.com", "*uniquenumber", *uniquenumber);
   }
   else if (x == "product" && y != undefined) {
       //jQuery implementation to remove form element
       $( "form" ).remove();
       MktoForms2.loadForm("//app-e.marketo.com", "*uniquenumber2", *uniquenumber2);
   }
   else if (x == "support" && y === undefined) {
       MktoForms2.loadForm("//app-e.marketo.com", "*uniquenumber2", *uniquenumber2);
   }
   else (x == "support" && y != undefined) {
       //jQuery implementation to remove form element
       $( "form" ).remove();
       MktoForms2.loadForm("//app-e.marketo.com", "*uniquenumber2", *uniquenumber2);
   }
   

Here is a potential implementation:

<script>
function myFunction() {
    var x = document.getElementById("mySelect").value;
    //Checks for element that matches "mktoForm_". If no match, variable returns undefined. 
    var y = document.querySelector('[id^=mktoForm_]').id;
    document.getElementById("demo").innerHTML = "You selected: " + x;

    if (x == "product" && y === undefined) {
        MktoForms2.loadForm("//app-e.marketo.com", "*uniquenumber", *uniquenumber);
    }
    else if (x == "product" && y != undefined) {
        //jQuery implementation to remove form element
        $( "form" ).remove();
        MktoForms2.loadForm("//app-e.marketo.com", "*uniquenumber2", *uniquenumber2);
    }
    else if (x == "support" && y === undefined) {
        MktoForms2.loadForm("//app-e.marketo.com", "*uniquenumber2", *uniquenumber2);
    }
    else (x == "support" && y != undefined) {
        //jQuery implementation to remove form element
        $( "form" ).remove();
        MktoForms2.loadForm("//app-e.marketo.com", "*uniquenumber2", *uniquenumber2);
    }
}
</script>