I am facing a peculiar issue reported by my users, but I have never encountered it myself because I cannot replicate it.
In my vue.js component, there are two HTML forms. The first form is filled out by the user and upon submission, a function is triggered which makes two axios calls and then automatically submits the second form. This second form is a standard PayPal form that redirects the user to the PayPal website. Below are snippets of the code:
The doLogging() function is responsible for writing to a file on a different server. On the other hand, the doMail() function sends an email and also writes to another file.
Users are always redirected to the PayPal site without any issues. However, sometimes both logging and emails are successful, while other times neither of them occur. It seems like the axios calls intermittently fail to execute.
Here is an excerpt of the HTML code:
<form @submit.prevent="processRegistration()">
<button type="submit"
class="button is-info">Ready to pay with PayPal
</button>
... other form elements ...
</form>
<form id="paypalForm" action="https://www.paypal.com/cgi-bin/webscr" method="post" class="hidden">
... paypal form elements ...
<input type="submit" value="Pay with PayPal"/>
</form>
And here are simplified versions of the functions being called:
processRegistration() {
this.doLogging();
this.doMail();
let paypalForm = document.getElementById('paypalForm');
paypalForm.submit();
}
async doLogging() { // log info to a file
let headers = {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'};
try {
await axios.post('https://logging.xxx.com/logger.php', this.stuff, {headers: headers});
} catch (e) {
console.log(e);
}
},
async doMail() { / send email and log info to a file
let headers = {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'};
try {
await axios.post('/email.log.php', this.otherStuff, {headers: headers});
} catch (e) {
console.log(e);
}
},