Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
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 form – HTM, 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
Offline
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
Offline
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
Offline
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
Re: Integrate thickbox with Zem Contact Form using Ajax
Yes, but without quotes:
http.open("POST", $(this).attr('action'), true);
Offline
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