Question

有一个标题为NEWFORM的按钮。它用于在点击时创建新表单。每个表单有两个按钮。这两个按钮用作提交，并有两个不同的请求操作页面。我的代码工作正常。我通过ajax方法发送我的表单数据，我不喜欢这个。我想在不发送ajax方法的情况下更改我的代码。有没有办法做到这一点？这是我的片段：

$(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</button>
             <button type="submit" formaction="secondpage.htm" class="removefromdb">Remove</button>
          </form>
        </div>

Answer 1

如果您想动态设置表单action而不是执行ajax尝试更改为：

$('body').on('click', '.removefromdb, .addfromdb', function(e) {                 
   var $frm = $(this).closest('.MyForm');
   $frm.attr('action', $(this).attr('formaction'));
});

这将更新操作，然后表单将通过浏览器默认进程提交

Answer 2

删除javascript点击功能并从html中删除编码属性，如下所示。

＆＃13;

$(document).ready(function() {
          $(".newform").click(function() {
            $(".MyForm")
            .eq(0)
            .clone()
            .show()
            .insertAfter(".MyForm:last");
          });
        });

＆＃13;

<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="default.html">
            <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</button>
             <button type="submit"class="removefromdb">Remove</button>
          </form>
        </div>

＆＃13;

如何在没有ajax方法的情况下单独提交表单

2 个答案: