Question

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

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

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

Answer 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();
  }

});

我假设您要发送相同且唯一的表单，而不是不同的表单，因为它似乎从最初的问题中理解。

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

2 个答案: