HTML button to submit form with popup - html

Question

I have this code that submits a form and sends a mail, and it opens a different page saying successful:
<input type="submit" value="submit">
Then I also have this code which is a sexy button that pops up a message that the mail has been sent (even though it hasn't):
Submit
How do I combine the code so that the mail sends with the sexy button and I get the popup, instead of landing on a new page?

Answer 1

I'd suggest using ajax to confirm the email sending, after which pop-up your so called sexy button.
<form method="POST" action="/your/path/to/php/file">
<input type="submit" value="submit" onclick="someFunction();">
</form>
<a id="href_id" href="submit-message.html" class="nicdark_marginbottom20_iphoneland nicdark_marginbottom20_iphonepotr nicdark_mpopup_ajax nicdark_outline white nicdark_btn nicdark_bg_bluedark medium title">Submit</a>
<script type="application/javascript">
function someFunction() {
$.ajax({
type: 'POST',
url: 'route/to/php/file',
data: {
// data goes here
},
cache: false,
headers: {
// headers(if any) fo here
},
success: function(){
$('#href_id').show();
}
});
}
</script>
The php file may look something like this:
if(mail ($to, $subject, $message, $additional_headers = null, $additional_parameters = null)) {
return true;
}
Now, clearly this is not a complete code and should not be taken as such, this is mearly a pointing in the right direction of sorts.
I'm using jQuery here simply because I'm more familiar with it, but all this can be done in pure javascript, there's no real need to use jQuery if you don't want to.
Read more about ajax, PHP and Ajax.
As a final note, the logic is as such:
Do an ajax call in the front-end
Send email in backend using PHP(or your language of choice)
Return a response that confirms or not that the email has been sent
Based on that response display the pop-up