通过 JavaScript 提交表单时出错 (.submit())答案

【问题标题】：Error submitting form via JavaScript (.submit())通过 JavaScript 提交表单时出错 (.submit())
【发布时间】：2021-09-19 21:47:31
【问题描述】：

我的页面上有以下模式窗口：

<!-- 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中调用函数时，出现如下错误：

未捕获的类型错误：document.getElementById(...).submit 不是功能

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

为什么提交功能没有提交表单？功能正确，文件链接在模态窗口页面。为什么这个功能不起作用？

【问题讨论】：

这个问题似乎与 PHP 无关，因为您说这里唯一的 PHP 包含可以工作。
您的代码应该可以工作，问题在于您的提交按钮与表单本身不在同一个文件中，或者可能在表单之前加载，这可能会导致问题 - 放置一个按钮在表格内部或旁边仅用于测试......它应该可以工作。我没有在表单中看到任何变量，所以除非您发送有问题的字符，否则这是我唯一能想到的。

标签： php html forms bootstrap-modal

【解决方案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>

文件显示.php：

<?php

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

show.php 上的输出：

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

我打赌包含位于错误的位置并且没有与其余代码一起运行...

【讨论】：