jqueryのセレクタでsubmit()が送信できない

質問内容↓

https://teratail.com/questions/8w2mmh6a50024e

要は、JSのsubmitとjQueryのsubmitは違うということ。

送信可能

index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        function send(formname){
            // js
            document.getElementById(formname).submit();
            // jquery
            // $('#'+formname).submit();
        }
        $(function(){
            $('#open').on('click',function(){
                $('.modal').show();
            });
            $('.modal').on('click', function(){
                $('.modal').hide();
            });
        });
    </script>
</head>
<body>
    
    <form action="*" method="post" id="form" onsubmit="return false;">
        <input type="text" name="input1" value="1">
        <input type="text" name="input2" value="2">
        <input type="button" value="open" id="open">
    </form>

    <div class="modal" style="display: none;">
        <input type="button" onclick="send('form')" value="send">
    </div>
</body>
</html>

jqueryの場合、送信不可

~~~~省略~~~~~
    <script>
        function send(formname){
            // js
            // document.getElementById(formname).submit();
            // jquery
            $('#'+formname).submit();
        }
        $(function(){
            $('#open').on('click',function(){
                $('.modal').show();
            });
            $('.modal').on('click', function(){
                $('.modal').hide();
            });
        });
    </script>
</head>
<body>
    
    <form action="*" method="post" id="form" onsubmit="return false;">
        <input type="text" name="input1" value="1">
        <input type="text" name="input2" value="2">
        <input type="button" value="open" id="open">
    </form>

    <div class="modal" style="display: none;">
        <input type="button" onclick="send('form')" value="send">
    </div>
</body>
</html>

return falseを外せば、jqueryでも送信可能

~~~~省略~~~~~
    <script>
        function send(formname){
            // js
            // document.getElementById(formname).submit();
            // jquery
            $('#'+formname).submit();
        }
        $(function(){
            $('#open').on('click',function(){
                $('.modal').show();
            });
            $('.modal').on('click', function(){
                $('.modal').hide();
            });
        });
    </script>
</head>
<body>
    
    <!-- <form action="*" method="post" id="form" onsubmit="return false;"> -->
    <form action="*" method="post" id="form" >
        <input type="text" name="input1" value="1">
        <input type="text" name="input2" value="2">
        <input type="button" value="open" id="open">
    </form>

    <div class="modal" style="display: none;">
        <input type="button" onclick="send('form')" value="send">
    </div>
</body>
</html>

jqueryはonsubmitイベントを通るが、jsは通らないため、return falseをいれると、jqueryではsubmitできない。