Integrate thickbox with Zem Contact Form using Ajax

etc · 2017-09-22 09:39:44

zenman wrote #307190:

I thought about it but I hoped there was a more universal method.

I didn’t mean this exact string, but $(this).attr('action'), since you seem to use jQuery. Does it work?

zenman · 2017-09-22 11:41:33

etc wrote #307191:

I didn’t mean this exact string, but $(this).attr('action'), since you seem to use jQuery. Does it work?

Did not try yet. Is this $(this).attr(‘action’)? in jQuery.js?

etc · 2017-09-23 10:24:30

zenman wrote #307193:

Did not try yet. Is this $(this).attr(‘action’)? in jQuery.js?

Yes, it’s a standard jQuery function. Try to replace "sender.php" with this in your snippet.

zenman · 2017-09-23 11:05:17

etc wrote #307200:

Yes, it’s a standard jQuery function. Try to replace "sender.php" with this in your snippet.

ok. so it should look like

 http.open("POST", "$(this).attr('action')", true);

….?

Last edited by zenman (2017-09-23 11:06:41)

etc · 2017-09-24 10:48:38

Yes, but without quotes:

http.open("POST", $(this).attr('action'), true);

zenman · 2017-12-01 19:35:00

etc wrote #307204:

Yes, but without quotes:

http.open("POST", $(this).attr('action'), true);...

finally found some time for testing. tried this method but still the page is reloaded. here is the script

document.getElementById('zcr592d92e49daf16a20e10e15e1216817c').onsubmit = function(){
	var field_name =  document.getElementById("InputFullName").value;
	var field_phone =  document.getElementById("InputPhone").value;
	if (field_name.length!=0 && field_phone.length!=0) {
		var http = new XMLHttpRequest();
			  http.open("POST", $(this).attr('action'), true);
			  http.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
			  http.send("InputFullName=" + this.InputFullName.value + "&InputPhone=" + this.InputPhone.value + "&InputEmail=" + this.InputEmail.value + "&InputFromZip=" + this.InputFromZip.value + "&InputToZip=" + this.InputToZip.value + "&InputDateofMove=" + this.InputDateofMove.value + "&InputMoveSize=" + this.InputMoveSize.value + "&InputOtherRemarks=" + this.InputOtherRemarks.value);
			  http.onreadystatechange = function() {
				if (http.readyState == 4 && http.status == 200) {
				  $('.alert-success').show().delay(5000).fadeOut(1000);
				  $('.alert-danger').hide();
				  $('#zcr592d92e49daf16a20e10e15e1216817c').trigger( 'reset' );
				}
			  }
			  http.onerror = function() {				
			  }
			  return false;
	}
	else {
		$('.alert-danger').show();
		$('.alert-success').hide();
		return false;
	}
}

By the way, I replaced txp:zem_contact_submit with

<button type="submit" class="btn btn-success" >Send Quote</button>

and it works!

Textpattern CMS

Textpattern CMS support forum

#16 2017-09-22 09:39:44

Re: Integrate thickbox with Zem Contact Form using Ajax

zenman wrote #307190:

#17 2017-09-22 11:41:33

Re: Integrate thickbox with Zem Contact Form using Ajax

etc wrote #307191:

#18 2017-09-23 10:24:30

Re: Integrate thickbox with Zem Contact Form using Ajax

zenman wrote #307193:

#19 2017-09-23 11:05:17

Re: Integrate thickbox with Zem Contact Form using Ajax

etc wrote #307200:

#20 2017-09-24 10:48:38

Re: Integrate thickbox with Zem Contact Form using Ajax

#21 2017-12-01 19:35:00

Re: Integrate thickbox with Zem Contact Form using Ajax

etc wrote #307204:

Board footer