kikeda1104's blog

備忘録・技術に関することを書いています。(webエンジニア)

(JavaScript) form内でformを使う

よくあるECサイトの数量変更の対応で調べていたのですが、おもいのほか時間を取られました。

結論から言えば、formタグの中にformタグを埋め込んでも望んだ動作が得られないです。 form内にaタグを置き、aタグをクリックしたイベントにより外部(aタグのおかれているformの外にある)のformのvalueを 更新してform.submit();してます。 下記、参考程度にお願いします。

<!DOCTYPE html>
<head>
</head>
<body>
<form action="/hoge" method="post">
  <a href="#" id="1" onclick="">更新する</a>
  <input type="text" name="person_name" width="100" height="25"/>
  <input type="text" name="person_age" width="50" height="25"/>
  <submit value="送信する" />
</form>

<form action="huga" method="post" name="update_form">
  <input type="hidden" value="" name="name" />
  <input type="hidden" value="" name="age" />
</form>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
    $("#1").click(function(){
      var name = $("[name=person_name]").val();
      var age = $("[name=person_age"]).val();

      $(".update_form").attr("action","hoge/" + this.id);
      $("[name=name]").val(name);
      $("[name=age"]).val(age);
      $("form[name=update_form"]).submit();
    }
  }
</script>
</body>
</html>

js力がまだまだ不足。