当提交按钮位于模式窗口中时，表单不起作用

Question

我有一个HTML表单，里面有提交按钮。表单中有一段HTML代码，当填充表单时会在模式窗口中弹出。在这个模式中还有一个输入和提交按钮。它不起作用，表单无法发送到电子邮件。但当我将整个按钮HTML代码移到</form>之前时，提交按钮就可以工作了。这是一个代码：

<form name="autoForm" id="contact-form" class="row" method="post" action="php/send.php">
<div class="form-group col-md-6">
<label id="address-label" for="place">* Markė | modelis | metai | TA | miestas</label>
<input id="form_place" type="text" name="place" class="form-control" data-error="Laukas privalomas" >
<div class="help-block with-errors"></div>
</div>
<div class="form-group col-md-12">
<label for="message">Automobilio būklė</label>
<textarea id="form_message" name="message" class="form-control h-auto" rows="4" data-error="Prašau, parašykite daugiau apie NT" 
placeholder="Čia galite parašyti daugiau informacijos apie automobilio būklę"></textarea>
<div class="help-block with-errors"></div>
</div>
<div class="submit-container col mt-5">
<a class="btn btn-primary" id="to-modal-form"><font size="4">Sužinoti kainą</font></a>
</div>

<div id="modal-background" class="modal-background container-hidden">
<div id="modal-form" class="modal-form">
<a id="modal-close"><i class="icon-close" data-v-27b8b94e=""></i></a>
<div class="form-header">
<h2>Gaukite kainos pasiūlymus tiesiai į savo telefoną.</h2>
<p>Įveskite telefono numerį ir gaukite pasiūlymo nuorodą <b>SMS</b></p>
</div>
<div class="form-body">
<div class="form-group col-md-6">
<label class="phone" for="phone">* Jūsų telefono numeris</label>
<input id="form_phone" type="phone" name="phone" class="form-control" required="required" data-error="Laukas privalomas">
<div class="help-block with-errors"></div>
</div>
<input type="hidden" name="code" value="" id="code" />
<button class="btn btn-primary" type="submit" id="form_submit"><font size="4">Tęsti</font></button>
<span class="privacy">Sutinku su <a href="">privatumo politika</a></span>
</div>
</div>
</form>

填充第一个输入的是打开模式窗口的第一个按钮<a class="btn btn-primary" id="to-modal-form"><font size="4">Sužinoti kainą</font></a>。在填充完额外的输入后，我在里面按<button class="btn btn-primary" type="submit" id="form_submit"><font size="4">Tęsti</font></button>，这不起作用。但当按钮移动到</form>之前时，表单工作。窗体发送模式窗口内外的所有值。不知道哪里出了问题。

Answer 1

如果你在</form>之外有按钮，它将不起作用，解决方案是对button使用form=""参数，它基本上告诉这个button属于这个特定的form元素

<button class="btn btn-primary" form="contact-form" type="submit" id="form_submit"><font size="4">Tęsti</font></button>

Answer 2

如果您将提交按钮放置在表单标记之外，它将混淆应该提交的表单。

您可以使用javascript提交表单。https://www.javascript-coder.com/javascript-form/javascript-form-submit/

用onclick="submitForm('contact-form');"在你的模态中放一个按钮，然后在下面添加js代码

function submitForm(id) {
document.getElementById(id).submit();
}

Answer 3

通过在具有属性hidden:之前添加提交按钮来解决此问题

<form>
<!-- the form content -->
<button class="btn btn-primary" type="submit" id="form_submit"  hidden></button>
</form>

模式窗口内的按钮作为属性为onclick="submitForm();"的触发器，如下所示：

<button class="btn btn-primary" onclick="submitForm();"><font size="4">Tęsti</font></button>

在JS中，它使用.click()方法触发提交按钮：

const submitBtn = document.getElementById('form_submit');
function submitForm() {
submitBtn.click();
}