Go to main content

Textpattern CMS support forum

You are not logged in. Register | Login | Help

#13 2017-09-21 13:03:02

zenman
Member
Registered: 2017-08-28
Posts: 41
Website

Re: Integrate thickbox with Zem Contact Form using Ajax

The topic looks dead but I try to revive it because many TXP users ask the answer.

I have integrated a simple submit formHTM, JS, PHP with Ajax into Textpattern. It works OK. But I would like to be able to make the same using TXP plugins. How can I integrate txp:com_connect to work with ajax if JS code is this:

document.getElementById('feedback').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", "sender.php", 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 + "&IInputOtherRemarks=" + this.InputOtherRemarks.value);
			  http.onreadystatechange = function() {
				if (http.readyState == 4 && http.status == 200) {
				  $('.alert-success').show().delay(5000).fadeOut(1000);
				  $('.alert-danger').hide();
				  $('#feedback').trigger( 'reset' );
				}
			  }
			  http.onerror = function() {				
			  }
			  return false;
	}
	else {
		$('.alert-danger').show();
		$('.alert-success').hide();
		return false;	}
}     

I understant adjusting field names. But with what do I replace this? namely sender.php?

http.open("POST", "sender.php", true);

Offline

#14 2017-09-22 09:23:12

etc
Developer
Registered: 2010-11-11
Posts: 5,028
Website GitHub

Re: Integrate thickbox with Zem Contact Form using Ajax

zenman wrote #307186:

I understant adjusting field names. But with what do I replace this? namely sender.php?

http.open("POST", "sender.php", true);...

I guess you should use the form’s action attribute?

Offline

#15 2017-09-22 09:33:04

zenman
Member
Registered: 2017-08-28
Posts: 41
Website

Re: Integrate thickbox with Zem Contact Form using Ajax

etc wrote #307189:

I guess you should use the form’s action attribute?

the one that looks like:

action="/#com82c5597dc9fa922cd347e6af6e1c99e9"? 

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

Offline

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

etc
Developer
Registered: 2010-11-11
Posts: 5,028
Website GitHub

Re: Integrate thickbox with Zem Contact Form using Ajax

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?

Offline

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

zenman
Member
Registered: 2017-08-28
Posts: 41
Website

Re: Integrate thickbox with Zem Contact Form using Ajax

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?

Offline

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

etc
Developer
Registered: 2010-11-11
Posts: 5,028
Website GitHub

Re: Integrate thickbox with Zem Contact Form using Ajax

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.

Offline

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

zenman
Member
Registered: 2017-08-28
Posts: 41
Website

Re: Integrate thickbox with Zem Contact Form using Ajax

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)

Offline

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

etc
Developer
Registered: 2010-11-11
Posts: 5,028
Website GitHub

Re: Integrate thickbox with Zem Contact Form using Ajax

Yes, but without quotes:

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

Offline

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

zenman
Member
Registered: 2017-08-28
Posts: 41
Website

Re: Integrate thickbox with Zem Contact Form using Ajax

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!

Offline

Board footer

Powered by FluxBB