Как избежать загрузки форм друг над другом с использованием 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>