当提交按钮处于模态时表单不起作用 window

Question

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

<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>，它打开模式 windows。在填写完额外的输入后，我在里面按了 <button class="btn btn-primary" type="submit" id="form_submit"><font size="4">Tęsti</font></button> ，但这是行不通的。但是当按钮在 </form> 之前移动时表单工作。表单发送所有值 - 模态内部和外部 window。看不出哪里不对。

Answer 1

如果将提交按钮放在表单标签之外，它会混淆应该提交哪个表单。

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

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

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

Answer 2

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

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

Answer 3

通过在属性 hidden:

之前添加提交按钮解决了这个问题

<form>
  <!-- the form content -->

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

模态 window 中的那个按钮被制作成具有属性 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();
}

当提交按钮处于模态时表单不起作用 window

Form doesn't work when submit button is in the modal window

html

forms