4

ユーザー入力に基づいてMarketoフォームをロードする「onchange」機能を備えたドロップダウンリストがあります。ユーザーが最初に「新しい製品が必要」を選択してから「サポートが必要」に切り替えた場合 (またはその逆) を除いて、フォームは正しく読み込まれます。「製品フォーム」は消えません。代わりに、「製品フォーム」が残り、「サポートが必要」フォームが追加で読み込まれます (製品フォームの下)。ユーザーは何度も切り替え/フリップフロップを行うことができ、問題となる多くの余分なフォームが生成されます!

常に 1 つのフォームのみが読み込まれ、ユーザーがフリップフロップしたときにユーザーが選択した以前のフォームが存在しないように、コードを微調整するのに助けが必要です。何か助けて?? ありがとう！

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

1 に答える 1

3

次のことをお勧めします。

  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>
于 2014-11-04T00:22:31.263 に答える