DatePicker

Hi there,

I have included the datepicker in my form, but it's not coming through in the email - i.e lost field in email notification, as per below example: any help would be appreciated. - the form is here - http://www.justweddingentertainment.com.au/contact-us

Act 123
Type of Event wedding
Event Suburb point
No of Guests 124
Budget $3000-$4000
Name s
Email slavica@smps.com.au
Phone 00000000
State vic

Hi JWE,

Do you have {datepicker2} in the Email template?

Please drag a Debugger action into the On Submit event, then submit the form and post the debug - including the 'dummy emails' results here.

Note: if you are using the Easy Wizard you can turn on Debug on the Others tab in CFv4 or the Setup tab in CFv5.

Bob

Hi there,
Yes, I'm using the datepicker2 in email template.
I have added the debugger and this is the error msg:

Data Array
Array (
  [chronoform] => Contact
  [event] => submit
  [text1] => 12
  [text2] => wedding
  [datepicker2] => 31-08-2015
  [text3] => point
  [text4] => 124
  [dropdown5] => $0-$500
  [text6] => slav
  [text8] => slavica@smps.com.au
  [text7] => 00000000
  [text9] => nsw
  [textarea10] => testing
  [captcha] =>
  [button12] => Submit
)
Array ( )
Errors
Array ( )
Debug Info
Array ( ) 

I have attached an image of where I have placed the debugger.
The result of the email is below and still missing the datepicker field.

Act	12
Type of Event	wedding
Event Suburb	point
No of Guests	124
Budget	$0-$500
Name	slav
Email	slavica@smps.com.au

Phone	00000000
State	nsw
Enquiry	testing

Hi JWE,

The missing label for the Date in the email suggests a typo in the HTML there. Please post the Email template HTML here.

Bob

Hi there,
I'm not really sure what you mean but this is from the template:

$("#chronoform-Contact").gvalidate();

				$("#chronoform-Contact").find(":input").on("invalid.gvalidation", function(){
					var field = $(this);
					if(field.is(":hidden")){
						if(field.closest(".tab-pane").length > 0){
							var tab_id = field.closest(".tab-pane").attr("id");
							$('a[href="#'+tab_id+'"]').closest(".nav").gtabs("get").show($('a[href="#'+tab_id+'"]'));
						}
						if(field.closest(".panel-collapse").length > 0){
							var slider_id = field.closest(".panel-collapse").attr("id");
							$('a[href="#'+slider_id+'"]').closest(".panel-group").gsliders("get").show($('a[href="#'+slider_id+'"]'));
						}
					}
					if(field.data("wysiwyg") == "1"){
						field.data("gvalidation-target", field.parent());
					}
				});
				$("#chronoform-Contact").on("success.gvalidation", function(e){
					if($("#chronoform-Contact").data("gvalidate_success")){
						var gvalidate_success = $("#chronoform-Contact").data("gvalidate_success");
						if(gvalidate_success in window){
							window[gvalidate_success](e, $("#chronoform-Contact"));
						}
					}
				});
				$("#chronoform-Contact").on("fail.gvalidation", function(e){
					if($("#chronoform-Contact").data("gvalidate_fail")){
						var gvalidate_fail = $("#chronoform-Contact").data("gvalidate_fail");
						if(gvalidate_fail in window){
							window[gvalidate_fail](e, $("#chronoform-Contact"));
						}
					}
				});
			

					function chronoforms_validation_signs(formObj){
						formObj.find(":input[class*=validate]").each(function(){
							if($(this).attr("class").indexOf("required") >= 0 || $(this).attr("class").indexOf("group") >= 0){
								var required_parent = [];
								if($(this).closest(".gcore-subinput-container").length > 0){
									var required_parent = $(this).closest(".gcore-subinput-container");
								}else if($(this).closest(".gcore-form-row, .form-group").length > 0){
									var required_parent = $(this).closest(".gcore-form-row, .form-group");
								}
								if(required_parent.length > 0){
									var required_label = required_parent.find("label");
									if(required_label.length > 0 && !required_label.first().hasClass("required_label")){
										required_label.first().addClass("required_label");
										required_label.first().html(required_label.first().html() + " <i class='fa fa-asterisk' style='color:#ff0000; font-size:9px; vertical-align:top;'></i>");
									}
								}
							}
						});
					}
					chronoforms_validation_signs($("#chronoform-Contact"));
				

				function chronoforms_data_tooltip(formObj){
					formObj.find(":input").each(function(){
						if($(this).data("tooltip") && $(this).closest(".gcore-input, .gcore-input-wide").length > 0){
							var tipped_parent = [];
							if($(this).closest(".gcore-subinput-container").length > 0){
								var tipped_parent = $(this).closest(".gcore-subinput-container");
							}else if($(this).closest(".gcore-form-row, .form-group").length > 0){
								var tipped_parent = $(this).closest(".gcore-form-row, .form-group");
							}
							if(tipped_parent.length > 0){
								var tipped_label = tipped_parent.find("label");
								if(tipped_label.length > 0 && !tipped_label.first().hasClass("tipped_label")){
									tipped_label.first().addClass("tipped_label");
									var $tip = $("<i class='fa fa-exclamation-circle input-tooltip' style='color:#2693FF; padding-left:5px;'></i>");
									$tip.data("content", $(this).data("tooltip"));
									tipped_label.first().append($tip);
								}
							}
						}
					});
					formObj.find(".input-tooltip").gtooltip();
				}
				chronoforms_data_tooltip($("#chronoform-Contact"));
			

				function chronoforms_data_loadstate(formObj){
					formObj.find(':input[data-load-state="disabled"]').prop("disabled", true);
					formObj.find('*[data-load-state="hidden"]').css("display", "none");
					formObj.find(':input[data-load-state="hidden_parent"]').each(function(){
						if($(this).closest(".gcore-subinput-container").length > 0){
							$(this).closest(".gcore-subinput-container").css("display", "none");
						}else if($(this).closest(".gcore-form-row").length > 0){
							$(this).closest(".gcore-form-row").css("display", "none");
						}
					});
				}
				chronoforms_data_loadstate($("#chronoform-Contact"));
			
$(":input").inputmask();

			$('*[data-gdatetimepicker-format]').each(function(){
				$(this).data("format", $(this).data("gdatetimepicker-format"));
			});
			
$('*[data-gdatetimepicker="1"]').gdatetimepicker();
$('*[data-fieldtype="gdatetimepicker"]').gdatetimepicker();

			$(":input").on("select_date.gdatetimepicker", function(){
				if($(this).data("on_date_selected")){
					var on_date_selected = $(this).data("on_date_selected");
					if(on_date_selected in window){
						window[on_date_selected]($(this));
					}
				}
			});
			
function chronoforms_fields_events(){
}
chronoforms_fields_events();
function chronoforms_pageload_fields_events(){

}
chronoforms_pageload_fields_events();
			});</script>
  <script type="text/javascript">		jQuery(document).ready(function($){
			$('[data-g-toggle="tab"]').closest('.nav').gtabs({
				'pane_selector':'.tab-pane',
				'tab_selector':'[data-g-toggle="tab"]',
			});
			$('[data-g-toggle="collapse"]').closest('.panel-group').gsliders({
				'pane_selector':'.panel-collapse',
				'tab_selector':'[data-g-toggle="collapse"]',
				'active_pane_class':'in',
			});
			
			$('[data-g-toggle="modal"]').on('click', function(e){
				e.preventDefault();
				$modal = $($(this).data('g-target'));
				$modal.gmodal({
					'close_selector' : '[data-g-dismiss="modal"]',
				});
				$modal.gmodal('open');
			});
			
			$('.gdropdown').gdropdown();
			$('[data-g-toggle="dropdown"]').on('click', function(e){
				e.preventDefault();
				$(this).parent().find('.gdropdown').gdropdown('toggle');
			});
		});
		</script>

And this is from the form code:

<div class="form-group" id="form-row-text1"><label for="text1" class="control-label">Act</label>
<div class="gcore-input gcore-display-table" id="fin-text1"><input name="text1" id="text1" value="" placeholder="" maxlength="150" size="50" class="validate['required'] form-control" title="" style="" data-inputmask="" data-load-state="" data-tooltip="" type="text" /></div></div><div class="form-group" id="form-row-text2"><label for="text2" class="control-label">Type of Event</label>
<div class="gcore-input gcore-display-table" id="fin-text2"><input name="text2" id="text2" value="" placeholder="" maxlength="150" size="50" class="validate['required'] form-control" title="" style="" data-inputmask="" data-load-state="" data-tooltip="" type="text" /></div></div><div class="form-group" id="form-row-datepicker2"><label for="datepicker2" class="control-label">Date of Event</label>
<div class="gcore-input gcore-display-table" id="fin-datepicker2"><input name="datepicker2" id="datepicker2" value="" data-gdatetimepicker-format="d-m-Y" placeholder="" size="50" class="validate['required'] form-control" title="" style="" data-load-state="" data-tooltip="" type="text" data-fieldtype="gdatetimepicker" data-start_view="d" /></div></div><div class="form-group" id="form-row-text3"><label for="text3" class="control-label">Event Suburb</label>
<div class="gcore-input gcore-display-table" id="fin-text3"><input name="text3" id="text3" value="" placeholder="" maxlength="150" size="50" class="validate['required'] form-control" title="" style="" data-inputmask="" data-load-state="" data-tooltip="" type="text" /></div></div><div class="form-group" id="form-row-text4"><label for="text4" class="control-label">No of Guests</label>
<div class="gcore-input gcore-display-table" id="fin-text4"><input name="text4" id="text4" value="" placeholder="" maxlength="150" size="50" class="validate['required'] form-control" title="" style="" data-inputmask="" data-load-state="" data-tooltip="" type="text" /></div></div><div class="form-group" id="form-row-dropdown5"><label for="dropdown5" class="control-label">Budget</label>
<div class="gcore-input gcore-display-table" id="fin-dropdown5"><select name="dropdown5" id="dropdown5" size="" class="validate['required'] form-control" title="" style="" data-load-state="" data-tooltip="">
<option value="">Please Select</option>
<option value="$0-$500">$0-$500</option>
<option value="$500-$1000">$500-$1000</option>
<option value="$1000-$1500">$1000-$1500</option>
<option value="$1500-$2000">$1500-$2000</option>
<option value="$2000-$3000">$2000-$3000</option>
<option value="$3000-$4000">$3000-$4000</option>
<option value="over $5000">over $5000</option>
</select></div></div><div class="form-group" id="form-row-text6"><label for="text6" class="control-label">Name</label>
<div class="gcore-input gcore-display-table" id="fin-text6"><input name="text6" id="text6" value="" placeholder="" size="50" class="validate['required'] form-control" title="" style="" data-inputmask="" data-load-state="" data-tooltip="" type="text" /></div></div><div class="form-group" id="form-row-text8"><label for="text8" class="control-label">Email</label>
<div class="gcore-input gcore-display-table" id="fin-text8"><input name="text8" id="text8" value="" placeholder="" maxlength="150" size="50" class="validate['required'] form-control" title="" style="" data-inputmask="" data-load-state="" data-tooltip="" type="text" /></div></div><div class="form-group" id="form-row-text7"><label for="text7" class="control-label">Phone</label>
<div class="gcore-input gcore-display-table" id="fin-text7"><input name="text7" id="text7" value="" placeholder="" maxlength="150" size="50" class="validate['required'] form-control" title="" style="" data-inputmask="" data-load-state="" data-tooltip="" type="text" /></div></div><div class="form-group" id="form-row-text9"><label for="text9" class="control-label">State</label>
<div class="gcore-input gcore-display-table" id="fin-text9"><input name="text9" id="text9" value="" placeholder="" size="50" class="validate['required'] form-control" title="" style="" data-inputmask="" data-load-state="" data-tooltip="" type="text" /></div></div><div class="form-group" id="form-row-textarea10"><label for="textarea10" class="control-label">Enquiry</label>
<div class="gcore-input gcore-display-table" id="fin-textarea10"><textarea name="textarea10" id="textarea10" placeholder="" rows="3" cols="50" class="form-control" title="" style="" data-wysiwyg="0" data-load-state="" data-tooltip=""></textarea></div></div><div class="form-group" id="form-row-captcha"><div class="gcore-subinput-container-wide" id="fitem"><label for="captcha1" class="control-label">Enter the code</label>
<div class="gcore-input gcore-sub-input gcore-display-table" id="fin-captcha1"><input placeholder="" class="validate['required'] form-control" title="" style="" type="text" name="captcha" id="captcha1" /></div></div>
<div class="gcore-subinput-container-wide" id="fitem1"><div class="gcore-input gcore-sub-input gcore-display-table" id="fin-captcha2">{captcha_img}</div></div><div class="clearfix"></div></div><div class="form-group" id="form-row-button12"><div class="gcore-input gcore-display-table" id="fin-button12"><input name="button12" id="button12" type="submit" value="Submit" class="" style="" data-load-state="" /></div></div>

Hi JWE,

Please open the Email action, find the Template and post the code from that box here.

Neither of the snippets you posted look like an email template to me.

Bob

Ok, found it!

<table>
<tr><td>Act</td><td>{text1}</td></tr>
<tr><td>Type of Event</td><td>{text2}</td></tr>
<tr><td>Event Suburb</td><td>{text3}</td></tr>
<tr><td>No of Guests</td><td>{text4}</td></tr>
<tr><td>Budget</td><td>{dropdown5}</td></tr>
<tr><td>Name</td><td>{text6}</td></tr>
<tr><td>Email</td><td>{text8}</td></tr>
<tr><td>Phone</td><td>{text7}</td></tr>
<tr><td>State</td><td>{text9}</td></tr>
<tr><td>Enquiry</td><td>{textarea10}</td></tr>
<tr><td>{label}</td><td>{captcha}</td></tr>
<tr><td>{label}</td><td>{captcha}</td></tr>
</table>

Hi JWE,

And, as you can see there is no {datepicker2}, I guess that you added the input after the email was first created.

If you delete the present template and re-save the form then ChronoForms will create a new template as best it can; or you can edit this one to include the extra inputs (and remove the captcha and submit buttons).

Bob

PS I recommend that you give your inputs 'useful' names like 'name' and 'email' in place of the automatic 'text1', text2', etc.