Всплывающее окно исчезает и перезагружается страница. Отправить

Мне нужна небольшая помощь. Я создал форму и для проверки, которую я использовал: http://formvalidator.net/.Всплывающее окно исчезает и перезагружается страница. Отправить

Я хочу достичь: То, что я хочу достичь, заключается в том, что после нажатия на пользователя пользователи видят всплывающее окно, и отправленная форма затем отправляется администратору.

Проблема: Когда пользователь нажимает на отправить всплывающее окно отображается и электронная почта также отправляется, но страница получает обновляется мгновенно, и всплывающее окно исчезает, если я установить

onValidate : function() { 
     return true; 
    }

и когда я установить

onValidate : function() { 
      return false; 
     }

Всплывающее окно остается, но электронное письмо не отправлено.

ФОРМА 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 
    } 
        });

источник

2015-10-27 Fahad Sohail

PopUp исчезает, потому что событие нажатия на <input type='submit'> сообщает браузеру, чтобы отправить форму на сервер. Нам нужно будет сообщить обозревателю остановку распространенияsubmitдействия, чтобы мы могли показать PopUp. Надеюсь, это прольет свет.

Таким образом, мы будем:

Приложить clickEventListener к <input type='submit'>.
Добавить event.stopPropagation() и event.preventDefault(). Они остановят дальнейшее распространение события кликов и предотвратят действие по умолчанию, т.е. подают соответственно.
```
$(function() { 
    $("form").find("input[type='submit']").click(function(event) { 
     event.preventDefault(); 
     event.stopPropagation(); 
     inputSubmit_OnClick(); 
    }); 
}); 
```
Создать inputSubmit_OnClick функцию, которая будет вызываться при нажатии <input type='submit'>. Остальная часть кода идет здесь.
Используйте плагин jQueryFormValidation, чтобы подтвердить форму.
Чтобы узнать обо всем, что видите на фотографии: PopUp.
Используйте $.ajax() для передачи данных на сервер.Здесь мы должны назвать сценарий, который отправит электронное письмо.

Реализация методов обработки success или fail событий.

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

источник

2015-10-28 14:53:17 joshuamabina

Спасибо, что за подробные ответы. Хотя я хотел бы прокомментировать, что я пробовал ajax и метод проверки differrent, но я столкнулся с проблемой, когда условие sucess не выполняется. Ajax идет до состояния beforeSend, но успех не выполняется. Вот ссылка на ссылку, которую я создал в stackoverflow: http://stackoverflow.com/questions/33379391/ajax-success-function-does-not-seem-to-work –

-1

В documentatio n плагина, return false; с целью отключения представления формы вызывается в обратном вызове onSuccess, а не в обратном вызове onValidate.

//From the documentation 
onSuccess : function($form) { 
    alert('The form '+$form.attr('id')+' is valid!'); 
    return false; // Will stop the submission of the form 
},

источник

2015-10-27 02:45:49 Chris

Спасибо за ответ. Я уже знаю, о чем я говорил. Не могли бы вы рассказать мне, как я должен использовать ваше предложение для решения моей проблемы? –

Посмотрите на свой код. Вы не называете это правильно. Документация возвращает false в обратном вызове onSuccess. Вы делаете это с onValidate. Вам нужно заменить onValidate на onSuccess или добавить onSuccess. – Chris

О, ладно. Я попытался использовать onSuccess. Проблема остается прежней. –

Всплывающее окно исчезает и перезагружается страница. Отправить

ответ

Смежные вопросы