Php 表单提交时，弹出窗口消失，页面重新加载
我需要一点帮助。我已经创建了一个表单，并使用了以下验证： 我想要实现：我想要实现的是，在单击提交时，用户会看到一个弹出窗口，然后将提交的表单通过电子邮件发送给管理部门 问题：当用户单击提交时，弹出窗口会显示，电子邮件也会发送，但页面会立即刷新，如果我设置为Php 表单提交时，弹出窗口消失，页面重新加载,php,jquery,wordpress,Php,Jquery,Wordpress,我需要一点帮助。我已经创建了一个表单，并使用了以下验证： 我想要实现：我想要实现的是，在单击提交时，用户会看到一个弹出窗口，然后将提交的表单通过电子邮件发送给管理部门 问题：当用户单击提交时，弹出窗口会显示，电子邮件也会发送，但页面会立即刷新，如果我设置为 onValidate : function() { return true; } 当我开始 onValidate : function() { return false; } 弹
onValidate : function() {
return true;
}
onValidate : function() {
return false;
}
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>
$.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
}
});
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>
$.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
}
});
在插件的文档中，
返回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
},
弹出窗口消失，因为
上的单击事件告诉浏览器将表单发送到服务器。我们需要告诉浏览器停止传播提交
操作，以便显示弹出窗口。我希望这能给我们一些启示
因此，我们会：
将clickEventListener
附加到
上
添加event.stopPropagation（）
和event.preventDefault（）
。这将停止单击事件的任何进一步传播，并分别阻止默认操作，即提交
$(function() {
$("form").find("input[type='submit']").click(function(event) {
event.preventDefault();
event.stopPropagation();
inputSubmit_OnClick();
});
});
创建一个inputSubmit\u OnClick
函数，单击
时将调用该函数。代码的其余部分在这里
使用插件验证表单
显示我们的弹出窗口，让全世界都能看到
使用$.ajax（）
将数据发送到服务器。这就是我们应该调用将发送电子邮件的脚本的地方
实施处理成功
或失败
事件的方法
function inputSubmit_OnClick() {
// get form input values
// jQueryFormValidation
// $.ajax()
// $.ajax().fail() and $.ajax().done()
}
谢谢你的回复。我已经知道我提到了什么。你能告诉我我应该如何使用你的建议来解决我的问题吗？看看你的代码。您没有正确地调用它。文档在onSuccess回调中返回false。您正在从onValidate执行此操作。您需要将onValidate替换为onSuccess，或添加onSuccess。非常感谢您提供此详细答案。虽然我想说我已经尝试过ajax和不同的验证方法，但是我面临一个问题，即Success条件没有被执行。ajax会一直执行到beforeSend条件，但不会执行成功。以下是我在stackoverflow上创建的问题链接：