Открытие фонда об успехе AJAX не работает

Попытка опубликовать это на форуме Фонда, но по какой-то причине не будет.

Первый фрагмент кода ниже показывает рабочий код для моей формы, используя data-abide="ajax"и .on('valid.fndtn.abide',function(){});, Элементы отключены и т. Д., И модальное открывается. Когда модал закрыт, я остаюсь на странице по желанию.

Я пытаюсь теперь использовать это AJAX, где запрос будет к php-скрипту, обрабатывающему вставку данных, и манипуляция с элементом и модальное произойдет в случае успеха.

Второй фрагмент кода показывает ту попытку, которая не работает. Когда я запускаю этот код, предупреждение срабатывает, но затем страница отправляется, ничего не записывается в консоль, не модально, и страница обновляется. Что я делаю неправильно?

Я также включил частичный код (третий фрагмент), для формы и модальной.

Если у кого-то есть работающий пример, использующий Foundation, data-abide = «ajax» икартильный-модальный, где отправляется форма, AJAX-вызов вызывается PHP-скриптом для вставки данных в БД, и в случае успеха открывается модальное окно Пожалуйста, предоставьте образец.

СНИППЕТ 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');
});
});

SNIPPET 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>

Частичная форма и модальный код

    <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>