form1にあるテキスト値をform3のPOSTから値のみ送信したい

Question

        <form method="POST" name="form1" id="form1" autocomplete="off">
            <label>最終回</label><font style="font-size: 36px"><?php echo $oll_number_lastdate[0]['no'];?></font>
            <label>最終No</label><font style="font-size: 36px"><?php echo $oll_number_lastdate[0]['oll'];?></font><br>
            <label>次期回</label>
            <input type="text" class="col-3 display-6 text-center" id="next_no" name="next_no" style="font-size: 16px" value="<?php echo str_pad($oll_number_lastdate[0]['no']+1, 5, '0', STR_PAD_LEFT);;?>"><br>
            <div class="form-group form-row" style="height: 100px;">
                <input type="number" class="col-3 display-6 daycolor1 text-center" id="no1" name="no1" maxlength="1" style="font-size:80px;" placeholder="千" onchange="inputCheck1()">
                <input type="number" class="col-3 display-6 daycolor2 text-center" id="no2" name="no2" maxlength="1" style="font-size:80px;" placeholder="百" onchange="inputCheck2()">
                <input type="number" class="col-3 display-6 daycolor3 text-center" id="no3" name="no3" maxlength="1" style="font-size:80px;" placeholder="十" onchange="inputCheck3()">
                <input type="number" class="col-3 display-6 daycolor4 text-center" id="no4" name="no4" maxlength="1" style="font-size:80px;" placeholder="一" onchange="inputCheck4()">
            </div>
            <div class="col text-center"> 
            <!--<input type="button" class="btn btn-secondary btn-bg" onclick="submit();" id="update_deme" name="update_deme"value="登録">-->
            <button type="button" class="btn btn-secondary btn-bg" id="update_deme"><font style="font-size: 16px">更新</font></button>
            <input type="hidden" name="select_button" value="update_deme">        
            <button type="button" class="btn btn-dark" id="deme_button" data-toggle="modal" data-target="#modal1">登録</button>           
            </div>
        </form>
        <div class="col text-center"> 
        <form method="POST" name="form3" id="form3" autocomplete="off">
            <button type="button" class="btn btn-info btn-bg" id="preview_deme"><font style="font-size: 16px">出目</font></button>
            <input type="hidden" name="select_button" value="preview_deme">
        </form>

form1にあるinput textの値(no1,no2,no3,no4)の値を下のform3のボタン押下時にPOSTで飛ばしたいのですが、うまくいきません。

        <script>
            $(function () {
                $("#deme_button").click( function() {
                    // テキストボックスのデータを取得します
                    var getData1 = String($("#no1").val());
                    var getData2 = String($("#no2").val());
                    var getData3 = String($("#no3").val());
                    var getData4 = String($("#no4").val());
                    var getData5 = String($("#last_no").val());
                    var getData6 = String($("#next_no").val());
                    // 取得データと追記文言をくっつけて出力します
                    $("#R_no1").val( getData1);
                    $("#R_no2").val( getData2);
                    $("#R_no3").val( getData3);
                    $("#R_no4").val( getData4);
                    $("#R_last_no").val( getData5);
                    $("#R_next_no").val( getData6);
                });
            });
        </script>

javascriptでform1の値をモーダルのtextに反映することはできております

                                        <input type="text" class="col-2 display-6 text-center" id="R_no1" name="R_no1" maxlength="1" style="font-size:80px;">
                                        <input type="text" class="col-2 display-6 text-center" id="R_no2" name="R_no2" maxlength="1" style="font-size:80px;">
                                        <input type="text" class="col-2 display-6 text-center" id="R_no3" name="R_no3" maxlength="1" style="font-size:80px;">
                                        <input type="text" class="col-2 display-6 text-center" id="R_no4" name="R_no4" maxlength="1" style="font-size:80px;">

が、form3については、わざわざinputtextを作成して飛ばさず、値のみ取得して飛ばすことはできないでしょうか

POSTについては下記のjavascriptから飛ばしております

        <script>     
        var btn = document.getElementById('preview_deme');
        btn.addEventListener('click', function() {
            var result = window.confirm('出目を表示しますか？');
            if( result ) {           
            document.form3.submit();
                console.log('実行しております…');
            }
            else {
                return false;
                console.log('キャンセルします…');              
            }
        })
        </script>

ご教授のほど宜しくお願いいたします

Answer 1

<script>
document.addEventListener('formdata', e=>{
  let n;
  if(e.target.id && (n=document.querySelectorAll(`[data-${e.target.id}]`))){
    [...n].forEach(x=>{
      e.formData.append(x.name,x.value);
    });
  }
});
</script>
<form id="f1">
<input name="a" value="1" data-f2 data-f3>
<input name="b" value="2" data-f2>
<input name="c" value="3" data-f3>
</form>
<form id="f2">
<input name="d" value="4">
<input type="submit" value="send">
</form>
<form id="f3">
<input name="e" value="5">
<input type="submit" value="send">
</form>

Comments

[kou___chan]

yambejp　様
返信ありがとうごさいます。
理解するのに時間が掛かってしまいましたが何とかpost送信が出来ました。
ありがとうございました。