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

I have HTML form with submit button inside. Inside the form there are piece of HTML code which popups in modal window when filling up the form. Inside this modal are one more input and submit button. And it does not work, the form doesn't send to email. But when I move entire button HTML code right before </form> then submit button works. Here is a code:

<form name="autoForm" id="contact-form"  method="post" action="php/send.php">
  <div >
    <label id="address-label" for="place">* Markė | modelis | metai | TA | miestas</label>
    <input id="form_place" type="text" name="place"  data-error="Laukas privalomas" >
    <div ></div>
  </div>
  <div >
    <label for="message">Automobilio būklė</label>
    <textarea id="form_message" name="message"  rows="4" data-error="Prašau, parašykite daugiau apie NT" 
    placeholder="Čia galite parašyti daugiau informacijos apie automobilio būklę"></textarea>
    <div ></div>
  </div>
    <div >
    <a  id="to-modal-form"><font size="4">Sužinoti kainą</font></a>
  </div>
  
  <div id="modal-background" >
    <div id="modal-form" >
      <a id="modal-close"><i  data-v-27b8b94e=""></i></a>
      <div >
        <h2>Gaukite kainos pasiūlymus tiesiai į savo telefoną.</h2>
        <p>Įveskite telefono numerį ir gaukite pasiūlymo nuorodą <b>SMS</b></p>
      </div>
      <div >
      <div >
        <label  for="phone">* Jūsų telefono numeris</label>
        <input id="form_phone" type="phone" name="phone"  required="required" data-error="Laukas privalomas">
        <div ></div>
      </div>
      <input type="hidden" name="code" value="" id="code" />
      <button  type="submit" id="form_submit"><font size="4">Tęsti</font></button>
      <span >Sutinku su <a href="">privatumo politika</a></span>
    </div>
  </div>
</form>

Filling up first inputs there are first button <a id="to-modal-form"><font size="4">Sužinoti kainą</font></a> which is opening the modal windows. Inside after filling up additional input I press <button type="submit" id="form_submit"><font size="4">Tęsti</font></button> which doesn't work. But form work when button is moved before </form>. Form sends all values - inside and out of modal window. Can't get what is wrong.

CodePudding user response：

If you have button outside </form> it would not work the solution is using form="" parameter to the button it basically tell this button belong to this specific form element

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

CodePudding user response：

Your submit button will confused which form that it should submitted if you place it outside the form tag.

You could use javascript to submit the form. https://www.javascript-coder.com/javascript-form/javascript-form-submit/

Put a button inside your modal with onclick="submitForm('contact-form');", then add below js code

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

CodePudding user response：

Solved this by adding submit button before with attribute hidden:

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

  <button  type="submit" id="form_submit"  hidden></button>
</form>

And that button inside of modal window made as trigger with attribute onclick="submitForm();" like this:

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

In JS it triggers submit button using .click() method:

const submitBtn = document.getElementById('form_submit');

function submitForm() {
  submitBtn.click();
}