Question

点击时有一个NEWFORM按钮可以创建新表单。每个表单都有两个按钮。这两个按钮用作提交。并有两个不同的请求操作页面。我的问题：是否可以使用这两个按钮作为两个提交？这是我的片段：

$(document).ready(function() {
  $(".newform").click(function() {
    $(".MyForm")
    .eq(0)
    .clone()
    .show()
    .insertAfter(".MyForm:last");
  });

  $(document).on('click', '.MyForm button[type=submit]', function(e) {
    e.preventDefault() // To make sure the form is not submitted 
    var $frm = $(this).closest('.MyForm');
    console.log($frm.serialize());
    $.ajax(
        $frm.attr('action'), 
        {
          method: $frm.attr('method'),
          data: $frm.serialize()
        }
    );
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<span class="newform">NEWFORM+</span>
<div class="all">
  <form class="MyForm" method="post" action="secondpage.htm">
    <input type="text" placeholder="name" value="Aynaz" name="a1" />
    <select name="Avg">
      <option value="1">1</option>
      <option value="2">2</option>
    </select>
    <button type="submit">add from DB</button>
     <button type="submit">Remove from DB</button>
  </form>
</div>

Answer 1

在这里尝试这个我为每个按钮元素创建了两个函数，并为每个类添加类以绑定jquery点击

 $(document).ready(function() {
          $(".newform").click(function() {
            $(".MyForm")
            .eq(0)
            .clone()
            .show()
            .insertAfter(".MyForm:last");
          });
         //click handler for add from DB 
          $('body').on('click', '.addfromdb', function(e) {
            e.preventDefault() // To make sure the form is not submitted 
            var $frm = $(this).closest('.MyForm');
            console.log($frm.serialize());
            $.ajax(
                $frm .attr('action'), 
                {
                  method: $frm.attr('method'),
                  data: $frm.serialize()
                }
            );
          });
         //click handler for remove from DB 
         $('body').on('click', '.removefromdb', function(e) {
            e.preventDefault() // To make sure the form is not submitted 
            var $frm = $(this).closest('.MyForm');
            console.log($frm.serialize());
            $.ajax(
                $frm .attr('action'), 
                {
                  method: $frm.attr('method'),
                  data: $frm.serialize()
                }
            );
          });
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
        <span class="newform">NEWFORM+</span>
        <div class="all">
          <form class="MyForm" method="post" action="secondpage.htm">
            <input type="text" placeholder="name" value="Aynaz" name="a1" />
            <select name="Avg">
              <option value="1">1</option>
              <option value="2">2</option>
            </select>
            <button type="submit" class="addfromdb">add from DB</button>
             <button type="submit" class="removefromdb">Remove from DB</button>
          </form>
        </div>

<强>更新

 $(document).ready(function() {
          $(".newform").click(function() {
            $(".MyForm")
            .eq(0)
            .clone()
            .show()
            .insertAfter(".MyForm:last");
          });
         //click handler for add from DB 
          $('body').on('click', '.addfromdb', function(e) {
            e.preventDefault() // To make sure the form is not submitted 
            var $frm = $(this).closest('.MyForm');
            console.log($frm.serialize());
            $.ajax(
                $(this).attr('formaction'), 
                {
                  method: $frm.attr('method'),
                  data: $frm.serialize()
                }
            );
          });
         //click handler for remove from DB 
         $('body').on('click', '.removefromdb', function(e) {
            e.preventDefault() // To make sure the form is not submitted 
            var $frm = $(this).closest('.MyForm');
            console.log($frm.serialize());
            $.ajax(
                $(this).attr('formaction'), 
                {
                  method: $frm.attr('method'),
                  data: $frm.serialize()
                }
            );
          });
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
        <span class="newform">NEWFORM+</span>
        <div class="all">
          <form class="MyForm" method="post">
            <input type="text" placeholder="name" value="Aynaz" name="a1" />
            <select name="Avg">
              <option value="1">1</option>
              <option value="2">2</option>
            </select>
            <button type="submit" formaction="first.htm"class="addfromdb">add from DB</button>
             <button type="submit" formaction="secondpage.htm" class="removefromdb">Remove from DB</button>
          </form>
        </div>

Answer 2

没有。两个按钮都会将字段值添加到数据库中。您应该使用id / class指定每个按钮，然后将相应的函数绑定到它。

Answer 3

你可以这样做。

<form class="MyForm" method="post" action="secondpage.htm">
        <input type="text" placeholder="name" value="Aynaz" name="a1" />
        <select name="Avg">
          <option value="1">1</option>
          <option value="2">2</option>
        </select>
        <button type="submit" class="addfromdb">add from DB</button>
         <button type="submit" ng-click="AnotherButton()">AnotherButton</button>
</form>

克隆表单的两个提交按钮

3 个答案: