JavaScriptによる画像クリックでのフォーム送信について

Question

Marketo（https://jp.marketo.com/）を使用しております。

デベロッパー向けDocumentationにあった例（http://developers.marketo.com/rest-api/assets/forms/examples/
の５番目の例）を元にし、フォーム外の画像クリックでフォーム送信することができました。

しかし、同一ページ内に二つのフォームを設置した場合、個別にフォーム送信することができず、両方が同時に送信されてしまいます。

対応する画像のクリックで、個別にフォーム送信させることは可能でしょうか？

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のみで解決できる問題だったようです。
アドバイスいただいた皆さま本当にありがとうございました。

Answer 1

submitボタンにidを振ってlabelで処理してはいけないのでしょうか？

<label for="s1"><img src="image-1.jpg" id='MyAlternativeSubmitButtonId01'></label>
<label for="s2"><img src="image-2.jpg" id='MyAlternativeSubmitButtonId02'></label>
<form>
<input type="text" name="a" value="1">
<input type="submit" value="go" id="s1" style="display:none">
</form>
<form>
<input type="text" name="b" value="2">
<input type="submit" value="go" id="s2" style="display:none">
</form>

Comments

[lnk]

ご回答ありがとうございます。

MarketoのMktoForm2.loadForm(略)という埋め込みコードで作成したフォームで、（私には）submitボタンへidを振る方法がわかりませんでした。

こちらのlableの方法も色々と検証してみます。

[lnk]

間が空いてしまいましたが、こちらの方法で解決できました。ありがとうございました。

Answer 2

ひとつ試してもらいたいのですが、MktoForms2とbtnは別々の情報を入れるにも関わらず同じ変数を使いまわしています。
別の変数名をつけるとどうなりますか？
※MktoForms2も別々の変数で受けて利用するような感じです。

私見：
MktoForms2で2つのフォームを呼んでいるのでMktoForms2には2つのフォームの情報がそのまま入っていてsubmitを行っているので両方送信されるのでは、という仮説です。
別々の変数で受けてしまえば個別に処理が出来るはず・・・

コメントを受けてのサンプルコード

※コードの可読性を上げるため、変数宣言と実際の処理をわけています

//フォームAとボタンA
var formA = MktoForms2.loadForm("//app-sjst.marketo.com", "785-UHP-775", 1057);
var btnA = document.getElementById("MyAlternativeSubmitButtonId01");

//フォームBとボタンB
var formB =  MktoForms2.loadForm("//app-sjst.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();
    });
};

または、いっそのことボタン押下時のfunction()内に入れてしまう。

var btnA = document.getElementById("MyAlternativeSubmitButtonId01");
var btnB = document.getElementById("MyAlternativeSubmitButtonId02");

btnA.onclick = function() {
    MktoForms2.loadForm("//app-sjst.marketo.com", "785-UHP-775", 1057);
    MktoForms2.whenReady(function (form) {
        form.submit();
    });
};
btnB.onclick = function() {
    MktoForms2.loadForm("//app-sjst.marketo.com", "785-UHP-775", 1058);
    MktoForms2.whenReady(function (form) {
        form.submit();
    });
};

Comments

[lnk]

ご回答ありがとうございます。

それぞれ
var btnA = (略)
var btnB = (略)

とし、

btnA.onclick = (略)
btnB.onclick = (略)

と書き分けてみたのですがやはり両方動いてしまうようです。（そもそもご提案いただいた意図に合致しているのか不安です…）

注釈にあった「MktoForms2も別々の変数で受けて利用する」という部分をどのようにすればよいのか理解できておりません。

[m.ts10806]

それで合ってますよ。ただ、やはりフォーム側の方に調整が必要そうです。
ざっくりサンプルコードを書きました。ただし未検証のため何かしらエラーが出るかもしれませんが・・・
イメージだけでも伝わればと思います。
2つ目のほうは同じような結果が得られそうなコードの提案です。試してみて同じ成果が得られればお好きな方をご採用ください。

[lnk]

サンプルコードのご提示ありがとうございます。
大変ありがたいです。

検証の結果ですが、2つ目のものはフォーム送信自体が動かず、
1つ目のものは動くのですが、やはり2つのフォームが同時送信されてしまいました。

JavaScriptがわからないなりの考えなのですが、

MktoForms2.whenReady(function (form) {
form.submit();

この部分で対象となるフォームだけを動かすことができないかと考えております。
もっと色々と調べてみます。

[m.ts10806]

※2番目のサンプルが一部誤りがあったため修正しました。

結果が変わるとは言えませんが念のための確認です。
画像ではなくbuttonなどにすると結果は同じですか？

[lnk]

サンプルコード1つ目のもので、imgをbuttonに置き換えてみましたが、やはり2つのフォームが動いてしまいました。

[lnk]

↑「2番目のサンプル」という部分を見落としていました。2番目の方を再検証します。

[m.ts10806]

ちょっとミスってたところを解説すると、
どっちもボタンBクリックイベントになってたのでボタンA押しても反応しなくて、ボタンBを押したときに両方動いてたはずです（本当に凡ミスごめんなさい）

[lnk]

修正後の2番目のサンプルで、imgもbuttonに変更し試してみましたがフォーム自体が動きませんでした。

[m.ts10806]

ただ、1つ目も同じような効果が得られるはずなのですが、それでも両方送信されていたというのは分かりませんね。。。

[m.ts10806]

念のため、現在試してみているソースを質問内容に追記いただけますか？

[m.ts10806]

<form>タグが関係しているんじゃないかなとか思ったりしてますので、HTMLもなるべく全て追記いただけると助かります。

[lnk]

例えばですが、下記のようなことは可能でしょうか？

1.Aの画像（ボタン）をクリック
2.Bのフォーム（としての機能）を削除（一時停止？）
3.フォームのsubmit
4.Bのフォーム（としての機能）を復活させる

発想はあるのですが、方法は検討がつきません...。

[lnk]

<form>タグ自体を使用しておりません。
HTMLは投稿の最初に示した通りimgのみで、あとはmarketoがらみのスクリプトのみです。

[m.ts10806]

<form>のsubmitを感知してreturn falseとかを入れること「submitさせない」というのは可能ですが、<form>の組み方によると思います。
簡易例：
<form id="test">
<input type="submit" value="send" onclick="return send();">
</form>
<script>
function send(){
return false;
}
</script>

[m.ts10806]

ん。そうなんですね。ご提示のデベロッパーページのVIEW SAMPLEでは必ず
<form id="mktoForm_1057"></form>のようにIDを振った<form>があったので記載があるものだと思っていました。

[lnk]

確かに、VIEW SAMPLEのソースを見ると<form id="mktoForm_1057"></form>があるのですが、exampleページのコード例では記述が無かったことと、<form ~ >が無くても動くことが確認できたので記述無しで検証しておりました。

[m.ts10806]

<form>を置いていないことでフォームが特定できず、デフォルトで送信している可能性がありますね。
<form id="mktoForm_1057"></form>
<form id="mktoForm_1058"></form>

をHTMLに追加してみましょう。

[lnk]

<form>を追加してみましたが２つとも送信されてしまいました。

[m.ts10806]

んー、現段階のソースを追記いただけますか？あと、送信時にエラーが出てないかも念のためご確認ください。

[lnk]

（こちらのコメントは質問内容に移動しました）

[lnk]

今回、フォームやサブミットボタンを見せずにフォーム送信するという意図でフォーム外画像でのサブミットでしたので、<form>はdisplay: noneで非表示にしております。

余談ですが、フォームを表示させ、本来のサブミットボタンを使用すれば、1つずつのフォーム送信は可能です。

[m.ts10806]

お手数ですが、質問内容に追記してもらえたら・・・コメントではマークダウンが使えませんし、他の回答者の目に留まりにくくなりますので

[m.ts10806]

formIDの後ろ側の「”」が全角になっていますが転記ミスでしょうか？

submitボタンで送信できるのであれば画像を適用してIDをボタンに与えると良いと思います。
　<button id='MyAlternativeSubmitButtonId01’>
　<img src="image-1.jpg">
　</button>
ボタンぽさ消すためにはbuttonに対してCSSで少し調整してやる必要はありますが。

[m.ts10806]

ちょこちょこ「’」や「"」などが全角になっているのも気になります。転記ミスなのであればいいのですが、そうでなければ正しく動かない可能性があるので、一通り修正してみてください。

[lnk]

間が空いてしまいましたが、この件を解決することができました。たくさんのアドバイスをいただきありがとうございました。