I have a page with roughly 20 enquiry buttons. Each button fires the same modal ajax PHP form. The form system works as it should, sending an email and triggering the success message. The success message displays inside the form tags but the rest of the form disappears leaving just
tags.
The success message has a close button which closes the modal but the problem is that when I click any of the other enquiry buttons on the page they fire the modal but its still stuck on the success message.
Is there a way of using the modal close button as a sort of clear form trigger?
This is the ajax script im using…
<script>
function _(id){ return document.getElementById(id); }
function submitForm() {
_("sendenquiry").disabled = true;
_("status").innerHTML = 'please wait…';
var formdata = new FormData();
formdata.append( "n", _("n").value );
formdata.append( "e", _("e").value );
formdata.append( "m", _("m").value );
var ajax = new XMLHttpRequest();
ajax.open( "POST", "enquire.php" );
ajax.onreadystatechange = function() {
if(ajax.readyState == 4 && ajax.status == 200) {
if(ajax.responseText == "success"){
_("enquiry_form").innerHTML = '<p>Thanks '+_("n").value+', we will be in touch shortly.</p>';
} else {
_("status").innerHTML = ajax.responseText;
_("sendenquiry").disabled = false;
}
}
}
ajax.send( formdata );
}
</script>
This is my html
<!--enquiry modal-->
<div class="enquire-form-modal ef-effect" id="efmodal">
<div class="ef-content">
<div>
<form class="enquire-message" id="enquiry_form" onsubmit="submitForm(); return false;">
<fieldset>
<legend>Please fill out your enquiry below and we'll quickly get back to you.</legend>
<div class="">
<label class="" for="">Name</label>
<span><input type="text" id="n" class="" name="" placeholder="My name" required></span>
</div>
<div class="">
<label class="" for="">Email</label>
<span><input type="email" id="e" class="" name="email" placeholder="My email" required></span>
</div>
<div class="">
<label class="" for="">Enquiry</label>
<span><textarea id="m" class="" name="" placeholder="My enquiry" required></textarea></span>
</div>
<div>
<input id="sendenquiry" type="submit" value="SEND"> <span id="status"></span>
</div>
</fieldset>
</form>
<button class="ef-close">Close</button>
</div>
</div>
</div>
<div class="enquire-form-overlay"></div>
<!--enquiry modal end-->
Any help would be hugely appreciated. I’ve tried various things but nothing is working yet. If you need more code please let me know. Thanks in advance
The problem is that you're replacing all of the form's html when the ajax call is complete. Try using the "status" div for housing the success message. Then, perhaps a simple setTimeout will suffice for clearing the message.
<script>
function _(id){ return document.getElementById(id); }
function submitForm() {
_("sendenquiry").disabled = true;
_("status").innerHTML = 'please wait…';
var formdata = new FormData();
formdata.append( "n", _("n").value );
formdata.append( "e", _("e").value );
formdata.append( "m", _("m").value );
var ajax = new XMLHttpRequest();
ajax.open( "POST", "enquire.php" );
ajax.onreadystatechange = function() {
if(ajax.readyState == 4 && ajax.status == 200) {
if(ajax.responseText == "success"){
_("status").innerHTML = '<p>Thanks '+_("n").value+', we will be in touch shortly.</p>';
} else {
_("status").innerHTML = ajax.responseText;
}
// clear the "status" message after 5 seconds
setTimeout(function() {
_("status").innerHTML = "";
}, 5000);
_("sendenquiry").disabled = false;
}
}
ajax.send( formdata );
}
</script>