弹出窗口消失，页面重新加载表单提交

Question

I need a little help. I have created a form and for the validation i have used : http://formvalidator.net/ .

I want to achieve: The thing i want to achieve is that upon clicking on submit the users sees a popup and the submitted form is then emailed to the administration.

Problem: When the user clicks on submit the popup is displayed and the email is also sent but the page gets refreshed instantly and the popup disappears if i set

onValidate : function() {
      return true; 
    }

and when i set

onValidate : function() {
          return false; 
        }

The popup stays but the email is not sent.

FORM HTML:

    if (isset($_POST['enquiry_form_submit'] ) ) {

  $hidden_field = esc_html( $_POST[ 'enquiry_form_submitted' ] );

      if($hidden_field == 'Y') {
        enquiryemail();

      }
<form name="enquiryemail_form" id="enquiryemail_form" method="post"  data-toggle="validator" action="">
                <h2 class="tab-heading"><?php echo  esc_html($enquiry_subheading);?></h2>

          <span class="required">* Required Fields to provide you with your FREE online property report.</span>

          <hr>



          <div class="abt-ur-prprty">

           <div class="left-prprty">

            <div class="form-row ">



             <label for="property_type" >Property type*</label>

             <select id="Property_type" name="property_type" data-validation="required" data-validation-error-msg="Please select property type">

             <option value="" >--Select--</option>

             <option value="House">House</option>

        <option value="House + Granny Flat">House + Granny Flat</option>

        <option value="Townhouse">Townhouse</option>

        <option value="Land">Land</option>

        <option value="Acreage">Acreage</option>

        <option value="Apartment/Unit">Apartment/Unit</option>

        <option value="Duplex">Duplex</option>

             </select><br>



            </div>



            <!-- form row ends -->

            <div class="form-row">

             <label for="bedrooms">Bedrooms*</label>

             <select id="bedrooms" name="bedrooms" data-validation="required" data-validation-error-msg="Please select a bedroom">

             <option value="">--Select--</option>

             <option value="1">1</option>

        <option value="2">2</option>

        <option value="3">3</option>

        <option value="4">4</option>

        <option value="5">5</option>

        <option value="More than 5">More than 5</option>

             </select>



            </div>

            <!-- form row ends -->

            <div class="form-row">

             <label>Bathrooms*</label>

             <select id="bathrooms" name="bathroom" data-validation="required" data-validation-error-msg="Please select a bathroom">

             <option value="">--Select--</option>

             <option value="1">1</option>

        <option value="2">2</option>

        <option value="3">3</option>

        <option value="4">4</option>

        <option value="More than 4">More than 4</option>

             </select>



            </div>

            <!-- form row ends -->

            <div class="form-row">

             <label>Condition*</label>

             <select id="condition" name="condition" data-validation="required" data-validation-error-msg="Please select the condition">

             <option value="">--Select--</option>

             <option value="Excellent">Excellent</option>

        <option value="Good">Good</option>

        <option value="Average">Average</option>

        <option value="Needs Work">Needs Work</option>

             </select>



            </div>

            <!-- form row ends -->

            <div class="form-row">

             <label>Est Size (sqm)</label>

             <input type="text"  name="est_size" id="est">

            </div>

            <!-- form row ends -->

            <div class="form-row">

             <label>Parking*</label>

             <select id="parking" name="parking" data-validation="required" data-validation-error-msg="Please select the parking">

             <option value="">--Select--</option>

              <option value="1">1</option>

               <option value="2">2</option>

                <option value="3">3</option>

                 <option value="4">4</option>

                  <option value="more">More than 4</option>

             </select>



            </div>

            <!-- form row ends -->

            <div class="form-row mrgn-zero">

             <label>Special Features</label>

             <div class="checkbox-group">

             <div class="left">

              <div class="chk-row"><input type="checkbox" value="Swimming-Pool" id="chk" name="special_feature[]"> <label>Swimming Pool</label></div>

              <div class="chk-row"><input type="checkbox" value="City-Views" id="chk" name="special_feature[]"> <label>City Views </label></div>

              <div class="chk-row"><input type="checkbox" value="Garden" id="chk" name="special_feature[]"> <label>Garden </label></div>

              <div class="chk-row"><input type="checkbox" value="Spa" id="chk" name="special_feature[]"> <label>Spa </label></div>

              <div class="chk-row"><input type="checkbox" value="Con"  id="chk" name="special_feature[]"> <label>Air Con</label></div>

              </div>

              <div class="right">

              <div class="chk-row"><input type="checkbox" value="Water-views" id="chk" name="special_feature[]"> <label>Water Views</label></div>

              <div class="chk-row"><input type="checkbox" value="Balcony" id="chk" name="special_feature[]"> <label>Balcony</label></div>

              <div class="chk-row"><input type="checkbox" value="Floorboards" id="chk" name="special_feature[]"> <label>Floorboards</label></div>

              <div class="chk-row"><input type="checkbox" value="Security" id="chk" name="special_feature[]"> <label>Security</label></div>

              </div>

             </div>

            </div>

            <!-- form row ends -->

            <div class="form-row">

             <label>Other</label>

             <input type="text"  name="other" id="oth">

            </div>

            <!-- form row ends -->

           </div>

           <!-- left prprty ends here -->

           <div class="right-prprty">

            <div class="form-row unit-street">

             <div class="left"><label>Unit #</label><input type="text" name="unit_no" id="un_no"></div>

             <div class="right"><label>Street #*</label><input type="text" id="Street_no" name="street_no" data-validation="required" data-validation-error-msg="Please enter street no"></div>



            </div>

            <!-- form row ends here -->

            <div class="form-row">

             <label>Street Name* </label>

             <input type="text"  id="street_name" name="street_name" data-validation="required" data-validation-error-msg="Please enter a street name">



            </div>

            <!-- form row ends -->

            <div class="form-row">

             <label>Suburb* </label>

             <input type="text"  id="suburb" name="studio" data-validation="required" data-validation-error-msg="Please enter suburb">



            </div>

            <!-- form row ends -->

            <div class="form-row">

             <label>State*</label>

             <select id="state" name="State" data-validation="required" data-validation-error-msg="Please enter a State">

             <option value="">--Select--</option>

             <option value="NT">NT</option>

        <option value="ACT">ACT</option>

        <option value="NSW">NSW</option>

        <option value="QLD">QLD</option>

        <option value="SA">SA</option>

        <option value="TAS">TAS</option>

        <option value="VIC">VIC</option>

        <option value="WA">WA</option>

             </select>



            </div>

            <!-- form row ends -->

            <div class="form-row mrgn-zero">

             <label>Relationship <br> to Property*</label>

             <input type="text" id="relationship_to_Property"  name="relation" data-validation="required" data-validation-error-msg="Please select the relationship">



            </div>



            <!-- form row ends -->

            <div class="form-row mrgn-zero">

             <label>Purpose of <br> Request*  </label>

             <select id="purpose_of_request" name="purpose"  multiple data-validation="required" data-validation-error-msg="Please select the purpose of request">

             <!--<option value="-1">--Select--</option>-->

             <option value="Selling">Selling</option>

             <option value="Re-Financing">Re-Financing</option>

             <option value="Interested-in-Current-Market-Pricing">Interested in Current Market Pricing</option>

             </select>



            </div>

            <!-- form row ends -->

           <!-- <div class="form-row mrgn-zero">

             <label> Sell /<br> Re-Finance* </label>

             <select id="time_to_sell" name="cell">

             <option value="-1">--Select--</option>

              <option value="0-3">0 – 3 Months</option>

               <option value="3-6">3 – 6 Months</option>

                <option value="6-12">6 – 12 Months</option>

             </select>



            </div>  

            <!-- form row ends -->

            <div class="form-row">

             <label>Currently Listed?* </label>

             <div class="radio-btns">
    <!-- form row ends 
               <div class="left"><input type="radio" name="currently_listed_n" id="currently_listed" value="y"><label>Yes</label></div>

               <div class="right"><input type="radio"  name="currently_listed_n" id="currently_listed" value="n" ><label>No</label></div>
          form row ends -->

              <select id="currently_listed_n" name="currently_listed_n" data-validation="required" data-validation-error-msg="Please select one">
                <option value="-1">--Select--</option>
                <option value="1">Yes</option>
                <option value="2">No</option>
              </select>

             </div>



            </div>

             <!-- form row ends -->



           </div>

           <!-- right prprty ends here -->



          </div>

          <!-- abt ur prprty ends here -->



          <!-- property services ends here -->

          <h2 class="tab-heading"><?php echo  esc_html($enquiry_second_subheading); ?></h2>

          <div class="abt-urself">

            <div class="left">

             <div class="form-row"> <label>First name *</label>  <input type="text" id="first_name" name="first_name" data-validation="required" data-validation-error-msg="Please enter your First Name.">



             </div>



             <div class="form-row"> <label>Surname*</label>  <input type="text" id="last_name" name="sur_name" data-validation="required" data-validation-error-msg="Please enter your Sur Name.">   </div>



             <div class="form-row"> <label>Telephone*</label>  <input type="text" id="telephone" name="telephone" data-validation="number required" data-validation-error-msg="Please enter your Telephone Number."></div>



            </div>

            <!-- left ends here --> 

            <div class="right">

             <div class="form-row"> <label>Email*</label>  <input type="text"  id="email" name="email" value="<?php if(isset($_POST['homepageemail'])) { echo  esc_html($_POST['homepageemail']); }?>" data-validation="email" data-validation-error-msg="Please enter your email."></div>



             <div class="form-row"> <label>Confirm email* </label>  <input type="text" id="confirm_email" name="confirm_email" value="<?php if(isset($_POST['homepageemail'])) { echo  esc_html($_POST['homepageemail']); }?>" data-validation="confirmation" data-validation-confirm="email" data-validation-error-msg="Your provided emails donot match"></div>



            </div>

            <!-- right ends here --> 

            <div class="terms-conditions"><div class="privacy-policy"><input type="checkbox" id="agree" value="agree" data-validation="required" data-validation-error-msg="Please agree to the terms above"><p> I agree to the following Terms and Conditions and Privacy Policy*</p> <br>


           <input type="hidden" name="enquiry_form_submitted" value="Y">
            </div><input type="submit" value="SUBMIT" name="enquiry_form_submit"  class="fancybox"  >

            <div style="display:none;">
              <div class="aussi-en-pop" id="enquiry-popup"><h3>Thank you for using <?php echo get_bloginfo( 'name' )?>.</h3> <p>Your <?php echo get_bloginfo( 'name' )?> representative is busy getting your Property Report ready and will be in touch within 48 hours with your free report. <br> All enquiries please email :  <a href="<?php echo $email['contactemail'];?>"><?php echo $email['contactemail'];?></a></p></div>
            </div>

          </form>

Mailer:

function enquiryemail() {

$storeemail = get_option('contactemailstored'); 
  $to = $storeemail['contactemail'];

  $subject = get_bloginfo('url') .  '- New Enquiry ';

  $message = "Thanks!";



  $from = get_bloginfo('url') . ' Application';

  wp_mail( $to , $subject, $message );  


  } 

Javascript:

$.validate({
                        form : '#enquiryemail_form',
                         modules : 'security',
                         errorMessageClass : 'enq_err',
    onValidate : function() {
      jQuery.fancybox( {
        href   : '#enquiry-popup'
        });
      return false; // Will stop the submission of the form
    }
                    });

Answer 1

The PopUp disappears because the click event on <input type='submit'> tells the browser to send the form to the server. We will need to tell the browser to stop propagation of the submit action so that we can show the PopUp. I hope this will shed some light.

So, we will:

1. Attach a clickEventListener to the <input type='submit'>.

2. Add event.stopPropagation() and event.preventDefault(). These will stop any further propagation of the click event and prevent the default action i.e. submit, respectively.

   $(function() { 
      $("form").find("input[type='submit']").click(function(event) {
         event.preventDefault();
         event.stopPropagation();
         inputSubmit_OnClick();
      }); 
   });
   

3. Create a inputSubmit_OnClick function that will be called when the <input type='submit'> is clicked. The rest of the code goes here.

4. Use jQueryFormValidation plugin to validate the form.
5. Display our PopUp for the whole world to see.
6. Use $.ajax() to send data to the server. This is where we are supposed to call the script that will send the email.

7. Implement methods to handle success or fail events.

   function inputSubmit_OnClick() {
        // get form input values
        // jQueryFormValidation
        // $.ajax()
        // $.ajax().fail() and $.ajax().done()
   }