質問内容↓
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できない。