Как избежать загрузки форм друг на друга, используя OnChange и Marketo

Question

У меня есть выпадающий список с функцией "onchange" для загрузки формы Marketo на основе пользовательского ввода. Формы загружаются правильно, за исключением того, что когда пользователь изначально выбирает "нужен новый продукт", а затем переключается на "нужна поддержка" (или наоборот), "форма продукта" не исчезает. Вместо этого "форма продукта" остается, и форма "нужна поддержка" загружается дополнительно (ниже формы продукта). Пользователь может переключаться / переворачиваться несколько раз, что приводит к множеству дополнительных форм, что является проблемой!

Мне нужна помощь в настройке кода, чтобы всегда загружалась только одна форма, и чтобы предыдущие формы, выбранные пользователем, больше не существовали, когда пользователь переворачивал флип-флоп. Любая помощь?? Спасибо!

<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

Я рекомендую следующее:

1. Реализуйте способ проверить, загружена ли форма Marketo. Например:

   //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. Реализуйте способ удаления формы Marketo. Например:

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

3. Реализуйте условную логику для определения текущего состояния. Например:

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