いちばん失敗した人決定戦

おしえて

フォーム名を付けないでsubmitすることは可能でしょうか？

解決済

  • 質問者：hatsuzo
  • 質問日時：
  • 回答数：3件

お世話になります。

Formの中でボタンを使わずに、<a href=...> を使って、POSTしたいのですが、
ネット上で、こうすれば出来るという回答が何件も出ています。
<form action="input.html" method="post" name="F1">
<input type="text" size="10" />
<a href="javascript:document.F1.submit()"><img src="btn.png"></a>
</form>

これがDBの検索結果の行数分、table上で発生するため、
name="F1"の値をユニークにしなければならないので困っています。
phpであれば、nameの値を変数にするとかも簡単に出来ると思うのですが、
Javascriptのフレームワーク上で動作する環境なので、他の方法でなんとかしなければなりません。

ボタンをCSSで変更して、img以下の画像に置き換える方法も考えましたが、フレームワークで使用しているアイコンのパスが簡単に参照できないので諦めました。

nameを使わずに、リンクを貼る書き方がもし有りましたら、教えて頂けないでしょうか？
よろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (3件)

No.3ベストアンサー

  • 回答者： Ogre7077
  • 回答日時：

少々汎用的に、特定ハッシュ(#submit)のリンクでボタンの代用する書き方



<script>
document.addEventListener('click', function(ev){
_ var C = function(e,n){ while(e && e.tagName!=n) e=e.parentNode; return e }; // 先祖をたどる処理
_ var anchor = C(ev.target, 'A');
_ if (!anchor) return; // クリック対象(の先祖)が <a> なら処理対象
_ var cmd = anchor.getAttribute('href');
_ if (cmd == '#submit') {
_ _ ev.preventDefault();
_ _ var form = C(anchor, 'FORM');
_ _ if (form) form.submit(); // <a> の先祖が <form> なら送信
_ }
}, false);
</script>

<form action="input.html"><input name=q type=text><a href="#submit"><img src="送信.png"></a></form>
<form action="input.html"><input name=q type=text><a href="#submit"><img src="送信.png"></a></form>
<form action="input.html"><input name=q type=text><a href="#submit">テキストリンクで送信</a></form>
<form action="input.html"><input name=q type=text><a href="#submit">テキストリンクで送信</a></form>
    • good
    • 0
    • 件
通報する
この回答へのお礼

Ogre7077さん　コメント有難うございました。

私の力量では、jqueryのコードが完全に理解できていませんが、動作しました。
きちんと各行とも別々の値を渡してsubmitされています。
素晴らしいですね。

大変助かりました。どうも有難うございます。<(_ _)>

通報する
お礼日時：2018/07/07 15:57

No.2

  • 回答者： yambejp
  • 回答日時：

sbumitはaからの相対位置さえ理解すればできますが、


inputにnameがなければ送られませんよ

<form action="input.html" method="post">
<input type="text" name="hoge" size="10" />
<a href="#" onclick="this.parentNode.submit()"><img src="btn.png"></a>
</form>
    • good
    • 0
    • 件
通報する
この回答へのお礼

yambejpさん　コメント有難うございました。
inputタグのnameはとりあえず同じ名前で付けてみたのですが、駄目でした。
フレームワーク上での動作のせいなのか、リンク先が特定できずトップページに飛んでしまいます。これをユニークにしなければならないとしたらformのnameと同じことになりますので、現在の環境下では残念ながら使えないようです。

どうもお手数をお掛けしました。<(_ _)>

通報する
お礼日時：2018/07/07 15:54

参考程度に

No.1

  • 回答者： fujillin
  • 回答日時：

こんにちは



複数の似たようなフォームが存在して、nameを利用せずに「ボタンを押したらそのフォームをサブミット」したいということですよね？

以下のような方法で実現できると思いますが、ご提示のようにinput要素にname属性がないと値が送られない可能性があると思いますけれど・・・

※ ボタンを包含するリンク要素は必要ないので省略しました。（あっても構いません）
※ class="submit_button"の設定がある画像要素をクリックすると、その祖先要素のフォームをサブミットします。

<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>

<style type="text/css">
img.submit_button { cursor: pointer; }
</style>

<script type="text/javascript">
document.addEventListener("click", function(e){
var t = e.target;
if(t.nodeName != "IMG" || !t.classList.contains("submit_button")) return;
while(t && t.nodeName != "FORM") t = t.parentNode;
if(t) t.submit();
}, false);
</script>
</head>
<body>

<form action="input.html" method="POST">
<input type="text" size="10" />
<img src="btn.png" class="submit_button" />
</form>

<form action="input.html" method="POST">
<input type="text" size="10" />
<img src="btn.png" class="submit_button" />
</form>

</body>
</html>
    • good
    • 0
    • 件
通報する
この回答へのお礼

fujillinさん　コメント有難うございました。
inputタグのnameはとりあえず同じ名前で付けてみたのですが、駄目でした。
これをユニークにしなければならないとしたらformのnameと同じことになりますので、現在の環境下では残念ながら使えません。

どうもお手数をお掛けしました。<(_ _)>

通報する
お礼日時：2018/07/07 15:53

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報