Javascript 如何避免使用OnChange和Marketo将表单彼此重叠加载

我有一个带有“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>

我们能帮忙吗

--请选择原因--
需要新产品吗
需要支持

函数myFunction（）{
var x=document.getElementById（“mySelect”）.value；
document.getElementById（“demo”）.innerHTML=“您选择：”+x；
如果（x=“产品”）{
MktoForms2.loadForm（“//app-e.marketo.com”、“*uniquenumber”、*uniquenumber）；
}
否则，如果（x==“支持”）{
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>

实现一种检查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;

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

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

实现一种删除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;

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

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

实现条件逻辑以确定当前状态。例如：

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

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

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>

函数myFunction（）{
var x=document.getElementById（“mySelect”）.value；
//检查是否有与“mktoForm_2;”匹配的元素。如果不匹配，则变量返回undefined。
var y=document.querySelector（'[id^=mktoForm_]'）.id；
document.getElementById（“demo”）.innerHTML=“您选择：”+x；
如果（x==“产品”&&y==未定义）{
MktoForms2.loadForm（“//app-e.marketo.com”、“*uniquenumber”、*uniquenumber）；
}
else if（x==“产品”&&y！=未定义）{
//删除表单元素的jQuery实现
$（“形式”）.remove（）；
MktoForms2.loadForm（“//app-e.marketo.com”、“*uniquenumber2”、*uniquenumber2”）；
}
else if（x==“支持”&&y==未定义）{
MktoForms2.loadForm（“//app-e.marketo.com”、“*uniquenumber2”、*uniquenumber2”）；
}
else（x==“支持”&&y！=未定义）{
//删除表单元素的jQuery实现
$（“形式”）.remove（）；
MktoForms2.loadForm（“//app-e.marketo.com”、“*uniquenumber2”、*uniquenumber2”）；
}
}