Question

我有2 pb用modal bootstrap 3中的表单来解决

首先：我的数据保存两次第二：当我保存数据时如何删除myform中输入和textarea中的数据或者如果我重新加载模态

由于

首先：catagories.php ==＆gt;打电话给模态

   <style>
      .modal-dialog {
        width: 900px!important;
      }
    </style>

    <a data-toggle="modal" href="<?php echo FILENAME_MANUFACTURERS_POPUP;?>" data-target="#myModal"><?php echo osc_image (DIR_WS_ICONS . 'create.gif', TEXT_CREATE) ?></a>
   <!-- Modal -->
      <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
           <div class="modal-content">
             <div class="modal-body"><div class="te"></div></div>
           </div> <!-- /.modal-content -->
         </div><!-- /.modal-dialog -->
       </div><!-- /.modal -->

**second : inside my modal :manufacturers_popup.php**


  <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
  <form name="ajaxform" id="ajaxform" action="manufacturers_popup_ajax.php" method="post">
    <input> .......</input>
    <textarea>........</textarea>
  </form>
  <script type="text/javascript" src="ext/javascript/bootstrap/js/bootstrap_ajax_form.js" /></script>

第三名：我的ajax文件：bootstrap_ajax_form.php

 $(document).ready(function()  {
    $("#simple-post").click(function()   {
      $("#ajaxform").submit(function(e) {
        $("#simple-msg").html("<img src='loading.gif'/>");
        var postData = $(this).serializeArray();
        var formURL = $(this).attr("action");
        $.ajax(  {
          url : formURL,
          type: "POST",
          data : postData,
          success:function(data, textStatus, jqXHR)  {
            $("#simple-msg").html('<pre><code class="prettyprint">'+data+'</code></pre>');
          },
          error: function(jqXHR, textStatus, errorThrown)  {
            $("#simple-msg").html('<pre><code class="prettyprint">AJAX Request Failed<br/> textStatus='+textStatus+', errorThrown='+errorThrown+'</code></pre>');
          }
        });
        e.preventDefault(); //STOP default action
        e.unbind();
      });
      $("#ajaxform").submit(); //SUBMIT FORM
    });
  });

Answer 1

这里有些不对劲。

提交处理程序将绑定到表单的提交事件，您不需要在提交按钮的单击处理程序中执行此操作。

您不希望以您的方式触发提交，这就是导致第二次保存的原因。当您单击表单内的提交按钮时，它将自动触发表单提交。

以这种方式尝试：

$(function () {

    $("#ajaxform").submit(function (e) {
        e.preventDefault(); //STOP default action do this first in case any errors thrown in code   

         var form = this;

        $("#simple-msg").html("<img src='loading.gif'/>");
        var postData = $(this).serializeArray();
        var formURL = $(this).attr("action");
        $.ajax({
            url: formURL,
            type: "POST",
            data: postData,
            success: function (data, textStatus, jqXHR) {
                $("#simple-msg").html('<pre><code class="prettyprint">' + data + '</code></pre>');

                /* cleanup now */
                form.reset()

            },
            error: function (jqXHR, textStatus, errorThrown) {
                $("#simple-msg").html('<pre><code class="prettyprint">AJAX Request Failed<br/> textStatus=' + textStatus + ', errorThrown=' + errorThrown + '</code></pre>');
            }
        });
    });
});

Answer 2

要清除表单数据，您可以使用以下功能

function clearFormFields(div){
        $('#'+div).find('input:text, input:hidden, input:password, input:file, select, textarea').val('');
        $('#'+div).find('input:radio, input:checkbox').removeAttr('checked').removeAttr('selected');
}

将此功能添加到您的JS中，如果您想要清除表单字段，可以调用clearFormFields("ajaxform")

如果您需要在每次隐藏模态时清除表单数据，可以将其绑定在Bootstrap模式上

$('#myModal').on('hidden', function () {
    clearFormFields("ajaxform");  
})

在Bootstrap模态here

上查看其他事件

如果上述功能没有清除您的CKeditor文本字段，您可以使用CKEditor API方法setData查看详细文档here

美好的一天

Answer 3

好的，谢谢你的所有方向。我找到了解决方案

$(function () {
  $("#ajaxform").submit(function (e) {
    e.preventDefault(); //STOP default action do this first in case any errors thrown in code
    var form = this;


    $("#simple-msg").html("<img src='images/icons/loadingAnimation.gif'/>");
    var postData = $(this).serializeArray();
    var formURL = $(this).attr("action");
    $.ajax({
      url: formURL,
      type: "POST",
      data: postData,
      success: function (data, textStatus, jqXHR) {
        $("#simple-msg").html('<pre><code class="prettyprint">' + data + '</code></pre>');
/* clear ckeditor instance */
        for(k in CKEDITOR.instances){
          var instance = CKEDITOR.instances[k];
            instance.setData( '' );
        }
// cleanup now
       form.reset()
      },
      error: function (jqXHR, textStatus, errorThrown) {
        $("#simple-msg").html('<pre><code class="prettyprint">AJAX Request Failed<br/> textStatus=' + textStatus + ', errorThrown=' + errorThrown + '</code></pre>');
      }
    });
  });
});

保存在模态引导程序3中后删除数据

3 个答案: