DW Form Popup Ajax Form

dw-popup-ajax

<isinclude template="util/modules">

<div class="checkBalanceContainer">
  <form action="${URLUtils.continueURL()}" id="${pdict.CurrentForms.giftcert.htmlName}">
    <isinputfield formfield="${pdict.CurrentForms.giftcert.balance.giftCertID}" type="input">
    <isinputfield formfield="${pdict.CurrentForms.giftcert.balance.pin}" type="input" >
    <button type="submit" name="${pdict.CurrentForms.giftcert.checkbalance.htmlName}" class="checkBalance">Check Balance</button>
    <iscomment>Hidden input required for ajax serialization of the form</iscomment>
    <input name='${pdict.CurrentForms.giftcert.checkbalance.htmlName}' type='hidden' value="true"/>
  </form>
  <div class="inputcontainer">
    <div class="label">
      <span class="labeltext">${Resource.msg('forms.giftcert.balance.balance.label', 'forms', null)}: <span class="requiredindicator">&nbsp;</span></span>
    </div><!-- END: label -->
    <div class="value">
      <span class="strong"><isif condition="${pdict.GiftCertificate.balance}"><isprint value="${pdict.GiftCertificate.balance}"/><iselse>$0.00</isif></span>
    </div>
  </div>
</div>

<script type="text/javascript">
jQuery(document).ready(function(){
  jQuery( "#dialogcontainer" ).dialog({
    autoOpen: false,
    title: "",
    height: "auto",
    width: "auto",
    modal: true,
    zIndex: 2000,
    resizable: false
  });
  jQuery('#dialogcontainer').dialog('open');
  //Client side validation
  function validateCheckBalance(){
    return true;
  }
  //Submit the form on click
  jQuery('button.checkBalance').click(function(e){
    e.preventDefault();
    var url = jQuery('#dwfrm_giftcert').attr('action');
    var data = jQuery('#dwfrm_giftcert').serialize();
    console.log(data);
    if(validateCheckBalance()) {
      jQuery.ajax({
       url: url,
       data: data,
       context: document.body,
       success: function(e){
        console.log(e);
       }
      });
    } else {
      console.log('We have errors');
    }
  });
});
</script>