Custom Ajax Form for WP
Thu Jul 06 2023 11:56:06 GMT+0000 (Coordinated Universal Time)
Saved by @gshailesh27
//HTML Form <form id="frmContactUs" class="customFurntiureForm mx-auto" style="max-width:600px;"> <div class="row g-3"> <div class="col-md-6"> <form action="<?php echo site_url() ?>/wp-admin/admin-ajax.php" method="POST" id="filter"> <?php $taxonomy = 'product_cat'; $terms = get_terms($taxonomy); // Get all terms of a taxonomy if ( $terms && !is_wp_error( $terms ) ) : ?> <select class="form-select rounded-0" aria-label="Select Category" id='pcategory' name="pcategory"> <option value="Select Category">Select Category</option> <?php foreach ( $terms as $term ){ $termValue = $term->name; ?> <option value="<?php echo $termValue ;?>" <?php if ($_GET['selectCate'] == $termValue) echo 'selected'; ?> ><?php echo $termValue; ?></option> <?php }?> </select> <?php endif;?> <input type="hidden" name="action" value="myfilter"> </form> </div> <div class="col-md-6"> <select class="form-select rounded-0" aria-label="Select Product" id='pname' name="pname"> <option selected>Select Product</option> <?php global $post; $category = get_queried_object(); $term_slug = $category->slug; $my_query = new WP_Query( array( 'post_type'=>'product', 'posts_per_page' => -1, )); if ($my_query -> have_posts()) : while($my_query -> have_posts()) : $my_query -> the_post(); ?> <option value="<?php the_title();?>"><?php the_title();?></option> <?php endwhile; wp_reset_postdata(); endif; ?> </select> </div> <div class="col-12"> <input type="text" class="form-control rounded-0" placeholder="Name" name="name" aria-label="Name" required> </div> <div class="col-12"> <input type="email" class="form-control rounded-0" placeholder="Email" name="email" aria-label="Email" required> </div> <div class="col-md-6"> <input type="text" class="form-control rounded-0" placeholder="Location" name="location" aria-label="Location"> </div> <div class="col-md-6"> <input type="text" class="form-control rounded-0" placeholder="Pin Code" name="pincode" aria-label="Pin Code"> </div> <div class="col-12"> <select class="form-select rounded-0" aria-label="Acceptable Calling Hours" id='ach' name="ach"> <option selected>Acceptable Calling Hours</option> <option value="Monday : 10am–8pm">Monday : 10am–8pm</option> <option value="Tuesday : 10am–8pm">Tuesday : 10am–8pm</option> <option value="Wednesday : 10am–8pm">Wednesday : 10am–8pm</option> <option value="Thursday : 10am–8pm">Thursday : 10am–8pm</option> <option value="Friday : 10am–8pm">Friday : 10am–8pm</option> <option value="Saturday : 10am–4pm">Saturday : 10am–4pm</option> </select> </div> <div class="col-12"> <textarea name="comment" class="form-control rounded-0" rows="4" placeholder="Comment"></textarea> </div> <div class="col-12"> <!--<button type="submit" id="submit" name="submit" class="btnBlack text-white rounded-0 btn">Submit </button>--> <input type="submit" id="submit" name="submit" class="btnBlack text-white rounded-0 btn"/> </div> </div> <div id="result_msg"> </div> </form> //Function.php code function ajax_contact_us(){ date_default_timezone_set("Asia/Calcutta"); $arr=[]; wp_parse_str($_POST['contact_us'],$arr); global $wpdb; //global $table_prefix; $table='wp_contact_us'; $date = date('Y-m-d h:i:s'); $result=$wpdb->insert($table,[ "Name" =>$arr['name'], "Email" =>$arr['email'], "Product_Category" =>$arr['pcategory'], "Product_Name" =>$arr['pname'], "Location" =>$arr['location'], "Pin_Code" =>$arr['pincode'], "Acceptable_Calling_Hours" =>$arr['ach'], "Comment" =>$arr['comment'], "Date" => $date ]); if($result>0){ wp_send_json_success("Data inserted"); }else{ wp_send_json_error("Please try again"); } } add_action('wp_ajax_contact_us','ajax_contact_us'); //Javascript code footer <script> // Contact Form jQuery('#frmContactUs').submit(function(event){ event.preventDefault(); jQuery('#result_msg').html(''); var link ="<?php echo admin_url('admin-ajax.php')?>"; var form = jQuery('#frmContactUs').serialize(); var formData = new FormData; formData.append('action','contact_us'); formData.append('contact_us', form); var ach = $('#ach').val() // This doesn't seem to hold the value formData.append('ach', ach); var pcategory = $('#pcategory').val() // This doesn't seem to hold the value formData.append('pcategory', pcategory); var pname = $('#pname').val() // This doesn't seem to hold the value formData.append('pname', pname); jQuery('#submit').attr('disabled',true); jQuery.ajax({ url:link, data:formData, processData:false, contentType:false, type:'post', success:function(result){ jQuery('#submit').attr('disabled',false); if(result.success==true){ jQuery('#frmContactUs')[0].reset(); } jQuery('#result_msg').html('<span class="'+result.success+'">'+result.data+'</span>') //result.success //result.data } }); }); </script>
Comments