javascript - 送信前に一連のチェックボックス入力をフォームに追加してから非表示にする

Question

私が作成しているフォームでは、jQuery UI ダイアログを使用して、約 50 のチェック ボックス オプションのリストをユーザーに提供しています。テキスト ボックスは、ダイアログに追加されるとフォームから完全に削除されるため、すべてのチェック ボックスの値がフォームと共に送信されるように、送信前にテキスト ボックスをコピーしてフォームに再挿入する必要があります。問題は、チェックボックスをフォームに再度追加すると、表示されることです。私はそれらを非表示にして、値を送信できるようにしようとしています。

prepend() のようなことをすることが解決策になるのではないかと思ったので、ユーザーは実際にはチェックボックスを表示せず、フォームの一番下にずっとありますが、それでもフォーム要素を押し下げます。#states_container :inputしたがって、フォームに目に見える影響を与えることなく、フォームに追加する手段を探しています。

コード：

    $('#submit_btn').click(function(e){

        $("#form_submission").validate({});

        if ($("#form_submission").valid()) {
            $("#form_submission").append($('#states_container :input').clone());
            $("form#form_submission").submit();
       } else {
            e.preventDefault();
            alert("Please make sure all required information has been provided before submission.")
       }

   });