Question

我有3个按钮：ADD，SEARCH，IMPORT并且jsp中有三个支柱形式，每个形式执行添加，搜索和导入功能。单击添加按钮时，只显示添加表单，单击搜索按钮时，只显示搜索表单。所有3个表单不应一次显示如何将按钮链接到表单操作

Answer 1

您必须使用jquery和ajax调用来汇总表单。

假设您有三个表格A，B，C，并且最初会显示一个表格。

那么你应该使用jquery show（）和hide（）函数来显示和隐藏相应的表格。

您必须使用ajax调用将操作提交给服务器。

我可以为您提供代码示例。

$(document).ready(function(e) {
  $(".showForm").click(function(e) {
    var form_toshow = $(this).attr("data-form-toshow");

    $("#fomr1").hide();
    $("#fomr2").hide();
    $("#fomr3").hide();
    $("#" + form_toshow).show();
  });

  $("#fomr1form").submit(function(e) {

    //make ajax call to sumit data

    return false;
  });
  $("#fomr2form").submit(function(e) {

    //make ajax call to sumit data
    return false;
  });
  $("#fomr3form").submit(function(e) {

    //make ajax call to sumit data
    return false;
  });

});

#fomr2,
#fomr3 {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="btnshowform1" data-form-toshow="fomr1" class="showForm">
  show form 1
</button>
<button id="btnshowform2" data-form-toshow="fomr2" class="showForm">
  show form 2
</button>
<button id="btnshowform3" data-form-toshow="fomr3" class="showForm">
  show form 3
</button>
<br>
<br>
<div id="fomr1">
  <form id="form1form">
    form 1

    <input type="text" name="form1text" id="form1text" />
    <br>
    <button id="sumitForm1">submit form1</button>
  </form>
</div>
<div id="fomr2">
  <form id="form2form">
    form 2

    <input type="text" name="form2text" id="form2text" />
    <br>
    <button id="sumitForm2">submit form2</button>
  </form>
</div>
<div id="fomr3">
  <form id="form3form">
    form 3

    <input type="text" name="form3text" id="form3text" />
    <br>
    <button id="sumitForm3">submit form3</button>
  </form>
</div>

如何将表单操作与按钮链接

1 个答案: