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

未捕获的类型错误：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

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

标签： phphtmlformsbootstrap-modal

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>

文件显示.php：

<?php

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

show.php 上的输出：

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

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