Php Ajax成功的基础 试图将其发布到基础论坛，但出于某种原因，它不会发布。

下面的第一个代码片段显示了使用

data-append=“ajax”

和

.on（'valid.fndtn.append'，function（）{}）的我的表单的工作代码。元素被禁用等，模式打开。当模式关闭时，我会根据需要留在页面上

我现在尝试使用AJAX，请求将发送到处理数据插入的php脚本，成功后将执行元素操作和模式

第二个代码段显示了该尝试，但该尝试不起作用。当我运行这段代码时，会触发警报，但随后页面会提交，没有写入控制台，没有模式，页面会刷新。我做错了什么

我还包含了表单和模态的部分代码（第三段代码）

如果有一个使用Buffic的工作示例，Debug List=“Ajax”并显示模式，在提交表单的情况下，对一个PHP脚本进行Ajax调用以将数据插入到DB中，并且在成功打开模式窗口时，请提供一个示例。
片段1-工作
<script type="text/javascript">
$(document).ready(function () {

    $("#pledge_btn").attr("disabled", true);

    $(document).foundation({
        abide: {
            validate_on: 'manual',
            patterns: {
                edu_address: /\.edu$/
            }
        }
    });

    $('a.custom-close-reveal-modal').click(function(){
      $('#emailModal').foundation('reveal', 'close');
    });

    $('#pledge_form')
    .on('invalid.fndtn.abide', function() {
      $("#pledge_btn").attr("disabled", true);
      $("#terms").prop("checked",false);
      console.log('Not Submitted');
    })
    .on('valid.fndtn.abide', function() {
      $("#pledge_form :input").prop('readonly', true);
      $("#pledge_btn").attr("disabled", true);
      $("#terms").attr("disabled", true);
      $("#sweeps").attr("disabled", true);
      console.log('Submitted: ', data);
      $('#myModal').foundation('reveal', 'open');
    });
});


$（文档）.ready（函数（）{
$（“抵押物”）.attr（“残疾”，真实）；
$（文件）。基金会({
遵守：{
在“手动”上验证，
模式：{
教育大学地址：/\.edu$/
}
}
});
$（'a.custom-close-reveal-modal'）。单击（函数（）{
$（'#emailModal'）.foundation（'discover'，'close'）；
});
$（“#质押表格”）
.on（'invalid.fndtn.append'，function（）{
$（“抵押物”）.attr（“残疾”，真实）；
$（“#条款”）.prop（“选中”，假）；
console.log（“未提交”）；
})
.on（'valid.fndtn.append'，函数（）{
$（“#质押形式：输入”）.prop（'readonly'，true）；
$（“抵押物”）.attr（“残疾”，真实）；
$（“#条款”）.attr（“禁用”，真）；
$（“#扫描”）.attr（“禁用”，真）；
console.log（'Submitted:'，data）；
$（'myModal'）.foundation（'discover'，'open'）；
});
});


代码段2-不起作用

 <script type="text/javascript">
  $(document).ready(function () {

    $("#pledge_btn").attr("disabled", true);

    $(document).foundation({
        abide: {
            validate_on: 'manual',
            patterns: {
                edu_address: /\.edu$/
            }
        }
    });

    $('a.custom-close-reveal-modal').click(function(){
      $('#emailModal').foundation('reveal', 'close');
    });

    $('#pledge_form')
    .on('invalid.fndtn.abide', function() {
      $("#pledge_btn").attr("disabled", true);
      $("#terms").prop("checked",false);
      alert("Form NOT submitted");
    })
    .on('valid.fndtn.abide', function() {
        var lname = $("#lName").val();

        var dataString = 'lname=' + lname;

      alert("Form submitted");
      $.ajax({
        url     : create_pledge.php,
        type    : $(this).attr('method'),
        data    : dataString,
        success : function( data ) {
          $("#pledge_form :input").prop('readonly', true);
          $("#pledge_btn").attr("disabled", true);
          $("#terms").attr("disabled", true);
          $("#sweeps").attr("disabled", true);
          console.log('Submitted: ', data);
          $('#myModal').foundation('reveal', 'open');
        },
        error   : function( data, xhr, err ) {
          console.log('Oops: ', data, xhr , err);
        }
      });
      return false;
    });
  });
</script>


$（文档）.ready（函数（）{
$（“抵押物”）.attr（“残疾”，真实）；
$（文件）。基金会({
遵守：{
在“手动”上验证，
模式：{
教育大学地址：/\.edu$/
}
}
});
$（'a.custom-close-reveal-modal'）。单击（函数（）{
$（'#emailModal'）.foundation（'discover'，'close'）；
});
$（“#质押表格”）
.on（'invalid.fndtn.append'，function（）{
$（“抵押物”）.attr（“残疾”，真实）；
$（“#条款”）.prop（“选中”，假）；
警告（“未提交表格”）；
})
.on（'valid.fndtn.append'，函数（）{
var lname=$（“#lname”）.val（）；
var dataString='lname='+lname；
警报（“提交的表格”）；
$.ajax({
url:create_-credit.php，
类型：$（this.attr（'method'），
数据：dataString，
成功：功能（数据）{
$（“#质押形式：输入”）.prop（'readonly'，true）；
$（“抵押物”）.attr（“残疾”，真实）；
$（“#条款”）.attr（“禁用”，真）；
$（“#扫描”）.attr（“禁用”，真）；
console.log（'Submitted:'，data）；
$（'myModal'）.foundation（'discover'，'open'）；
},
错误：函数（数据、xhr、err）{
log（'Oops:'，data，xhr，err）；
}
});
返回false；
});
});

部分形式与情态码

    <div class="row pledge-row">
  <form data-abide="ajax" id="pledge_form" method="post" name="pledge_form">
    <div class="row">
      <div class="large-6 medium-12 columns">
        <label class="pledge-label">First Name*</label>
        <input id="fName" type="text" required pattern="[a-zA-Z]+"/>
       <small class="error">First Name is required</small>
      </div>
    </div>
    <div class="row">
      <div class="large-6 medium-12 columns">
        <label class="pledge-label">Last Name*</label>
        <input id="lName" type="text" required pattern="[a-zA-Z]+"/>
       <small class="error">Last Name is required</small>
      </div>
    </div>
    <div class="row">
      <div class="large-6 medium-12 columns">
          <label class="pledge-label">Email*</label>
          <input id="email" type="email"  required style="margin:0 0 5px 0 !important;"/>             
          <small class="error">.edu email address is required</small>
          <span id="email-result"></span>
          <div class="valid-email">(must be a properly formatted .edu email)</div>

      </div>
    </div>

    <!-- CODE REMOVED FOR THIS POST -->
  </form>
</div>

    <!-- Modal -->
    <div id="myModal" class="reveal-modal" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
        <h2 id="modalTitle">Thanks for pledging.</h2>
        <p>please check your email for our confirmation/validation email.</p>
        <a class="close-reveal-modal" aria-label="Close">&#215;</a>
    </div>


名字*
名字是必需的
姓*
姓是必需的
电子邮件*
.edu电子邮件地址是必需的
（必须是格式正确的.edu电子邮件）
谢谢你的承诺。
请查看您的电子邮件以获取我们的确认/验证电子邮件

×
找到了答案。我需要在submit中包含ajax请求，而不是有效的事件

所以这是可行的：

        $('#pledge_form')
    .on('invalid.fndtn.abide', function() {
      $("#pledge_btn").attr("disabled", true);
      $("#terms").prop("checked",false);
      // alert("Form NOT submitted");
    })
    .on('valid.fndtn.abide', function() {
      // alert("Form submitted");
      console.log('VALID');
    })
    .on('submit', function(e) {
        var ajaxObj = $.ajax({
          url   : 'create_pledge.php',
          type    : $(this).attr('method'),
          data    : $(this).serialize(),
          success : function( ) {
            $("#pledge_form :input").prop('readonly', true);
            $("#pledge_btn").attr("disabled", true);
            $("#terms").attr("disabled", true);
            $("#sweeps").attr("disabled", true);
            console.log('Submitted');
            $('#myModal').foundation('reveal', 'open');
          },
          error   : function( xhr, err ) {
            console.log('Oops: ', xhr , err);
          },
          complete: function(){
              console.log('COMPLETE');
          }
      });
    });
  });

在提交之前，我对fancybox和ajax检查也有同样的问题

这是我确定有效的解决方案

<form id="my_form" action="...." method="POST" class="popup" data-abide="ajax">
<input type="text" name="check_this_field_with_ajax" id="check_this_field_with_ajax">
....

</form>

<script type="text/javascript" src="..../js/foundation.min.js"></script>

<script type="text/javascript" src="..../js/foundation/foundation.abide.js"></script>

<script type="text/javascript">

$('#my_form')
    .on('invalid.fndtn.abide', function() {
        console.log('NOT Submitted');
    })
    .on('valid.fndtn.abide', function() {
      console.log('VALID');
    })
    .on('submit', function(e) {
        var ajaxRequest = $.ajax({
            type: 'GET',
            url: "....",
            data: {xxx: yyy},
            cache: false,
            dataType: 'json',
        });

        ....

        ajaxRequest.done(function() {
            if (ok) {
                $('#check_this_field_with_ajax').parent().removeClass('error');
                $('#my_form').attr({'submit_this_form': 'yes'});
                $(document).foundation('abide', 'reflow');
                $('#my_form').trigger('submit.fndtn.abide');
            }
        });
    }

</script>

以前

if (is_ajax) {
    return false;
  }

if (is_ajax) {
    return false;
  }