通过JavaScript提交表单错误(.submit())

Question

我的页面上有以下模态窗口:

<!-- Modal -->
<div class="modal fade" id="BillsReceive" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-fullscreen">
<div class="modal-content ">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Register new product</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<?php 

include 'BillsReceive.php';

?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button id="submit-add-article-form" title="New Register" class="btn btn-success" onclick="fncSendForm();"> <i class="fa fa-plus">  </i>Save Changes</button>
</div>
</div>
</div>
</div>

模态窗口有一个包含，它包含一个带有"注册表单"的页面。应收帐款。"billsreceive .php"上的表单页面如下:

<form action="../I_MVC/Controller/Registrations/InsertBillsReceive.php" method="post" enctype="multipart/form-data" id="BillsReceive" name="BillsReceive" >
<div class="container">
<br/>
<div class="row">
<div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 col-xxl-1"></div>
<div class="col-10 col-sm-10 col-md-10 col-lg-10 col-xl-10 col-xxl-10"> Code:</div>
<div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 col-xxl-1"></div>
</div>

<div class="row">
<div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 col-xxl-1"></div>
<div class="col-10 col-sm-10 col-md-10 col-lg-10 col-xl-10 col-xxl-10"> <input class="form-control" type="text" placeholder="Default input" aria-label="default input example" name="Code"> </div>
<div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 col-xxl-1"></div>
</div>

<br/>
<div class="row">
<div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 col-xxl-1"></div>
<div class="col-10 col-sm-10 col-md-10 col-lg-10 col-xl-10 col-xxl-10"> Usual Name:</div>
<div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 col-xxl-1"></div>
</div>

<div class="row">
<div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 col-xxl-1"></div>
<div class="col-10 col-sm-10 col-md-10 col-lg-10 col-xl-10 col-xxl-10"> <input class="form-control" type="text" placeholder="Default input" aria-label="default input example" name="UsualName"> </div>
<div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 col-xxl-1"></div>
</div>

<br/>

<div class="row">
<div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 col-xxl-1"></div>
<div class="col-10 col-sm-10 col-md-10 col-lg-10 col-xl-10 col-xxl-10"> Type:</div>
<div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 col-xxl-1"></div>
</div>

<div class="row">
<div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 col-xxl-1"></div>
<div class="col-10 col-sm-10 col-md-10 col-lg-10 col-xl-10 col-xxl-10"> <input class="form-control" type="text" placeholder="Default input" aria-label="default input example" name="Type"> </div>
<div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 col-xxl-1"></div>
</div>

<br/>
</div>
</form>

那么，"保存更改"按钮调用一个JavaScript函数来发送页面的表单。下面是提交表单的javascript函数:

function fncSendForm()
{

document.getElementById("BillsReceive").submit();

}

但是在javascript中调用该函数时，会出现以下错误:

Uncaught TypeError: document.getElementById(…)。提交不是函数

at fncSendForm (VM34 InsertBillsReceive.js:10)
at HTMLButtonElement.onclick (VM41 ShowBills.php:1113) fncSendForm @ InsertBillsReceive.js:10 onclick @ VM41 ShowBills.php:1113

为什么submit函数不提交表单?该功能是正确的，文件链接在模态窗口页面。为什么这个函数不起作用?

Answer 1

我相信你的部分代码加载顺序不对，或者它们可能不在正确的文件中。

你的js函数应该在表单创建后加载-最好的是最后!

当把它塞进一个文件时，你的代码可以正常工作…

这个工作(注意:我改变了这个例子的动作):

<form action="./show.php" method="post" enctype="multipart/form-data" id="BillsReceive" name="BillsReceive" >
<div class="container">
<br/>
<div class="row">
<div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 col-xxl-1"></div>
<div class="col-10 col-sm-10 col-md-10 col-lg-10 col-xl-10 col-xxl-10"> Code:</div>
<div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 col-xxl-1"></div>
</div>
<div class="row">
<div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 col-xxl-1"></div>
<div class="col-10 col-sm-10 col-md-10 col-lg-10 col-xl-10 col-xxl-10"> <input class="form-control" type="text" placeholder="Default input" aria-label="default input example" name="Code"> </div>
<div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 col-xxl-1"></div>
</div>
<br/>
<div class="row">
<div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 col-xxl-1"></div>
<div class="col-10 col-sm-10 col-md-10 col-lg-10 col-xl-10 col-xxl-10"> Usual Name:</div>
<div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 col-xxl-1"></div>
</div>
<div class="row">
<div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 col-xxl-1"></div>
<div class="col-10 col-sm-10 col-md-10 col-lg-10 col-xl-10 col-xxl-10"> <input class="form-control" type="text" placeholder="Default input" aria-label="default input example" name="UsualName"> </div>
<div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 col-xxl-1"></div>
</div>
<br/>
<div class="row">
<div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 col-xxl-1"></div>
<div class="col-10 col-sm-10 col-md-10 col-lg-10 col-xl-10 col-xxl-10"> Type:</div>
<div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 col-xxl-1"></div>
</div>
<div class="row">
<div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 col-xxl-1"></div>
<div class="col-10 col-sm-10 col-md-10 col-lg-10 col-xl-10 col-xxl-10"> <input class="form-control" type="text" placeholder="Default input" aria-label="default input example" name="Type"> </div>
<div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 col-xxl-1"></div>
</div>
<br/>
</div>
</form>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button id="submit-add-article-form" title="New Register" class="btn btn-success" onclick="fncSendForm();"> <i class="fa fa-plus">  </i>Save Changes</button>
</div>

<script>
function fncSendForm()
{
document.getElementById("BillsReceive").submit();
}
</script>

文件show.php:

<?php
echo '<pre>';
print_r($_POST);
echo '<pre>';
print_r($_GET);

show.php输出:

Array
(
[Code] => 3243223
[UsualName] => 43543646
[Type] => 657576657
)
Array
(
)

我敢打赌包含位于错误的地方，没有与其他代码一起运行…