Jquery Multiple forms on a page not been submitted with conditional submit

Question

So, I have multiple forms on a page and I am trying to submit them conditionally using the same button, for some reason, I cannot trigger the submit button. Below is my code.

$("#save_contact").on("click", function () {
    var contact_type = $("#contact_type").val();
    console.log(contact_type);
    if (contact_type == 2) {
        console.log("here");
        $('#supplier_form').submit();
    } else if (contact_type == 3) {


    } else if (contact_type == 4) {



    } else if (contact_type == 5) {



    } else if (contact_type == 1) {


    }

});

This is my form, at the moment I have only created 1 form.

<div id="supplier_div" class="form_to_save">
  <form id="supplier_form" name="supplier_form" action="{{route('save_reception_contacts')}}">
    <hr>
    <h4>Supplier</h4>
    <input type="hidden" name="_token" value="{{csrf_token()}}">
    <div class="row">
      <div class="col-md-4">
        <div class="form-group">
          <label>Company</label>
          <input type="text" name="company" id="company" />
        </div>
      </div>
      <div class="row">
        <div class="col-md-12">
          <div class="form-group">
            <label>Notes</label>
            <textarea name="notes" id="notes"></textarea>
          </div>
        </div>
      </div>
      <input type="hidden" name="contact_type_hidden">
      <input type="hidden" name="user_type_hidden">
  </form>
</div>

<div class="col-md-6">
  <button type="button">Back</button>
  <button type="button" class="save" id="save_contact">Save</button>
</div>

Answer 1

You have unclosed <hr> at

<form id="supplier_form" name="supplier_form" action="{{route('save_reception_contacts')}}">
    <hr>

and an unclosed <div class="row">

<input type="hidden" name="_token" value="{{csrf_token()}}">
    <div class="row">

otherwise I can't see anything wrong with submitting the form, you haven't provided relevant HTML that i could create the snippet.

Answer 2

You are creating a new variable and assigning the value of "contact_type" element. But I can not find this element in the HTML.

I have modified your code:

    <div id="supplier_div" class="form_to_save">
  <form id="supplier_form" name="supplier_form" action="{{route('save_reception_contacts')}}">
    <hr></hr>
    <h4>Supplier</h4>
    <input type="hidden" name="_token" value="{{csrf_token()}}">
    <div class="row">
      <div class="col-md-4">
        <div class="form-group">
          <label>Company</label>
          <input type="text" name="company" id="company" />
        </div>
      </div>

      <div class="col-md-4">
        <div class="form-group">
          <label>contact_type</label>
          <input type="text" name="contact_type" id="contact_type" />
        </div>
      </div>

      <div class="row">
        <div class="col-md-12">
          <div class="form-group">
            <label>Notes</label>
            <textarea name="notes" id="notes"></textarea>
          </div>
        </div>
      </div>
    </div>

    <input type="hidden" name="contact_type_hidden">
    <input type="hidden" name="user_type_hidden">
  </form>
 </div>

<div class="col-md-6">
    <button type="button">Back</button>
    <button type="button" class="save" id="save_contact">Save</button>
</div>

Note that there is now a new input "contact_type". And here is the script, where you will need to uncomment in order to send the form.

    $("#save_contact").on("click", function() {
  var contact_type = $("#contact_type").val();
  if (contact_type == 2) {
    console.log("2");
    //$('#supplier_form').submit();
  } else if (contact_type == 3) {
    console.log("3");
    //$('#supplier_form').submit();
  } else if (contact_type == 4) {
    console.log("4");
    //$('#supplier_form').submit();
  } else if (contact_type == 5) {
    console.log("5");
    //$('#supplier_form').submit();
  } else if (contact_type == 1) {
    console.log("1");
    //$('#supplier_form').submit();
  }

});

I am assuming you want to send the same and only form, not differents one, as it seems to understand from the initial question.