Custom Ajax Form for WP

PHOTO EMBED

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>
content_copyCOPY