Jquery页面上的多个表单未通过条件提交提交答案

【问题标题】：Jquery Multiple forms on a page not been submitted with conditional submitJquery页面上的多个表单未通过条件提交提交
【发布时间】：2017-11-29 08:04:01
【问题描述】：

所以，我在一个页面上有多个表单，我试图使用同一个按钮有条件地提交它们，由于某种原因，我无法触发提交按钮。下面是我的代码。

$("#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) {


    }

});

这是我的表单，目前我只创建了一个表单。

<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>

【问题讨论】：

只提供了一个表单，也没有按钮，用于提交的表单。创建sn-p
感谢@MuhammadOmerAslam，正如我提到的，只创建了一个表单，我还将编辑和放置按钮，但问题是我可以在点击时触发。

标签： php jquery forms laravel-5.4

【解决方案1】：

您在

处未关闭 <hr>

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

还有一个未关闭的<div class="row">

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

否则我看不出提交表单有什么问题，你没有提供相关的HTML 我可以创建sn-p。

【讨论】：

【解决方案2】：

您正在创建一个新变量并分配“contact_type”元素的值。但是我在 HTML 中找不到这个元素。

我修改了你的代码：

    <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>

请注意，现在有一个新输入“contact_type”。这是脚本，您需要取消注释才能发送表单。

    $("#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();
  }

});

我假设您想发送相同且唯一的表格，而不是不同的表格，正如它似乎从最初的问题中所理解的那样。

【讨论】：