formタグを入れ子にする

Webサイト作成 TIPS

formタグを入れ子にする

HTMLの

タグですが、入れ子(ネスト)にすることは結論から言うとできません。
たとえば、下記のように

 <form action="a.php">
  <input name="branch" value="natto">
    <form action="b.php">
     <input name="lunch" value="steak">
     <input type="submit" name="submit" value="昼食を送信">
    </form>
 <input type="submit" name="submit" value="朝食と昼食を送信">
 </form>

というようには作れません。
いかにも作れそうですけどね。
Aボタンをクリックしても動作しなくなります。

さて、そんな時はどうするかというと、Javascriptを利用します。

渡したい値がlunch=”steak”だとします。
HTMLで書くと

 <input name="lunch" value="steak">

ですね。

上記のHTMLを書き換えます。

 <form action="a.php">
  <input name="branch" value="natto">
  <input name="lunch" value="steak">
  <input type="button" onClick="func1(this.form)" value="昼食を送信">
  <input type="submit" name="submit" value="朝食と昼食を送信">
 </form>
 
 //送信に利用するform
 <form action="b.php" name="form1">
     <input type="hidden" name="lunch">
 </form>
 
 //送信に利用するJavascript
  <script language="JavaScript" type="text/javascript">
  <!--
   function func1($value){
      alert("送信してよろしいでしょうか?");
      document.form1.steak.value = form.lunch.value;
      document.form1.submit();
   }
   //-->
  </script>

Javascriptを利用して、「昼食を送信」というボタンがクリックされたら、Javascriptでform1というフォームで送信させる、という仕組みです。

参考
http://okwave.jp/qa/q545699.html

  • function func1(value){変数に$マークは不要では?まだテストしてませんが。 — デジタル太郎 {2014-10-20 (月) 15:13:06}
  • ご指摘の通りですね、有難うございました。修正します。 — 管理者 {2014-10-22 (水) 19:04:37}
  • 入れ子の話だったのに、最後の例で急に入れ子じゃなくなるのは、おかしくないですかね。。。 — {2017-04-09 (日) 17:12:31}
  • brunch — brunch {2017-07-24 (月) 12:05:10}

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です