Marketo(https://jp.marketo.com/)を使用しております。
デベロッパー向けDocumentationにあった例(http://developers.marketo.com/rest-api/assets/forms/examples/
の5番目の例)を元にし、フォーム外の画像クリックでフォーム送信することができました。
しかし、同一ページ内に二つのフォームを設置した場合、個別にフォーム送信することができず、両方が同時に送信されてしまいます。
対応する画像のクリックで、個別にフォーム送信させることは可能でしょうか?
Marketo特有のForms2.0 APIというものが絡んでくる点が少々ややこしいかと思いますが、どなたか解決方法をご提案いただければ幸いです。
よろしくお願いいたします。
<p><img src="image-1.jpg" id='MyAlternativeSubmitButtonId01'></p> <p><img src="image-2.jpg" id='MyAlternativeSubmitButtonId02'></p> <script> // Load the form normally MktoForms2.loadForm("//app-sjst.marketo.com", "785-UHP-775", 1057); // Find the button element that you want to attach the event to var btn = document.getElementById("MyAlternativeSubmitButtonId01"); btn.onclick = function() { // When the button is clicked, get the form object and submit it MktoForms2.whenReady(function (form) { form.submit(); }); }; </script> <script> // Load the form normally MktoForms2.loadForm("//app-sjst.marketo.com", "785-UHP-775", 1058); // Find the button element that you want to attach the event to var btn = document.getElementById("MyAlternativeSubmitButtonId02"); btn.onclick = function() { // When the button is clicked, get the form object and submit it MktoForms2.whenReady(function (form) { form.submit(); }); }; </script>
ご提案いただいたコードをもとにした現状のコード(全角修正)
<p><img src="image-1.jpg" id="MyAlternativeSubmitButtonId01"></p> <p><img src="image-2.jpg" id="MyAlternativeSubmitButtonId02"></p> <form id="mktoForm_1057" style="display: none"></form> <form id="mktoForm_1058" style="display: none"></form> <script src="//app-sjst.marketo.com/js/forms2/js/forms2.js"></script> <script> //フォームAとボタンA var formA = MktoForms2.loadForm("//app-sjg.marketo.com", "785-UHP-775", 1057); var btnA = document.getElementById("MyAlternativeSubmitButtonId01"); //フォームBとボタンB var formB = MktoForms2.loadForm("//app-sjg.marketo.com", "785-UHP-775", 1058); var btnB = document.getElementById("MyAlternativeSubmitButtonId02"); //ボタンAでフォームA送信 btnA.onclick = function() { formA.whenReady(function (form) { form.submit(); }); }; //ボタンBでフォームB送信 btnB.onclick = function() { formB.whenReady(function (form) { form.submit(); }); }; </script>
labelを用いる方法で解決したコード(2017.6.20 解決)
<p><label for="s1"><img src="image-1.jpg"></label></p> <p><label for="s2"><img src="image-2.jpg"></label></p> <form id="mktoForm_1057" style="display: none"><input type="submit" value="go" id="s1"></form> <form id="mktoForm_1058" style="display: none"><input type="submit" value="go" id="s2"></form> <script src="//app-sjst.marketo.com/js/forms2/js/forms2.js"></script> <script> MktoForms2.loadForm("//app-sjg.marketo.com", "785-UHP-775", 1057); MktoForms2.loadForm("//app-sjg.marketo.com", "785-UHP-775", 1058); </script>
こちらの記述で、フォームを個別に送信できました。
スクリプト部分は、Marketo内で生成される埋め込みコードなので、実質JavaScriptは使わずHTMLのみで解決できる問題だったようです。
アドバイスいただいた皆さま本当にありがとうございました。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/06/13 05:38
2017/06/20 05:45