(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力がまだまだ不足。