[js]formに動的に追加したinputもpostできるという話

そういえばだった。

どういうことか
先に結論
サンプル
なんでこんなことを調べたか

どういうことか

htmlで普通にフォームを作ると<form>内に各種inputとかを書き込む。

<form>内の各種inputとかは、submit時に入力内容を送ることになる。

<form>外に書かれたinputとか、動的に生成されたinputを後付で<form>内に移した場合のsubmit時の動作ってどうなるのよ、という話。

先に結論

大丈夫。

submitを押すタイミングで<form>に入っていたらpostの対象になる。

サンプル

Document

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.3.js?ver=6.7.2" id="jQuery-js" integrity="sha256-nQLuAZGRRcILA+6dMBOvcRh5Pe310sBpanc6+QBmyVM=" crossorigin="anonymous"></script>
<script>
    $(function(){
        $('#input04').appendTo('form');
        $('<input type="text" name="name05" value="name05" id="input05">').appendTo('form');
        $('#changeBtn').on('click',function(){
            if($('form #input04').length){
                $('#input04').insertBefore('form');
                $('#input05').remove();
            }else{
                $('#input04').appendTo('form');
                $('<input type="text" name="name05" value="name05" id="input05">').appendTo('form');
            }
        })
    })
</script>
</head>
<body>
<input type="text" name="name04" value="name04" id="input04">

<form action="https://test.megefeps.info/20250606_form/" method="post">
<input type="text" name="name01" value="name01">
<input type="text" name="name02" value="name02">
<input type="text" name="name03" value="name03">
<button type="button" id="changeBtn">change</button>
<input type="submit" value="enter">
</form>
<hr>
<?php
if($_POST['name01'] !=''){ echo $_POST['name01'];}
if($_POST['name02'] !=''){ echo $_POST['name02'];}
if($_POST['name03'] !=''){ echo $_POST['name03'];}
if($_POST['name04'] !=''){ echo $_POST['name04'];}
if($_POST['name05'] !=''){ echo $_POST['name05'];}
?>
</body>
</html>

「#input04」は<form>外に書かれたもの。
「#input05」はjsで生成したもの。

どっちもjs（jQuery）で、後から<form>に放り込んだ。

よかったですね。

なんでこんなことを調べたか

welcartの会員登録とかのフォームの一部の項目は<table>ベースで勝手に組まれていて、並びを変えたいとか<ul>に変えたいとか、php上で内訳の変更ができない。

だからjsで移そうと思った。

ということで、どこに設置しても大丈夫ですかね、ちゃんと動きますかね、というところをチェックしなきゃいけない。