php - Foundation Reveal on AJAX success not working -

attempted post on foundation forum, reason not post.

the first code snippet below shows working code form using data-abide="ajax", , .on('valid.fndtn.abide',function(){});. elements disabled etc. , modal opens. when modal closed remain on page desired.

i attempting have use ajax, request php script handling data insert, , element manipulation , modal happen on success.

the second code snippet shows attempt, not working. when run code, alert fires, page submits, nothing written console, no modal, , page refreshing. doing wrong?

i have included partial code (third snippet), form , modal.

if has working example using foundation, data-abide="ajax" , reveal-modal, form submitted, ajax call made php script insert data db, , on success modal window opens, please provide sample.

snippet 1 - works

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

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

partial form , modal code

    <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 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 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 required</small>           <span id="email-result"></span>           <div class="valid-email">(must formatted .edu email)</div>        </div>     </div>      <!-- code removed post -->   </form> </div>      <!-- modal -->     <div id="mymodal" class="reveal-modal" data-reveal aria-labelledby="modaltitle" aria-hidden="true" role="dialog">         <h2 id="modaltitle">thanks pledging.</h2>         <p>please check email our confirmation/validation email.</p>         <a class="close-reveal-modal" aria-label="close">&#215;</a>     </div> 

found answer. needed have ajax request in submit, not valid event.

so works:

        $('#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');           }       });     });   });