Front end form to enter data into custom WordPress table using shortcode

Front end form to enter data into custom WordPress table using shortcode in Plugin for.

Step => 1 Add Shortcode in functions.php.
<?php


function event_shortcode_function($atts, $content = "") {
    ob_start();
	
	
    $atts = shortcode_atts(array(
        		'ajax' => 'false',
			), $atts, 'event');
			
	$ifAjax =  $atts['ajax'];
	
	if(isset($_REQUEST['event_submit'])){		
		$event_result = event_submit_form();	
		$query_Var = add_query_arg( 'add_event', $event_result, get_permalink());
		wp_redirect($query_Var);
		exit;
	}
	
	if(isset($_REQUEST['add_event'])){
		
		if ($_REQUEST['add_event'] === '1')
        $event_response = '<div class="alert alert-success" role="alert">Event Added Successfully !</div>';
    else
        $event_response = '<div class="alert alert-danger" role="alert"><strong>Oh snap!</strong> Something wrong! Please try again.</div>';
		echo $event_response;		
	}
	
	
    wp_enqueue_script('jquery-ui-datepicker');
    wp_enqueue_style('jquery-style', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/smoothness/jquery-ui.css');
    wp_enqueue_script('event-default', get_template_directory_uri() . '/include/js/default.js', array('jquery'));

    wp_localize_script('event-default', 'event_ajax_url', admin_url('admin-ajax.php'));

    $details = '';
	if($ifAjax == 'true'){
		$event_butten = '<button type="button" id="event-submit" class="btn btn-default">Submit</button>';
	}
	else{
		$event_butten = '<button type="submit" id="event-submit-ajax" class="btn btn-default" name="event_submit">Submit</button>';
	}
	

    $details = '<div class="event">'
			. '<style>.required {    border-color: #ff0000;}</style>'
            . '<form action="" id="event-submit" name="event_submit_form" method="post">'
            . '<div class="form-group event-alert">'
            . '</div>'
            . '<div class="form-group">'
            . '<label for="e_name">Name :</label>'
            . '<input type="text" class="form-control validate-req" id="e_name" name="e_name" placeholder="Name">'
            . '</div>'
			. '<div class="form-group">'
            . '<label for="e_email">Email :</label>'
            . '<input type="text" class="form-control validate-req" id="e_email" name="e_email" placeholder="Email">'
            . '</div>'
            . '<div class="form-group">'
            . '<label for="e_detail">Detail :</label>'
            . '<textarea class="form-control validate-req" id="e_detail" name="e_detail" placeholder="Event detail"></textarea>'
            . '</div>'
            . '<div class="form-group">'
            . '<label for="e_s_date">From Date :</label>'
            . '<input type="text" class="form-control validate-req event-date" id="e_s_date" name="e_s_date">'
            . '</div>'
            . '<div class="form-group">'
            . '<label for="e_e_date">To Date :</label>'
            . '<input type="text" class="form-control validate-req event-date" id="e_e_date" name="e_e_date">'
            . '</div>'
            . '<div class="form-group">'.$event_butten.'</div>'
            . '</form>'
            . '</div>';

    return $content . $details;
    //return "foo = {$content}";
    ob_end_clean();
}

add_shortcode('event', 'event_shortcode_function');

function event_submit() {
    global $wpdb, $post;
    $event_action = '';	
    $event_table_name = EVENT_TBL;
   
    $event_result = $wpdb->insert(
            $event_table_name, array(
        'name' => $_POST['e_name'],
        'detail' => $_POST['e_detail'],
        's_date' => date('Y-m-d H:i:s',strtotime($_POST['s_date'])),
        'e_date' => date('Y-m-d H:i:s',strtotime($_POST['e_date'])),
        ), array(
        '%s',
        '%s',
        '%s',
        '%s',
    ));

    if ($event_result === 1)
        $event_response = '<div class="alert alert-success" role="alert">Event Added Successfully !</div>';
    else
        $event_response = '<div class="alert alert-danger" role="alert"><strong>Oh snap!</strong> Something wrong! Please try again.</div>';
	
	
		echo json_encode(array('eventresult' => $event_response));
		die;	
	
}

add_action('wp_ajax_event_submit', 'event_submit');
add_action('wp_ajax_nopriv_event_submit', 'event_submit');


function event_submit_form() {
    global $wpdb, $post;
    $event_action = '';	
    $event_table_name = EVENT_TBL;
    
    $event_result = $wpdb->insert(
            $event_table_name, array(
        'name' => $_POST['e_name'],
        'detail' => $_POST['e_detail'],
        's_date' => date('Y-m-d H:i:s',strtotime($_POST['s_date'])),
        'e_date' => date('Y-m-d H:i:s',strtotime($_POST['e_date'])),
        ), array(
        '%s',
        '%s',
        '%s',
        '%s',
    ));

	return $event_result;
    
}
?>
Step => 2 Add jQuery file ad default.js.
jQuery(document).ready(function () {
    jQuery('.event-date').datepicker({
        dateFormat: 'dd-mm-yy'
    });
	
	jQuery('#event-submit').submit(function(e) {
		
		var isValid = 1;
		jQuery(this).find('.validate-req').each(function(){
			if(jQuery(this).val() == ''){
				jQuery(this).addClass('required');
				isValid = 0;
			}
		});		
		if (isValid == 0) {
			alert('Please enter content to fields !');
			jQuery('.required').first().focus();
			return false;
	
		}        
    });
	
	jQuery('.validate-req').blur(function () {
		if(jQuery(this).val() != ''){
			jQuery(this).removeClass('required');
		}
	});
	jQuery('.validate-req').change(function () {
		if(jQuery(this).val() != ''){
			jQuery(this).removeClass('required');
		}
	});
	
    jQuery('#event-submit-ajax').click(function () {
		
		
		
		
		
        jQuery.ajax({
            url: event_ajax_url,
            type: 'POST',
            dataType: "json",
            data: {
                action: 'event_submit',
                e_name: jQuery('#e_name').val(),
                e_detail: jQuery('#e_detail').val(),
                e_s_date: jQuery('#e_s_date').val(),
                e_e_date: jQuery('#e_e_date').val(),
            },
            success: function (data) {
                //alert(data.eventresult);
				jQuery('#e_name').val('');
				jQuery('#e_detail').val('');
                jQuery('#e_s_date').val('');
                jQuery('#e_e_date').val('');
                jQuery('.event-alert').html(data.eventresult);
				setTimeout(function(){
					jQuery('.event-alert').html('');
				},1000);
            }
        });
    });
});
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s